摘要:最好能使用一套模板渲染前后端的數(shù)據(jù),也就是模板和某些簡單組件可以同構。開發(fā)組件因為需要讓服務端也能使用,單文件的開發(fā)方式我目前是沒有找到可以讓讀取的方式,所以就暫時放棄了。這種通用組件寫法只適合比較簡單的項目。
項目情況
我使用的是express做為服務器框架,只需要調用后臺API接口獲得數(shù)據(jù),然后把數(shù)據(jù)渲染成html就可以了。最好能使用一套模板渲染前后端的數(shù)據(jù),也就是模板和某些簡單組件可以同構。
服務端渲染vue組件,使用vue-server這個插件。他的用法和vue差不多。這樣做的目的是首屏服務端渲染,提升頁面展示速度。
因為需要讓服務端也能使用,單.vue文件的開發(fā)方式我目前是沒有找到可以讓node讀取的方式,所以就暫時放棄了。
還有下面這種寫死組件名字的方式也不太合適
Vue.component("my-component", { /* ... */ }) //這樣寫需要引入Vue,但是前后端的Vue不是一個東西
所以我選擇了只輸出一個個簡單組件對象的方式,如下 modal.js
為什么template模板要直接寫在里面呢?答:因為會有2種引入方式,前端是可以預編譯好的沒有問題,但是后端調用 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)
這樣前端就可以正常使用這個組件了
后端使用組件import { picker, modal, toast, alert, preloader, indicator, actions, pullToRefresh, infiniteScroll } from "../src/index" let vueServer = require("vue-server") //服務端Vue let Vue = new vueServer.renderer(); //頁面模板 let tpl = fs.readFileSync(config.PATH_WEBAPP + "/states/index/template.html", "utf-8"); //vue實例 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}); //這個html就是vue服務端渲染好的,然后可以通過ejs或者其他模板引擎輸出到layout中。 });
ok 這種通用組件寫法只適合比較簡單的項目。比較適合寫一次綁定生成頁面元素的組件,比如列表,布局這種組件。
文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/79081.html
摘要:本項目是一個簡單的全棧項目,前端新手可以拿來練練手。項目實現(xiàn)了一些簡單的功能,后臺可以對圖書進行錄入錄出掃碼或手動,前臺顯示錄入的圖書,并且前臺注冊登錄后可以將書的訂單發(fā)給服務器,并存到服務器。 Vue-book 2.0 Github 地址:https://github.com/percy507/v... 【覺得不錯就來個 star 吧 ^_^】 說明(菜鳥請進,大神繞道 ~) 前端...
摘要:本項目是一個簡單的全棧項目,前端新手可以拿來練練手。項目實現(xiàn)了一些簡單的功能,后臺可以對圖書進行錄入錄出掃碼或手動,前臺顯示錄入的圖書,并且前臺注冊登錄后可以將書的訂單發(fā)給服務器,并存到服務器。 Vue-book 2.0 Github 地址:https://github.com/percy507/v... 【覺得不錯就來個 star 吧 ^_^】 說明(菜鳥請進,大神繞道 ~) 前端...
摘要:前言月份開始出沒社區(qū),現(xiàn)在差不多月了,按照工作的說法,就是差不多過了三個月的試用期,準備轉正了一般來說,差不多到了轉正的時候,會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客,博文推薦分享給大家。 1.前言 6月份開始出沒社區(qū),現(xiàn)在差不多9月了,按照工作的說法,就是差不多過了三個月的試用期,準備轉正了!一般來說,差不多到了轉正的時候,會進行總結或者分享會議!那么今天我就...
閱讀 3098·2023-04-26 01:58
閱讀 951·2021-11-24 09:38
閱讀 3285·2021-09-03 10:29
閱讀 712·2021-08-21 14:10
閱讀 1488·2019-08-30 15:44
閱讀 3085·2019-08-30 14:10
閱讀 3211·2019-08-29 16:32
閱讀 1476·2019-08-29 12:48