Vue 大型 SPA 项目的最佳实践

前言

从去年 10 月份之后 Vue 2.0 发布了正式版，便将 React 全线转到了 Vue 上开发，陆陆续续开发了四五个项目，多多少少积累了一些心得，现在拿出来和大家分享一下和探讨一下。本人英语水平太 low ，如有错误，还望指正。

现代前端的标配

这两年前端发展迅速，日新月异，各种框架层出不穷，这是一个坏时代，也是一个最好的时代，有幸的是能够身处在这个时代去亲眼见证它、实践它。

• 前端框架： Vue 、 React 、 Angular
• 打包工具： Webpack 、 Gulp 、 Rollup
• 语法效验： Eslint
• css 预处理器： Less 、 Sass 、 PostCSS
• 语法编译器： Babel 、 TypeScript ...... 一个 web 技术新时代的来临，如滚滚洪流般推动着历史的发展。

多项目统一的打包配置

Vue 官方虽然提供了 vue-cli 的脚手架，供我们得以快速开发，但是如果有多个项目，每个项目都生成一套打包配置，很容易造成各个项目都进行一些定制，进而造成项目之间的一些偏离，然而这些都不是我们想要的，所以有必要单独提取出来一套内部的打包配置，创建一个单独的 git 包，然后让其他项目依赖这个 git 包即可。

Vuex 应该如何使用？

很抱歉，在我的项目中， Vuex 仅仅是用来存储用户信息等一些全局通用的数据，我不建议将每一个页面的数据存储到 Store 中，那样会导致程序极其的复杂，让我每新增一个页面，都感觉到倍增压力。

统一 Mixin 处理页面数据请求

在 SPA 应用中，最离不开的就是如何方便快捷的获取页面的数据，统一处理路由的变化去更新数据，为页面进行数据缓存，实现列表、详情、编辑、新增共用一个 model ，而且有的时候列表的字段不如详情的字段多，所以还要增加一个字段补全的机制。

 // 一个简单的例子 export default function MixinPagesGet () { const opt = { list: [] // 各种配置的参数等等 } Object.assign(opt, arguments[0]) return { list: { // 列表的 mixin 各种逻辑 }, detail: { // 详情、修改、新增的 mixin 各种逻辑 } } } 

统一的处理 Methods 的错误

为了避免回调地狱， Promise 简直就是一个神器，一旦遇上，便恨初见晚，不管是 Fetch 还是第三方的请求模块，都普遍支持了 Promise ，我们可以使用 vue-methods-promise 模块对各种错误进行统一处理

更好的 Vue 组件开发规范

在 JS 中， object 对象的 key 值是没有顺序之分的，但是人的阅读顺序是有顺序的，按照钩子的执行顺序来书写可以让别人更好的读懂你的代码，如果不是钩子则放到最后。如：

export default { mixins: [], data () { return {} }, mounted () { }, destroyed () { }, watch: { }, methods: { } } 

如何打一个标准包

在日常开发中，我们有开发环境、测试环境、正式环境等等，我们需要打出一个标准包，让运维进行配置不同环境的。 我们可以在入口的 html 文件中设置

 <% if (process.env.NODE_ENV == 'production') { %> <script src="<%=webpack.publicPath %>configs.js?v=<%=new Date().getTime()%>"></script> <% } %> 

在 config 的 JS 中设置

 let cOnfigs= {} if (process.env.NODE_ENV === 'production') { cOnfigs= window.__configs // 在 config.js 中设置的 } export default configs