1)技术栈:vue-cli webpack vue vue-router vuex fetch element-ui less sass

2)vue 文档简单看两边；

1: vue 双向绑定原理
2：生命周期
3：data 存储数据 creaated 组建渲染前；做一些初始化数据设置
4：methods 异步处理接口 事件操作等
5：mounted 组建渲染后多一些dom操作等
6：destroyed 做一些清除定时器操作等
7：父子组建通讯：
首 先: 写一个组件(也就是vue文件）
第二部: 在父组件中import导入；
第三部：把组建注册为局部组建 =》 components: { page },
第四部: 在父组件引入 <page :total="total" @callback="callback"></page>
total是data中传递给子组件的数据 @callback ='父组件中methods回掉函数'
第五部：在子组件中通过props接收父组件传递过来的数据或事件 props: ['total','callback']
callback在子组件中通过this.$emit('callback',data)触发；callback父组件传递过来的回掉函数；data是子组件传递给父组件的参数。
（要问兄弟组建通讯就说基本上不用 可以类似上边这种方式传递 通过父组件做中间桥梁间接出传递; 通常我们用vuex做状态管理，下边会详细说到，哈哈）

8：路由跳转方式有哪些
1：this.$router.push({
path: '/login', (路由名字）
query: { name: item }
})

2：<router-link :to="{ path: '/safety'，query: {} }" tag="span">{{$t('safety')}}</router-link>

     注释：path:'跳转地址'；
           query: { name: item } 传递的参数 通过this.$route.query.name获得

9： v-if v-show 区别
10：watch监听data数据变化进行相应操作
11：mixins混入就是提取一个组件中功能相似的（生命周期等。。。）

3）vue-router 处理：

    import Vue from 'vue'
    import Router from 'vue-router'
    import Login from '@/components/login.vue'(传统)
    const Login = r => require.ensure([], () => r(require('@components/login')), Login (现在优化写法；不问时，问你做过神马优化时候说吼吼)
    export default new Router({
         routes: [
          {
                   path: '/login',
                   redirect: Login 
               component: Login 
          },
        ]
    })   (注释：到处我们配置的路由在main.js引入)

4）vuex（状态管理工具（跟redux性质一样， 查下优势好处为什么用）

1：vuex里有几个属性 
    第一：stata 存储
    第二：mutation:同步处理数据
    第三：action: 异步处理
    第四：getter: 获取stata数据
译：所有数据都通过同步（mutation）进而该变state变化。也就是就是说action 我们可以风封装一些异步请求，通过dispatch触发action然后通过commit触发mutation;
    mutation进而改变state变化。
2）一些高级组件可以简化我们vue与vuex间的耦合（一跟红绳链接起来，快速沟通哈哈）;
  有mapState 写在计算属性中 也就是取我们state中的数据
   import { mapActions, mapState } from 'vuex';
    computed: {
         ...mapState({
          otcList: (state) => state.OtcMain.otc_lists,
          busineChange: (state) => state.OtcMain.busineChange
        })
       },
      mapActions, 异步也就是我们action里封装的接口
   ...mapActions({
          getList: type.OTC_LISTS
       }),然后通过this.getList({传递的参数})调用我们的接口

5）fetch 接口封装 底层用的promise 成功失败后执行的函数 自己简单查下

6）less sass是css预处理器；简化开发 能嵌套，函数，变量等.....

================================================================================================================================

一） 优化难点啥的 如何处理分页： 手下吧分页插件注册为全局组件 一个vue 文件 ，

----------------------------------------------------
搭配一个js文件做vue组件的install 然后main.js引入js,然后通过 Vue.use(page)注册为全局组件
  import componentName from './elPagination.vue'
  export default {
   install: (Vue) => {
     Vue.component('page', componentName)
   }
  }
其次：这里用到父子组件通讯 回掉函数 ；因为回掉函数是功能一样的函数；所以我们通过mixins高级函数来统一处理

export const pageInit = {
       /*
        * @分页混淆mixins 分页初始化配置 和 回掉函数
        */
     data() {
       return {
         pageNum: '1',
         total: ''
      }
   },
  created () {
     this.pageInit();
  },
  methods: {
    callback(pageNum) {
       this.pageNum = pageNum;
       this.pageInit();
   }
 }

}

在一个就是上文提到的分包加载；

---

在一个就是因为需要第三方ui框架 vue.js;vue-router导致vendors文件过大影响响应速度 同过cdn加载文件包
配置webpack不打包相应文件
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'element-ui': 'element-ui'
},

---

webpack里减少文件查找路径

alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'@components': resolve('src/components')
}

---

打包压缩js;css;精灵图等。。。。。。。。。。。。。。。。

附录图片说明

1)路由分包加载写法：

1531187988.png

2)mixins混入 1531188226(1).png

3）国际化和路由拦截

1531188291(1).png

4）接口封装，公共方法封装 1531188400(1).png

5）分页组件与mixins混入：

《分页子组件注册为全局组件》

1531188559(1).png 1531188587(1).png

作者：陈先生

时间：2018-7-10

                                       （小生不才，献丑了......）