vue-cil之elementui、vuex(任务管理器)

elementui

美化vue-cil项目，跟bootstrap是一类东西

常见的vue ui库

1. Element-UI：Element-UI
2. elementui-plus
3. Ant Design-Vue
4. vant https://vant-contrib.gitee.io/vant/v2/#/zh-CN/sku
5. https://tdesign.tencent.com/vue/components/button
6. https://nutui.jd.com/cat/index.html#/tab

elmentui使用

1. 安装：cnpm install element-ui -S

2. 配置：在main.js中配置

   import ElementUI from 'element-ui';
   import 'element-ui/lib/theme-chalk/index.css';
   Vue.use(ElementUI);
   1
   2
   3

3. 使用：去官网找好看的样子，复制

vuex(任务管理器)的使用

在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信

就是将vue中的对象集中管理

使用步骤

1. 新建store/index.js

   import Vue from 'vue'
           import Vuex from 'vuex'
           Vue.use(Vuex)
           export default new Vuex.Store({
               state: {
                   num: 10
               },
               mutations: {
                   add_mu(state, i) {
                       state.num += i
                   }
               },
               actions: {
                   add(context, i) {
                       // 逻辑判断，跟后端交互，通过后在做
                       context.commit('add_mu', i)
                   }
               },
           })
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19

2. 在组件中使用变量

   拿值：this.$store.state.num 
           修改值：三种方式
           	-直接：this.$store.state.num += 1
               -间接：this.$store.commit('add_mu',3)
               -间间接：this.$store.dispatch('add',10)
   1
   2
   3
   4
   5

3. 任意组件都都可以使用，实现了组件间通信