如何用Vue构建大型单页面应用.PDF

如何⽤Vue构建⼤型单⻚⾯应⽤ 汽⻋之家⻋服务-前端团队王诗扬 关于我 王诗扬 • 2013年加⼊汽⻋之家，现任⻋服务部前端负责⼈ • 致⼒于公司内Node和vue的推⼴和布道 • 乐于分享，喜欢研究新技术 技术栈 • 服务端：Node.js (v6.3) • 前端框架：Vue (v2.1.10) • 前端构建⼯具：webpack • 代码检查：eslint • 状态管理：Vuex • 服务端通信：axios • 进程管理：pm2 • 项⽬⾃动化部署：jenkins 用户浏览器 Nginx（代理） Node （中间层） Java (API接口) 单⻚⾯开发的优点 • 良好的⽤户体验 • 前后端分离 • 减轻服务端压⼒ • 共⽤⼀套后端程序代码，适配多端 单⻚⾯开发的缺点是什么？ • ⾸屏加载过慢 • SEO 引⼊Vue SSR • 服务端预渲染 • 流式渲染 • 对组件进⾏缓存 • 前后端复⽤⼀套代码 Vue SSR流程图 ⽬录结构 |— api api 接⼝⽂件 | | |— assets 静态资源⽬录 | | |— components vue组件 | | |— filters 过滤器⽂件 | | | |— router 路由⽂件 | | | — views ⻚⾯模板⽂件 | | | | | |— utils ⼯具⽅法⽬录 | | | | | |— store vuex相关⽂件 | |— app.js vue⼊⼝⽂件 | |— client-entry.js 客户端⼊⼝⽂件 | |— server.entry.js 服务端⼊⼝⽂件 | |— index.html HTML⼊⼝⽂件 开启Vue SSR • 使⽤服务端框架 express 或 koa • 安装配置webpack 和 vue • 拆分⼊⼝⽂件，服务端和浏览器要分开渲染 server-entry ：使⽤vue ssr 功能将虚拟DOM渲染成⽹⻚ client-entry ：使⽤$mount 直接挂载 /vuejs/vue-hackernews-2.0 server-entry client-entry 组件化 组件化划分 业务组件集 筛选、面包屑 搜索 车型筛选 评价 . . . 与业务深耦合，复⽤难度⼤，难抽象 基础组件集 提示窗 回到顶部 轮播图 表单 . . . 与业务低耦合，可复⽤ 组件化开发 ├── comp