yarn install
yarn serve
yarn build
yarn lint
1.1.Vue中的router-link、router-view作用：参考文件：src/App.vue
1.2.获取URL的参数，两种方式：1./user/123，2./user?type=123；
详见：src/App.vue
参考：https://www.jianshu.com/p/b052fb3c23f1
2.this.$router和this.$route的区别；
this.$route是路由参数对象，所有路由中的参数，name，path，params，query都属于它。
this.$router 是一个路由（导航对象），用它方便的使用js 代码，实现路由的前进，后退，跳转到新的url地址。
this.$router常用方法：
push：跳转新页面，保存上一页记录；例：push('')、push({path:'', query:{a:1}})、push({name:'', params:{a:1}});
replace：跳转新页面，替换上一页；例：同上；
go：跳转到指定页面；例：go(-1)、go(1)、go(3)；
back：返回；back();
forward：前进；forward();
参考：https://blog.csdn.net/qq_26030541/article/details/105139797
https://router.vuejs.org/zh/guide/essentials/navigation.html
https://router.vuejs.org/zh/api/#router-push
通过router-link跳转，和this.$router跳转逻辑相似，尤其需要记忆"命名的路由"；
3.router 属性 name的作用：
(1).使用$router.name获取组件name值；
(2).通过router-link、this.$router跳转，使用的是"命名的路由"方式，使用name字段；
参考：https://www.jianshu.com/p/f86fea2cd109
（该文章说的第一种方式不符；官方的标准描述：<router-view>设置了name名称，则会渲染对应的路由配置中 components 下的相应组件。
参考：https://router.vuejs.org/zh/api/#router-view-props）
4.vue 组件属性
4.1：name属性命名规范：
有两种方式：(1)分隔符：'my-component-name'；(2)驼峰命名：'MyComponentName';
4.2：name属性作用：
(1).配置<keep-alive>标签的exclude或者include属性做组件筛选
(2).DOM做递归组件
(3).用vue-tools调试
https://cn.vuejs.org/v2/api/#name
https://blog.csdn.net/kangkang_style/article/details/88689821
4.3：keep-alive不能缓存多层级路由菜单问题
5.mode: 'history'；// 值为history或hash路由方式是否加#号；
6.var vm=new Vue({});
官网原话：虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。
7.keep-alive作用；
参考：src/App.vue:36
8.生命周期；
参考：src/views/Demo04.vue
9.事件调用传参；event使用；
参考：src/views/Demo04.vue
10.常用命令；
参考：src/views/Demo04.vue
绑定事件：v-on:click 简写为 @click @click.stop @click.prevent @click.stop.prevent
@keyup.enter @keyup.13 v-on:click.once 参考：https://cn.vuejs.org/v2/api/#v-on
绑定属性：v-bind:src 简写为 :src
v-if v-else-if v-else
v-model 数据的双向绑定：表单元素的值，如input，textarea，select；
11.class样式用法；
参考：src/views/Demo04.vue:20
class类添加data-v；
12.导航守卫：导航守卫主要用来通过跳转或取消的方式守卫导航；
全局前置守卫、全局后置钩子、路由独享的守卫、组件内的守卫；
参考：src/router/index.js:12；src/views/Demo01.vue:19；
参考文档：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
13.插槽；
v-slot:header 可以被重写为 #header
参考：Demo05.vue
8.引入第三方工具，如vant；
高阶组件使用：https://www.jianshu.com/p/8b650a0f274a；
插件；
vuex;
axios
https://autumnfish.cn/comment/music?id=186016&limit=1
https://autumnfish.cn/api/joke/list?num=10
axios.post("https://autumnfish.cn/api/user/reg",{username:"太子殿下"})
mock
vuex
传统方式： 父子：v-bind属性绑定； 子父：v-on属性绑定； 兄弟：EventBus： $on 接收数据的组件 $emit 发送数据的组件
Vuex： 共享数据存在vuex；私有数据存在组件内即可；
vue ui vue可视化界面
vscode使用
Vuex的核心概念：
一、State 组件访问State中数据的方式： 方式1.this.$store.state.count; 方式2.使用mapState; ...js computed(){ ...mapState(['count']); } ...
二、Mutation 用于变更Store中的数据 1.更改Store中的状态的唯一方法； 2.必须是同步的； 3.触发Mutation函数写法： 方式1： ...js // 定义 mutations: { add(state){ state.count ++; } // 传参 add2(state, step){ state.count += step; } }
// 业务触发 （commit就是调用mutations里面的函数）
this.$store.commit('add');
this.$store.commit('add', 10); // 传参
...
方式2.使用mapMutations： ...js // 定义 mutations: { add(state){ state.count ++; } // 传参 add2(state, step){ state.count += step; } }
// 业务触发
methods: {
...mapMutations('add', 'add2');
}
this.add();
this.add2(10); // 传参
...
三、Action 用于处理异步任务； 触发Mutation函数写法： 方式1. ...js // 定义： actions: { addAsync(context){ setTimeout(() => { // 必须通过 context.commit 触发某个 mutation 才行； context.commit('add'); }, 1000); } // 传参 addAsync2(context, step){ setTimeout(() => { // 必须通过 context.commit 触发某个 mutation 才行； context.commit('add', step); }, 1000); } }
// 业务触发 （这里的dispatch函数专门用来触发 action）
this.$store.dispatch('addAsync');
this.$store.dispatch('addAsync', 10); // 传参
...
方式2.使用mapActions： ...js // 定义： actions: { addAsync(context){ setTimeout(() => { // 必须通过 context.commit 触发某个 mutation 才行； context.commit('add'); }, 1000); } // 传参 addAsync2(context, step){ setTimeout(() => { // 必须通过 context.commit 触发某个 mutation 才行； context.commit('add', step); }, 1000); } }
// 业务触发
methods: {
...mapActions('add', 'add2');
}
this.add();
this.add2(10); // 传参
...
四、Getter 对store的数据起到计算属性作用，不会改变store； 定义： ...js // 定义： getter: { doubleCount(state){ return state.count * 2 } } ... 触发Getter写法： 方式1.this.$store.getter.名称 方式2. ...js computed: { ...mapGetters('doubleCount'); } ...
五、Mudules：分模块管理 ...js modules: { a: moduleA b: moduleB } ...
组件使用是否必须驼峰；
vue中： this.$data 获取当前状态下的data this.$options.data() 获取该组件初始状态下的data
重置data： Object.assign(this.$data, this.$options.data())
在vue路由器中获取所有路由 $router.options.routes
1.控制台报错：Maximum call stack size exceeded
调用栈溢出了，需要检查代码有没有出现死循环调用，或者大量的递归调用。
2.Eslint报错：TypeError: this.CliEngine is not a constructor
解决方案：https://blog.csdn.net/qq_34817440/article/details/104278778
3.路由重复导致报错：NavigationDuplicated: Avoided redundant navigation to current location: "/"
解决方案：src/router/index.js:9
4.Vue:Avoid mutating a prop directly since the value will be overwritten ...警告解决方法
原因就是props值不能被改变
5.WangEditor在vue中使用，初始化代码需要放在mounted;
6.vue 中 Type of the default value for ‘data’ prop must be a function的解决方案
props: { testObj: {type: Object, default: function(){return {}}} }
7.this.$refs打印为undefined解决方法
1.如果在mounted里获取，此时dom还未完全加载，所以拿不到
2.update() {}完成了数据更新到dom的阶段，此时使用this.$refs可以获取到
3.methods: {}可以使用this.$nextTick(_ => {})，等页面渲染好再调用
8.do not user built-in or reserved HTML elements as component id ...
组件名不能与保留的html标签名重复，参考：https://blog.csdn.net/YZJ_Peter/article/details/125416681
1.el-cascader 级联选择器，如何隐藏单选框，点击文本直接选中：
参考：https://blog.csdn.net/cc25485697/article/details/107164094