vue-cli 开发笔记

技术栈

vue-cli
vue-router
vuex
axios

1、vue-cli配置项修改

vue-cli 配置项在build文件夹，主文件为webpack.base.conf, 修改部分配置为开发方便，webpack.dev.conf为开发模式运行npm run dev 的时候所用配置，主要修改其devServer，自模拟请求。

• 修改入口项，将通用模块集体打包

    entry: {
    bablePolyfill: ["babel-polyfill","vue","vuex","vue-router","axios"],
    app: './src/main.js'
  }

• 修改 webpack.dev.conf

  const service =require("./service");  //引入自定义请求，内容如下
/*
module.exports = {
     before(app){
          app.get("/getList",async(req,res)=>{
            res.json({
               code:200,
               messages:"ok",
               data:[]
            })
          });
     }
}
*/

  devServer: {   //倒入到当前模块内
      ... service
}

• 安装scss解析插件"node-sass","sass-loader"，transform-decorators-legacy","transform-decorators"使用yarn或npm装载, 修改 .babelrc

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-1"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime","transform-decorators-legacy","transform-decorators"],
  "env": {
    "test": {
      "presets": ["env", "stage-1"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node","transform-decorators-legacy","transform-decorators"]
    }
  }
}

• vue单文件开发, css 单文件引入方式为在style内以 @import的方式引入，lang=“scss”，可以使用scope设置css仅用于当前模块。js可以单独引入。

• redux 的使用, 在入口页面引入名为store的 redux实例，在单页面中设置store属性，这样做是为了在所有子模块中使用，类似react-redux中的

/**
 * Created by mazhenxiao on 2018/7/24.
 */
import store from "@store";

export default {
  name: 'App',
  store,
  data(){
    return {}
  },
  components:{
      ...
  }
}

• vuex实例部分设置,采取了模块的方式处理state

  import Vue from "vue";
import Vuex from "vuex";
import SIndex from "@store/S-index.js";
Vue.use(Vuex);

const store = new Vuex.Store({
    modules:{
      "SIndex":new SIndex()
    }
})

export default store;

• SIndex 实例,设置name名称js是为了能在后面一览所有触发器，并添加注释说明，非必须。官网主张在vuex实例模块上处理数据加载，其做法效仿angular，后期版本最好采用angular现在采用的decorator方式最佳。

  /**
 * Created by mazhenxiao on 2018/7/24.
 */
import {
        MSIndex_MenuList,MSIndex_TreeData,
        ACTIONS_GET_MenuList,ACTIONS_GET_TreeData
       } from "@store/name.js";
import Service from "@service/SAppHeader";

class SIndex{

  state={
      MenuList:[],//AppHeader页面顶部菜单列表
      TreeData:[],//AppSlide 左侧M

  }

  mutations={

      [MSIndex_MenuList]:(state,data)=>{state.MenuList=data},
      [MSIndex_TreeData]:(state,data)=>{state.TreeData=data}

  }//mutations


  actions={

      [ACTIONS_GET_MenuList]:({commit},params)=>{
        Service.getList(params)
               .then(da=>{
                 commit("MSIndex_MenuList",da);
               })
      },
      [ACTIONS_GET_TreeData]:({commit},params)=>{

        Service.getTreeData(params)
               .then(da=>{
                 commit("MSIndex_TreeData",da)
               })

      }

  }//actions
} //end class
export default SIndex

• 视图模块掉用,使用vuex中的mapState,mapActions，将vuex单独实例模块中的方法混合到当前试图模块的计算中。