vue.js - 工程实践Tips

1. 全局变量

1.1. Vuex，全局单一状态树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属性，返回一个包含用户环境信息的对象，即当前用户的系统env
http://nodejs.cn/api/process.html#process_process_env

1.3. Vue-router => url 参数

• template跳转

  {{scope.row.user_id}}

• js跳转

this.$router.push({
  path: "/start_task",
  query: { taskType: "uncaptured", instructionId: task.id }
});
this.$router.go(-1);

• js获取query参数，以及修改

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 外状态 => 屏幕宽度 => 事件

获取屏幕宽度

捕获屏幕宽度变化

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参数

2. 如何复用组件逻辑

• slot
  场景：图片懒加载组件
  实现加载过程转菊花，加载失败显示失败提示

• slot-scope
  场景： 瀑布流组件
  复杂布局场景，且子元素必须高度自定义

• 过滤器filter
  场景：日期按本地时区格式化、OSS图片resize、OSS 图片转CDN链接、货币千分位格式、占位符
  常用过滤器库：vue2-filters、vue-currency-filter

• 指令
  场景： 实现图片放大镜效果
  修饰符 —— 让调用语法更甜蜜

• mixins

  • a. 对象浅合并 (一层属性深度)，在和组件的数据发生冲突时以组件数据优先
  • b. 同名钩子函数将混合为一个数组
  • c. 我们还可以自定义合并策略

3. 坑

• 避免通过prop设置data，可设置computed属性
• 不要把methods当computed用
• 不要修改prop值!!!

4. 规范

• 组件内状态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组件库，主要服务于微信页面
  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

优秀插件

• highcharts
  https://www.highcharts.com/demo
• baidu echarts
  http://echarts.baidu.com/option.html
• moment js
  http://momentjs.cn/docs/

优秀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