typora-copy-images-to: upload
vue create myvue
Vue项目安装
1.主要功能选择
2.版本![image-20210214005551832](https://i-blog.csdnimg.cn/blog_migrate/339b8a36e8543c29434b4808e8e7289b.png)
3.路由模式:history("/")写no hash("#")是yes ![image-20210408234501260](https://i-blog.csdnimg.cn/blog_migrate/bad0caf914aa6caad1be205b7ea212fd.png)
4.预处理器–选择less语法(css)![image-20210214005657709](https://i-blog.csdnimg.cn/blog_migrate/817a9d0766b900374e671bdba7236504.png)
5.语法检测eslint–默认
6.保存时进行语法检测
7.In dedicated config files
您喜欢将Babe 1、ESLint等的配置放在哪里?—放在专用配置文件中/放在pack.json文件中
8.是否作为以后的模板–NO
Vux如何使用
1.在./store.js中操作![image-20210408234400955](https://i-blog.csdnimg.cn/blog_migrate/c2725661ee2586c232c9afc1f632361d.png)
2.在./main.js中操作
3.创立子组件
components内建立子组件
4.在父组件导入子组件-注册-使用
5.在store.js创立全局共享数据
6.共享数据使用方式–子组件
1.第一种 子组件中通过this.$store.state.全局数据名称
在template中使用this.$store中this可以省略
2.第二种 子组件中通过 mapState
7.Mutation操作全局共享数据
1.在index.js的new Vuex中定义全局操作的方法
2.在子组件中使用方法
注意
这种方法不推荐,为错误操作方法,不方便维护
8.Mutation操作全局数据时传递参数, 自定义变化值
1.在index.js的new Vuex中定义全局操作的方法,并加入需要传递的变量
2.触发时传递参数
第一种方式
第二种方式 通过 mapMutations
注意: 在index.js中定义一致
注意 …mapMuations写在methods里面
注意: mutation里面不支持异步操作 – 如计时器
9.Action(处理异步任务–按下按钮后延时改变数据)
-----不能直接操作state数据,需要借助context.commit操作mutation里面的方法
1.1在index.js的new Vuex中定义需要异步操作的方法,commit(括号里面填的mutation里面的方法)
1.2必须在actions中commit的是mutations里面的方法
2.在子组件中定义触发的方法–this.$store.dispatch(‘addAsync’)
10.Action(处理异步任务–按下按钮后延时改变数据,改变为自定义参数)
-----不能直接操作state数据,需要借助context.commit操作mutation里面的方法,同时传入参数
1 在./index.js的new Vuex中定义需要异步操作的方法,commit(括号里面填的mutation里面的方法)
2.1第一种触发 通过 this.$store.dispatch(‘subAsync’,5)
2.2 第二种触发 通过 import{mapActions}
注意 …mapActions 也是写在methods里面
11.行内形式改写
12.Getter 数据加工,调用store里面state的数据重新包装后生成–不会修改原数据
定义方法 在./index.js 中
getters:{
showNum(state){
return '当前最新的数量是['+state.count+ ']'
}
},
使用方法 在子组件中----第一种 this.$store.getters/showNum 这里没有括号,需要注意
使用方法 在子组件中—第二种
注意 第三步 showNum没有括号
在Vue使用组件库----ant-design-vue
1. 安装npm i --save ant-design-vue
2. 在./main.js中导入包
使用 提示消息
owNum没有括号
在Vue使用组件库----ant-design-vue
1. 安装npm i --save ant-design-vue
2. 在./main.js中导入包
使用 提示消息
例子
import { queryBigListIdWithFirstStyleWithList } from '@/api/survey/systemCall/cloudComputing'
const cloudComputing = {
state: {
bigList: {},
firstEditStyle: false
},
mutations: {
SET_BigList(state, data) {
state.bigList = data
},
SET_EditStyle(state, data) {
state.firstEditStyle = data
}
},
actions: {
/* 获取列表数据 */
InitListData({ commit }, param) {
return new Promise((resolve, reject) => {
queryBigListIdWithFirstStyleWithList(param)
.then((res) => {
commit('SET_BigList', res.data)
commit('SET_EditStyle', res.data.firstEdit)
resolve(res)
})
.catch((error) => {
reject(error)
})
})
}
}
}
export default cloudComputing