Vue2.0 实践阶段性分享

近来忙于学习、开发，已有一段时间没写文章了。这段时间用 Vue2.0 开发项目，踩坑之余，也收获了很多！趁热打铁，来个阶段性分享吧！

整个后台咱们使用 Vue-router 来管理路由，用 Vuex 统一状态管理，Vue-resource 来完成ajax请求，Element-ui 来快速开发UI，webpack 编译打包，eslint 规范团队代码规范。

框架相关

框架搭建，你们能够采用官网 的 vue-cli 开始着手构建。安装过程当中，咱们能够根据项目所需，选择版本、单元测试、e2e测试，以及是否使用eslint等（已经有不少搭建入门篇了，这里就很少赘述，有兴趣的同窗能够去网上搜下）。初步搭建后，能够执行下 yarn init，项目会自动生成 yarn.lock 文件，锁定版本。（关于yarn，能够参考下这篇文章）。

框架初始化后，咱们能够在 build 文件夹中的 webpack.base.conf.js 查看到 webpack 的基本配置，以下：

在 config 文件夹下的index.js能够配置本地开发的端口，默认是8080，你能够根据须要调整：

在 .eslintrc.js 文件的 rules 里面自定义团队js的书写规范，简单示例：

其中 0 为关闭，1 为警告, 2 为报错。

路由

首先根据官网提示安装 npm install vue-router 或者 yarn add vue-router， 而后在main.js里面，根据官网提示引入。接着，写一个路由配置文件，在main.js里面引入使用，如今 main.js 里面关于路由的配置应该是这样的：

若是咱们须要把路由和全局状态管理 store (下文会讲到) 同步起来，可使用 vuex-router-sync。安装引用后，在模块里面从state里面就能够拿到路由的相关信息了，如：

有时候路由跳转须要检查是否须要受权，这时候就要定义路由的 meta 字段了。引用官网的一句话 “一个路由匹配到的全部路由记录会暴露为 $route 对象（还有在导航钩子中的 route 对象）的 $route.matched 数组。所以，咱们须要遍历 $route.matched 来检查路由记录中的 meta 字段。“

咱们能够这样在全局导航钩子中检查 meta 字段，以此来判断是否须要跳转受权：

注意：不要忘记在须要受权的路由前面加上 meta: { requiresAuth: true } 。

Vuex状态管理

首先根据官网提示安装 npm install vuex 或者 yarn add vuex，而后新建一个store文件夹，里面分别放置 modules, actions, getters, mutations, constants 和 index.js 等文件, 接着在 main.js 里面这样写：

关于store的布局，咱们能够根据项目所需，拆分红不一样的 module、action 等，以下：

关于state里面数据的变更都在mutation里面处理，接口调用在action里面处理，须要.vue 文件里面获取数据能够经过 mapGetters 或者 mapState，大体实例：

mapGetters 和 mapState 的区别在于 mapGetters，你写一个 getters function 能够在不一样模块之间共用，而 mapState 只用于当前的模块。

因为全部 state 和 getters 等都放在store中，因此咱们能够在 mutation 和
action 里面经过解构参数，拿到想要的 state 和 getter 等，如：

篇幅有限，没法面面俱到，详细用法建议你们参考官网 或者其它 vuex 详解篇。

组件和过滤器

组件和过滤器的注册可分为全局使用和部分模块使用。例如，咱们写了一个确认框组件comfirm.vue，这个组件要在模块a里面引用，咱们能够在模块a里面这样引用，并传入对应的prop:

<template>
  <div class="f-confirm">
    <f-confirm :confirmData="confirmData" :isBill="isBill"></f-confirm>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import fConfirm from './confirm';

export default {
  data() {
    return {
      isBill: true
    }
  },
  
  computed: mapGetters({
    confirmData 'getConfirmData'
  }),
  
  components: { fConfirm },
};
</script>

此外，对于共用的组件和过滤器注册，咱们能够统一在 main.js 里面，把它们加载进来，而后全局注册，作法以下：

这样注册后，咱们在须要用到它们的任何一个组件里面，均可以使用。好比我须要在模块b里面用到 header.vue 和 content.vue 这两个组件，我直接在模块a里面这样写就行：

注意： 这时候 <script> 标签里面不须要再去 import 这个组件，也不须要写在components 里面了。

混合（mixin）

写过 Sass 的同窗都知道混合宏，那么，在Vue里面，mixin又是什么呢？官网是这样描述的，“混合是一种灵活的分布式复用 Vue 组件的方式。混合对象能够包含任意组件选项。以组件使用混合对象时，全部混合对象的选项将被混入该组件自己的选项。”

举个例子，好比我在 模块a 和 模块b 里面都须要用到这样的代码，那么我能够把它写成一个mixin，以下：

在 模块a 或 模块b 里面这样引用就能够了：

要注意的是，当组件和 混合对象有同名钩子时，这些钩子将混合成一个数组，都会被调用，可是 混合 对象的钩子会比组件自身的钩子先被调用。引用官网的一个例子：

var mixin = {
      created: function () {
        console.log('混合对象的钩子被调用')
      }
    }
    new Vue({
      mixins: [mixin],
      created: function () {
        console.log('组件钩子被调用')
      }
    })
    // -> "混合对象的钩子被调用"
    // -> "组件钩子被调用"

混合 对于减小重复的代码是个很好的选择，可是要注意谨慎使用全局的mixin, 由于它会影响到每一个单首创建的 Vue 实例。

api 调用

文首已经说起，咱们采用vue-resource来完成ajax请求。vue-resource是一个很是小巧的库，压缩后大约只有12KB，服务端启用gzip压缩后只有4.5KB大小。它和Vue.js同样，除了不支持IE 9如下的浏览器，其余主流的浏览器都支持。它支持Promise API和URI Templates，也支持拦截器。拦截器是全局的，拦截器能够在请求发送前和发送请求后作一些处理。这里提供 vue-resource github 地址，没用过的同窗能够先去看下。

为了避免必每次调用都要写上诸以下面这样繁琐的代码，

this.$http.get(this.apiUrl, ...)
    .then((response) => {
        this.$set('gridData', response.data)
    })
    .catch(function(response) {
        console.log(response)
    });
    
    this.$http.post(this.apiUrl, data, ...)
    .then((response) => {
        this.$set('gridData', response.data)
    })
    .catch(function(response) {
        console.log(response)
    })

咱们能够把 ajax 相关的调用方法封装起来，简单示例：

在须要用到的模块里面，这样引用：

此外，项目所用到的接口地址也建议统一写在一份配置文件，这样比较好管理，简单能够这样写：

const path = {
  base: '/bill/manage',
  ports: {
    export: '/export/refresh/'
    bank: '/bank/filter/',
    online: '/online/filter/',
    ...
  }
};

export const getUri = (key) => {
  if (!path.ports[key]) {
    return false;
  }
  return path.base + path.ports[key];
};

在调用接口时，直接传参数调用 getUri 来获取对应的url, 如 getUri(bank)。
不过，这种方法我感受还不大满意，若是你们有更好的作法，欢迎分享！

总结

篇幅有限，没有办法细讲每一个小标题，只能把大体地跟你们分享下。这段时间，也喜欢本身作一下vue功能组件，如 vue-upload, vue-chart 等，有时间整理后，再和你们一块儿分享！固然如今网上已经有不少现成的库了，有兴趣的同窗均可以去看看。

若是你也在用vue2开发, 欢迎交流、分享！