分享 Vue 大型 SPA 项目的最佳实践

lzxb · March 14, 2017 · Last by lzxb replied at March 15, 2017 · 2291 hits

前言

从去年 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 包即可。

2

Vuex 应该如何使用?

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

统一 Mixin 处理页面数据请求

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

// 一个简单的例子
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

呃,之前用 vue 写了个 blog,前端 git pages,后端挂 heroku

感觉 vue 对于非专业前端十分友善,看一遍文章就可以直接 startup,学习曲线很平滑

Reply to adamshen

vue 是渐进式框架,可以根据你的需要来选择不同的配置进行开发

You need to Sign in before reply, if you don't have an account, please Sign up first.