elementui
美化vue-cil项目,跟bootstrap是一类东西
常见的vue ui库
- Element-UI:Element-UI
- elementui-plus
- Ant Design-Vue
- vant https:
//vant-contrib.gitee.io/vant/v2/#/zh-CN/sku
https://tdesign.tencent.com/vue/components/button
https://nutui.jd.com/cat/index.html#/tab
elmentui使用
-
安装:
cnpm install element-ui -S
-
配置:在
main.js
中配置import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
-
使用:去官网找好看的样子,复制
vuex(任务管理器)的使用
在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信
就是将vue中的对象集中管理
使用步骤
-
新建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) } }, })
-
在组件中使用变量
拿值:this.$store.state.num 修改值:三种方式 -直接:this.$store.state.num += 1 -间接:this.$store.commit('add_mu',3) -间间接:this.$store.dispatch('add',10)
-
任意组件都都可以使用,实现了组件间通信