快速開始
項目初始化
方式一：easywebpack-cli 腳手架初始化項目
- 安裝腳手架
npm install easywebpack-cli -g - 初始化
easywebpack init -
根據(jù)需求選擇
初始化的選擇 - 安裝依賴
npm install
方式二：Github 倉庫代碼初始化項目
git clone https://github.com/hubcarl/egg-vue-webpack-boilerplate.git- 安裝依賴
npm install
方式三：vscode 插件初始化項目
項目運行
本地運行
npm run dev
發(fā)布模式
- 構(gòu)建文件落地磁盤
npm run build或easy build prod
- 服務端構(gòu)建的文件放到
app/view目錄 - 前端構(gòu)建的文件放到
public目錄 - 生成的
manifest.json放到config目錄
- 運行
npm start
項目構(gòu)建
項目規(guī)范
- egg開發(fā)規(guī)范
- 前端工程目錄：
app/web目錄 - 頁面入口目錄：
app/web/page - 建議每個頁面的目錄只保留一個vue文件
項目開發(fā)
多頁面服務端渲染實現(xiàn)
- 多頁面前端頁面實現(xiàn)：在
app/web/page目錄下面創(chuàng)建home目錄诡必，home.vue文件，webpack 自動根據(jù) .vue 文件創(chuàng)建entry入口 - 多頁面后端渲染實現(xiàn)：通過 egg-view-vue-ssr 插件
render方法實現(xiàn) - 多頁面走前端渲染實現(xiàn)：通過 egg-view-vue-ssr 插件
renderClient方法實現(xiàn)
HTML靜態(tài)頁面前端渲染
- 直接由 easywebpack 構(gòu)建出靜態(tài)HTML文件瑰剃，請見
webpack.config.js配置和app/web/page/html代碼實現(xiàn) - 通過
egg-static靜態(tài)文件訪問HTML文件
單頁面服務端渲染同構(gòu)實現(xiàn)
- 單頁面前端實現(xiàn)：在
app/web/page目錄下創(chuàng)建app目錄劈彪，app.vue文件竣蹦，app.js文件 - 單頁面后端實現(xiàn)：
- 在
app/controller目錄下創(chuàng)建app.js文件 - 在
app/router.js文件中添加路由配置app.get('app(/.+)?', app.controller.app.index)
- 在
項目和插件
- egg-vue-webpack-boilerplate：基于 easywebpack-vue 和 egg-view-vue（ssr）插件的工程骨架項目
- easywebpack-vue：webpack vue 構(gòu)建工程化方案
- easywebpack-cli：webpack 構(gòu)建工程化腳手架
- egg-view-vue-ssr：egg vue ssr 解決方案
- egg-webpack：本地開發(fā)熱更新使用
- egg-webpack-vue：本地開發(fā)渲染內(nèi)存讀取輔助插件
渲染模式
目前 egg-view-vue-ssr支持 服務端渲染模式 和 前端渲染模式 兩種渲染模式
Egg + Vue 服務端渲染模式
- 服務端渲染：編寫的 Vue 組件在 Node 服務端直接編譯成HTML，然后直接輸入給瀏覽器
- 與前端渲染比的優(yōu)點：
- 支持SEO
- 更快的首屏渲染
- 和傳統(tǒng)的模板引擎相比的有點：
- 更好的組件化
- 前后端模板共用
- 數(shù)據(jù)驅(qū)動沧奴，更快的開發(fā)效率
- 適用于：有一定交互性痘括，對SEO、首屏速度有要求的業(yè)務
前端渲染模式
- 前端渲染模式（瀏覽器渲染模式）：Node 端只會根據(jù) html滔吠、head远寸、body 節(jié)點信息的 layout 文件輸出骨架內(nèi)容，頁面的實際內(nèi)容交給瀏覽器去渲染
- 調(diào)用
egg-view-vue-ssr的renderClient方法實現(xiàn)客戶端瀏覽器渲染
正常情況下屠凶，能進行render運行的，renderClient方法也能正常運行 - webpack 配置優(yōu)化肆资，提高構(gòu)建速度
在${root}/webpack.config.js文件添加target: 'web'配置選項矗愧，這樣只會構(gòu)建瀏覽器運行的 JSBundle 文件，無需構(gòu)建 Node 運行的 JSBundle 文件（SSR 模式會構(gòu)建兩份結(jié)果，一份給 Node 運行唉韭，一份給瀏覽器運行）
//${root}/webpack.config.js
module.exports = {
target: 'web'
...
}
layout 配置文件
- layout html 文件
使用renderClient進行渲染時夜涕，需要存在${app_root/app/view/layout.html}layout文件。默認renderClient會對 layout HTML 模板進行 Vue 編譯属愤；如果不想對 layout HTML 進行 Vue 編譯女器，可以在第三個參數(shù)中傳入 { viewEngine: null } - 自定義配置 layout 文件路徑，這里的配置是一個全局的 layout 的配置
//${root}/config/config.default.js
exports.vuessr = {
layout: path.join(app.baseDir, 'app/web/view/layout.html'),
renderOptions: {
basedir: path.join(app.baseDir, 'app/view')
}
};
- 個性化配置 layout 文件
使用renderClient的第三個擴展參數(shù)配置 layout住诸，優(yōu)先級高于全局 layout 配置
