Vue项目代码修改

1.使用varibles变量文件抽取样式（stylus css预处理器）

新建styl文件

//主题色
$theme-color = #1989fa

//基础颜色
//白色
$white-color =  #ffffff
//灰色
$grey-color = #DFDFDF

在vue组件中引入

@import "~styles/varibles.styl";

2.分离路由文件

随着页面的增加，路由文件行数增加到几百上千行，不利于后期维护。所以将路由根据模块分离成一个个单独文件，然后在路由主文件引入。
分离后目录如下：

commonRoutes.js

/**
 * 通用页面router列表
 */
export default [
  //附件列表
  {
    path: "/fileUploadList",
    name: "FileUploadList",
    component: resolve =>
      require(["@/views/common/FileUploadList.vue"], resolve)
  }
];

路由主文件index.js

//通用页面路由文件
import commonRoutes from "./modules/commonRoutes";
const baseRoutes = [];
const routes = baseRoutes.concat(
  commonRoutes
);
export default new Router({
  base: process.env.BASE_URL,
  routes
});

3.使用vuex的辅助函数

vuex的状态管理是响应式的，所以回去state里面的数据最好是使用vue的计算属性进行存储。vuex提供mapState辅助函数生出计算属性。

import {mapState} from "vuex";
...mapState(["user"]) //获取this.$store.state.user存入名为user的计算属性。

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。