Skip to content

Quick Start

Jump to bottom
cinwell.li edited this page Oct 28, 2016 · 2 revisions

这是一个用 Vue 写多页面应用的模板项目. 这个仓库的主要目标是:

  • 提供一个可以试用和创建项目的脚手架
  • 提供已有项目迁移到多页面编译期渲染的模板

推荐使用方法

仓库代码的运行方式:

git clone [email protected]:ElemeFE/vue-pages-workflow.git example
cd example
cnpm i
# 启动开发服务器
make dev # 使用 ^C 结束 Webpack 服务器

# 执行一次编译打包
make build

由于页面使用了 History API, 所以最好以 / 路径启动项目. 比如 Nginx 当中配置 hosts 文件使用 http://demo/ 域名:

127.0.0.1 demo

然后把 / 路径指向项目所在位置当中的 build/ 文件夹:

server {
  listen 80;
  server_name demo;
  root <demo 项目所在的路径>/build/;
  autoindex on;
  index index.html;
}

如果不习惯 Nginx 也可以采用比如 anywhere 之类工具, 以 build/ 为工作目录启动一个静态文件服务器来执行 index.html.

Cooking 脚手架的使用方法

也可以通过 cooking 初始化项目, 更容易生成项目信息:

npm i cooking-cli -g

mkdir test-vue && cd test-vue
cooking init vue-pages

具体参考对应仓库当中的细节:

https://github.com/cookingjs/slush-cooking-vue-pages

版本依赖

Webpack 2 配置参考 https://webpack.js.org 和 https://github.com/petehunt/webpack-howto

Vue 2 请参考官方文档.

实际项目当中请根据需要调整 Gulpfile.js 和 configs/ 相关文件的具体配置.

工作原理

编译过程页面渲染, 意思是在 Gulp 打包时根据路由生成出 HTML, 优化首屏. 有别于 Vue 以前提供的 PhantomJS 强行渲染页面的方案, 这个方案更多通过代码来控制.

  • 首先通过 Webpack 将 src/app.js 为入口的组件树以服务端模式编译打包成 js
  • 然后执行一次客户端打包, 并保存生成的文件 revision 相关信息
  • 根据指定的路径, 逐一启动 vue-router 初始化 app, 再通过 renderer.renderToString 生成 HTML

注意, 这个过程只是对页面的静态部分进行了渲染, 期间不会处理动态数据, 比如说不发送 Ajax. 为了方便 Nginx 解析, 路径的个数有限, 路由的结尾使用 .html. 最终的效果是: 前端切换路由通过页面局部渲染完成, 而用户可以从任意路由打开页面.

如果需要, 可以专门甚至一个 404 页面, 通过 Nginx 跳转到.

如果必须放弃 .html 结尾, 可以考虑生成文件时用文件夹和 index.html 配合来进行模拟. 同时注意修改 Gulp 脚本, 以免最终效果出错.

增加新页面

新的页面意味着, 前端路由切换时多一种可能, 同时生成文件增加一个页面. 除了在 src/router.js 增加新规则之外, 请在 configs/page-list.js 当中添加对应页面.

Clone this wiki locally