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可以单独引入。

<template>
  <article id="app">

   <!--页面整体布局-->
    <a-layout id="components-layout-demo-custom-trigger" class="container">

      <AppHeader>   <!-- 头部导航  --></AppHeader>
      <AppSlide :collapsed="collapsed"><!--侧边栏--></AppSlide>
      <AppContent>
          <!-- 中心路由切换-->
          <router-view />
      </AppContent>
    </a-layout>

  </article>
</template>
<style src="@css/animate.css"></style>
<style lang="scss">
  @import "@css/public.scss";
</style>
<script src="./app.js"></script>

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

/**
 * 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单独实例模块中的方法混合到当前试图模块的计算中。

<template>
         <ul>
              <li v-for="item in MenuList">
                   <a href="javascript:;" >{{item.text}}</a>
                   <ol v-if="item.child">
                      <li v-for="citem in item.child">
                        <a href="javascript:;">{{citem.text}}</a>
                      </li>
                   </ol>
              </li>
            </ul>
</template>
<script>
  import {mapState,mapActions} from "vuex";
  export default{
    name:"AppHeader",
    data(){
      return {
      }
    },
    mounted(){
      this.ACTIONS_GET_MenuList({load:"加载顶部菜单"});

    },
    computed:{
      ...mapState({
        MenuList:state=>state.SIndex.MenuList, //顶部菜单
      })
    },
    methods:{
      ...mapActions({
        ACTIONS_GET_MenuList:(dispatch,params)=>dispatch("ACTIONS_GET_MenuList",params)
      })
    }

  }
</script>