快速开始
项目初始化
方式一：easywebpack-cli 脚手架初始化项目
- 安装脚手架
npm install easywebpack-cli -g - 初始化
easywebpack init -
根据需求选择
初始化的选择 - 安装依赖
npm install
方式二：Github 仓库代码初始化项目
git clone https://github.com/hubcarl/egg-vue-webpack-boilerplate.git- 安装依赖
npm install
方式三：vscode 插件初始化项目
项目运行
本地运行
npm run dev
发布模式
- 构建文件落地磁盘
npm run build或easy build prod
- 服务端构建的文件放到
app/view目录 - 前端构建的文件放到
public目录 - 生成的
manifest.json放到config目录
- 运行
npm start
项目构建
项目规范
- egg开发规范
- 前端工程目录：
app/web目录 - 页面入口目录：
app/web/page - 建议每个页面的目录只保留一个vue文件
项目开发
多页面服务端渲染实现
- 多页面前端页面实现：在
app/web/page目录下面创建home目录，home.vue文件，webpack 自动根据 .vue 文件创建entry入口 - 多页面后端渲染实现：通过 egg-view-vue-ssr 插件
render方法实现 - 多页面走前端渲染实现：通过 egg-view-vue-ssr 插件
renderClient方法实现
HTML静态页面前端渲染
- 直接由 easywebpack 构建出静态HTML文件，请见
webpack.config.js配置和app/web/page/html代码实现 - 通过
egg-static静态文件访问HTML文件
单页面服务端渲染同构实现
- 单页面前端实现：在
app/web/page目录下创建app目录，app.vue文件，app.js文件 - 单页面后端实现：
- 在
app/controller目录下创建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 构建工程化方案
- easywebpack-cli：webpack 构建工程化脚手架
- egg-view-vue-ssr：egg vue ssr 解决方案
- egg-webpack：本地开发热更新使用
- egg-webpack-vue：本地开发渲染内存读取辅助插件
渲染模式
目前 egg-view-vue-ssr支持 服务端渲染模式 和 前端渲染模式 两种渲染模式
Egg + Vue 服务端渲染模式
- 服务端渲染：编写的 Vue 组件在 Node 服务端直接编译成HTML，然后直接输入给浏览器
- 与前端渲染比的优点：
- 支持SEO
- 更快的首屏渲染
- 和传统的模板引擎相比的有点：
- 更好的组件化
- 前后端模板共用
- 数据驱动，更快的开发效率
- 适用于：有一定交互性，对SEO、首屏速度有要求的业务
前端渲染模式
- 前端渲染模式（浏览器渲染模式）：Node 端只会根据 html、head、body 节点信息的 layout 文件输出骨架内容，页面的实际内容交给浏览器去渲染
- 调用
egg-view-vue-ssr的renderClient方法实现客户端浏览器渲染
正常情况下，能进行render运行的，renderClient方法也能正常运行 - webpack 配置优化，提高构建速度
在${root}/webpack.config.js文件添加target: 'web'配置选项，这样只会构建浏览器运行的 JSBundle 文件，无需构建 Node 运行的 JSBundle 文件（SSR 模式会构建两份结果，一份给 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 编译，可以在第三个参数中传入 { 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的第三个扩展参数配置 layout，优先级高于全局 layout 配置
