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

lzxb · 2017年03月14日 · 最后由 lzxb 回复于 2017年03月15日 · 1787 次阅读

前言

从去年 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,学习曲线很平滑

adamshen 回复

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

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册