亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Vue.js前后端通用組件開發(fā)心得-菜鳥篇

weakish / 2987人閱讀

摘要：最好能使用一套模板渲染前后端的數(shù)據(jù)，也就是模板和某些簡單組件可以同構(gòu)。開發(fā)組件因?yàn)樾枰尫?wù)端也能使用，單文件的開發(fā)方式我目前是沒有找到可以讓讀取的方式，所以就暫時(shí)放棄了。這種通用組件寫法只適合比較簡單的項(xiàng)目。

項(xiàng)目情況

我使用的是express做為服務(wù)器框架，只需要調(diào)用后臺(tái)API接口獲得數(shù)據(jù)，然后把數(shù)據(jù)渲染成html就可以了。最好能使用一套模板渲染前后端的數(shù)據(jù)，也就是模板和某些簡單組件可以同構(gòu)。
服務(wù)端渲染vue組件，使用vue-server這個(gè)插件。他的用法和vue差不多。這樣做的目的是首屏服務(wù)端渲染，提升頁面展示速度。

開發(fā)組件

因?yàn)樾枰尫?wù)端也能使用，單.vue文件的開發(fā)方式我目前是沒有找到可以讓node讀取的方式，所以就暫時(shí)放棄了。
還有下面這種寫死組件名字的方式也不太合適

Vue.component("my-component", { /* ... */ })  //這樣寫需要引入Vue,但是前后端的Vue不是一個(gè)東西

所以我選擇了只輸出一個(gè)個(gè)簡單組件對(duì)象的方式，如下 modal.js

為什么template模板要直接寫在里面呢？

答：因?yàn)闀?huì)有2種引入方式，前端是可以預(yù)編譯好的沒有問題，但是后端調(diào)用 import "XXX.html" 這句話就可能執(zhí)行不了。

輸出組件 
#index.js 輸出組件的文件
import modal from "./component/modal/modal"

exports.modal = modal
前端使用組件 
import Vue from "vue"
import {
    picker,
    modal,
    toast,
    alert,
    preloader,
    indicator,
    actions,
    pullToRefresh,
    infiniteScroll
} from "../src/index" 
//使用前端的Vue定義組件和指令的名稱
Vue.component("picker",picker);
Vue.component("modal",modal);
Vue.component("toast",toast);
Vue.component("alert",alert);
Vue.component("preloader",preloader);
Vue.component("indicator",indicator);
Vue.component("actions",actions)

Vue.directive("pull-to-refresh",pullToRefresh)
Vue.directive("infinite-scroll",infiniteScroll)

這樣前端就可以正常使用這個(gè)組件了

后端使用組件 
import {
    picker,
    modal,
    toast,
    alert,
    preloader,
    indicator,
    actions,
    pullToRefresh,
    infiniteScroll
} from "../src/index" 

let vueServer = require("vue-server") //服務(wù)端Vue
let Vue = new vueServer.renderer();
//頁面模板
let tpl = fs.readFileSync(config.PATH_WEBAPP + "/states/index/template.html", "utf-8");

//vue實(shí)例
vm = new Vue({
    replace: false,
    template: tpl,
    components : {
        picker : picker,
        modal : modal,
        toast : toast,
        alert : alert
    },
    data: {
        
    }
});
//渲染好html的事件
vm.$on("vueServer.htmlReady", function (html) {
    res.render("layout", {server_html:html}); //這個(gè)html就是vue服務(wù)端渲染好的，然后可以通過ejs或者其他模板引擎輸出到layout中。
});

ok 這種通用組件寫法只適合比較簡單的項(xiàng)目。比較適合寫一次綁定生成頁面元素的組件，比如列表，布局這種組件。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/79081.html

相關(guān)文章

  • Vue-book 2.0 一個(gè)移動(dòng)端簡單的全棧 web APP

    摘要：本項(xiàng)目是一個(gè)簡單的全棧項(xiàng)目，前端新手可以拿來練練手。項(xiàng)目實(shí)現(xiàn)了一些簡單的功能，后臺(tái)可以對(duì)圖書進(jìn)行錄入錄出掃碼或手動(dòng)，前臺(tái)顯示錄入的圖書，并且前臺(tái)注冊登錄后可以將書的訂單發(fā)給服務(wù)器，并存到服務(wù)器。 Vue-book 2.0 Github 地址：https://github.com/percy507/v... 【覺得不錯(cuò)就來個(gè) star 吧 ^_^】 說明（菜鳥請進(jìn)，大神繞道 ~） 前端...

    wh469012917 評(píng)論0 收藏0

  • Vue-book 2.0 一個(gè)移動(dòng)端簡單的全棧 web APP

    摘要：本項(xiàng)目是一個(gè)簡單的全棧項(xiàng)目，前端新手可以拿來練練手。項(xiàng)目實(shí)現(xiàn)了一些簡單的功能，后臺(tái)可以對(duì)圖書進(jìn)行錄入錄出掃碼或手動(dòng)，前臺(tái)顯示錄入的圖書，并且前臺(tái)注冊登錄后可以將書的訂單發(fā)給服務(wù)器，并存到服務(wù)器。 Vue-book 2.0 Github 地址：https://github.com/percy507/v... 【覺得不錯(cuò)就來個(gè) star 吧 ^_^】 說明（菜鳥請進(jìn)，大神繞道 ~） 前端...

    NotFound 評(píng)論0 收藏0

  • 個(gè)人分享--web前端學(xué)習(xí)資源分享

    摘要：前言月份開始出沒社區(qū)，現(xiàn)在差不多月了，按照工作的說法，就是差不多過了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了一般來說，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議那么今天我就把看過的一些學(xué)習(xí)資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區(qū)，現(xiàn)在差不多9月了，按照工作的說法，就是差不多過了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了！一般來說，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議！那么今天我就...

    sherlock221 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<