1)技術(shù)棧:vue-cli webpack vue vue-router vuex fetch element-ui less sass
2)vue 文檔簡(jiǎn)單看兩邊；
1: vue 雙向綁定原理
2：生命周期
3：data 存儲(chǔ)數(shù)據(jù) creaated 組建渲染前；做一些初始化數(shù)據(jù)設(shè)置
4：methods 異步處理接口 事件操作等
5：mounted 組建渲染后多一些dom操作等
6：destroyed 做一些清除定時(shí)器操作等
7：父子組建通訊：
首 先: 寫一個(gè)組件(也就是vue文件）
第二部: 在父組件中import導(dǎo)入；
第三部：把組建注冊(cè)為局部組建 =》 components: { page },
第四部: 在父組件引入 <page :total="total" @callback="callback"></page>
total是data中傳遞給子組件的數(shù)據(jù) @callback ='父組件中methods回掉函數(shù)'
第五部：在子組件中通過props接收父組件傳遞過來的數(shù)據(jù)或事件 props: ['total','callback']
callback在子組件中通過this.$emit('callback',data)觸發(fā)；callback父組件傳遞過來的回掉函數(shù)；data是子組件傳遞給父組件的參數(shù)。
（要問兄弟組建通訊就說基本上不用 可以類似上邊這種方式傳遞 通過父組件做中間橋梁間接出傳遞; 通常我們用vuex做狀態(tài)管理，下邊會(huì)詳細(xì)說到，哈哈）
8：路由跳轉(zhuǎn)方式有哪些
1：this.$router.push({
path: '/login', (路由名字）
query: { name: item }
})
2：<router-link :to="{ path: '/safety'，query: {} }" tag="span">{{$t('safety')}}</router-link>
注釋：path:'跳轉(zhuǎn)地址'；
query: { name: item } 傳遞的參數(shù) 通過this.$route.query.name獲得
9： v-if v-show 區(qū)別
10：watch監(jiān)聽data數(shù)據(jù)變化進(jìn)行相應(yīng)操作
11：mixins混入就是提取一個(gè)組件中功能相似的（生命周期等。。。）
3）vue-router 處理：
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/login.vue'(傳統(tǒng))
const Login = r => require.ensure([], () => r(require('@components/login')), Login (現(xiàn)在優(yōu)化寫法；不問時(shí)，問你做過神馬優(yōu)化時(shí)候說吼吼)
export default new Router({
routes: [
{
path: '/login',
redirect: Login
component: Login
},
]
}) (注釋：到處我們配置的路由在main.js引入)
4）vuex（狀態(tài)管理工具（跟redux性質(zhì)一樣， 查下優(yōu)勢(shì)好處為什么用）
1：vuex里有幾個(gè)屬性
第一：stata 存儲(chǔ)
第二：mutation:同步處理數(shù)據(jù)
第三：action: 異步處理
第四：getter: 獲取stata數(shù)據(jù)
譯：所有數(shù)據(jù)都通過同步（mutation）進(jìn)而該變state變化。也就是就是說action 我們可以風(fēng)封裝一些異步請(qǐng)求，通過dispatch觸發(fā)action然后通過commit觸發(fā)mutation;
mutation進(jìn)而改變state變化。
2）一些高級(jí)組件可以簡(jiǎn)化我們vue與vuex間的耦合（一跟紅繩鏈接起來，快速溝通哈哈）;
有mapState 寫在計(jì)算屬性中 也就是取我們state中的數(shù)據(jù)
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({傳遞的參數(shù)})調(diào)用我們的接口
5）fetch 接口封裝 底層用的promise 成功失敗后執(zhí)行的函數(shù) 自己簡(jiǎn)單查下
6）less sass是css預(yù)處理器；簡(jiǎn)化開發(fā) 能嵌套，函數(shù)，變量等.....
================================================================================================================================
一） 優(yōu)化難點(diǎn)啥的 如何處理分頁： 手下吧分頁插件注冊(cè)為全局組件 一個(gè)vue 文件 ，
----------------------------------------------------
搭配一個(gè)js文件做vue組件的install 然后main.js引入js,然后通過 Vue.use(page)注冊(cè)為全局組件
import componentName from './elPagination.vue'
export default {
install: (Vue) => {
Vue.component('page', componentName)
}
}
其次：這里用到父子組件通訊 回掉函數(shù) ；因?yàn)榛氐艉瘮?shù)是功能一樣的函數(shù)；所以我們通過mixins高級(jí)函數(shù)來統(tǒng)一處理
export const pageInit = {
/*
* @分頁混淆mixins 分頁初始化配置 和 回掉函數(shù)
*/
data() {
return {
pageNum: '1',
total: ''
}
},
created () {
this.pageInit();
},
methods: {
callback(pageNum) {
this.pageNum = pageNum;
this.pageInit();
}
}
}
在一個(gè)就是上文提到的分包加載；
在一個(gè)就是因?yàn)樾枰谌絬i框架 vue.js;vue-router導(dǎo)致vendors文件過大影響響應(yīng)速度 同過cdn加載文件包
配置webpack不打包相應(yīng)文件
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）國(guó)際化和路由攔截
4）接口封裝，公共方法封裝
![]()
1531188400(1).png
5）分頁組件與mixins混入：
《分頁子組件注冊(cè)為全局組件》
作者：陳先生
時(shí)間：2018-7-10
（小生不才，獻(xiàn)丑了......）
