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)路由分包加载写法：
2)mixins混入
![]()
1531188226(1).png
3）国际化和路由拦截
4）接口封装，公共方法封装
![]()
1531188400(1).png
5）分页组件与mixins混入：
《分页子组件注册为全局组件》
作者：陈先生
时间：2018-7-10
（小生不才，献丑了......）
