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。