1. 全局變量
1.1. Vuex，全局單一狀態(tài)樹State
import {mapState, mapActions, mapGetters} from 'vuex';
computed: {
...mapState('transaction', {state: 'transactionLayerSku'}),
...mapGetters('cabinet', ['cabinets'])
}
1.2. Vue.config服鹅，process.env
Vue.config.productionTip = process.env.NODE_ENV === 'production';
process.env屬性凳兵，返回一個包含用戶環(huán)境信息的對象，即當前用戶的系統(tǒng)env
http://nodejs.cn/api/process.html#process_process_env
1.3. Vue-router => url 參數(shù)
- template跳轉(zhuǎn)
<router-link :to="{name:'board-users',
params: {tid: queryParams.serial_id},
query:{customerID: scope.row.user_id}}">
{{scope.row.user_id}}
</router-link>
- js跳轉(zhuǎn)
this.$router.push({
path: "/start_task",
query: { taskType: "uncaptured", instructionId: task.id }
});
this.$router.go(-1);
- js獲取query參數(shù)企软，以及修改
computed: {
currentTab: {
get() {
const {$route: {query: {currentTab}}} = this;
if (_.isNil(currentTab)) {
return 'details';
}
return currentTab;
},
set(value) {
const {$route: {query}} = this;
this.$router.replace({
query: {...query, currentTab: value}
});
}
}
}
1.4. Vue 外狀態(tài) => 屏幕寬度 => 事件
獲取屏幕寬度
捕獲屏幕寬度變化
1.5. Cookie
import Cookies from 'js-cookie'
Cookies.set('username', 'currentUserName')
Cookies.remove('username')
let menu = JSON.parse(Cookies.get('my_menu'))
使用全局變量庐扫，有助于對components進行拆分，推薦使用1.3. URL參數(shù)
2. 如何復(fù)用組件邏輯
slot
場景：圖片懶加載組件
實現(xiàn)加載過程轉(zhuǎn)菊花澜倦，加載失敗顯示失敗提示slot-scope
場景： 瀑布流組件
復(fù)雜布局場景聚蝶，且子元素必須高度自定義過濾器filter
場景：日期按本地時區(qū)格式化杰妓、OSS圖片resize藻治、OSS 圖片轉(zhuǎn)CDN鏈接、貨幣千分位格式巷挥、占位符
常用過濾器庫：vue2-filters桩卵、vue-currency-filter指令
場景： 實現(xiàn)圖片放大鏡效果
修飾符 —— 讓調(diào)用語法更甜蜜-
mixins
- a. 對象淺合并 (一層屬性深度)，在和組件的數(shù)據(jù)發(fā)生沖突時以組件數(shù)據(jù)優(yōu)先
- b. 同名鉤子函數(shù)將混合為一個數(shù)組
- c. 我們還可以自定義合并策略
3. 坑
- 避免通過prop設(shè)置data倍宾，可設(shè)置computed屬性
- 不要把methods當computed用
- 不要修改prop值!!!
4. 規(guī)范
- 組件內(nèi)狀態(tài)data雏节，提供默認值
- 不要在模板中寫太多邏輯代碼，多用 computed 屬性
- prop 傳遞的鏈條不要太深 - 使用slot解耦
- 盡量為 props 提供完整配置信息
5. 文檔
官方文檔
- Vue
https://cn.vuejs.org/v2/guide/instance.html - Vuex
https://vuex.vuejs.org/zh/guide/state.html - Node.js
http://nodejs.cn/api/
組件庫
- vux高职，vue2.x移動端UI組件庫钩乍，主要服務(wù)于微信頁面
https://doc.vux.li/zh-CN/components/actionsheet.html - iview weapp，微信小程序 UI 組件庫
https://weapp.iviewui.com/ - iview怔锌，桌面端組件庫寥粹，建議不要使用Table組件变过，render不支持v-model，會很麻煩
https://www.iviewui.com/docs/guide/install - element涝涤，桌面端組件庫
http://element-cn.eleme.io/#/zh-CN/component/changelog
優(yōu)秀插件
- highcharts
https://www.highcharts.com/demo - baidu echarts
http://echarts.baidu.com/option.html - moment js
http://momentjs.cn/docs/
優(yōu)秀demo
- iview admin
https://github.com/iview/iview-admin
https://admin.iviewui.com
image.png - element admin
https://github.com/PanJiaChen/vue-element-admin
https://panjiachen.github.io/vue-element-admin/#/dashboard
image.png
