1、npm install
安装npm包
问题：
1、npm install报错npm ERR Could not resolve dependency: npm ERR peer...
报错原因
在新版本的npm中，默认情况下，npm install遇到冲突的peerDependencies时将失败。
解决办法
使用--force或--legacy-peer-deps可解决这种情况。
--force 会无视冲突，并强制获取远端npm库资源，当有资源冲突时覆盖掉原先的版本。
--legacy-peer-deps：安装时忽略所有peerDependencies，忽视依赖冲突，采用npm版本4到版本6的样式去安装依赖，已有的依赖不会覆盖。
建议用--legacy-peer-deps 比较保险一点
在终端重新安装即可解决
npm install --legacy-peer-deps
2、package.json文件
"scripts": { "dev": "vue-cli-service serve --open", "build": "vue-cli-service build", "lint": "vue-cli-service lint" },
dev：鼠标放在上面点击运行脚本，就会启动项目
build：鼠标放在上面点击运行脚本，就会打包
lint：代码检测
"dependencies":
这里面就是依赖的第三方库
3、第三方类库的存放位置
在项目中引入的第三方类库都放在这个文件夹下面：
4、iView组件库这个要看一下
(1)Vue应用IView中，table中使用Poptip被遮挡显示不全
添加transfer参数
参考：https://blog.csdn.net/qq_40743463/article/details/104894357
5、差值表达式
{{}} 可以在视图中显示data中的数据
（1）其用的数据必须在data中存在
（2）不能使用js语句if for啥的
（3）不能在属性中使用
6、vue指令
vue指令其实就是html标签的特殊属性，一共有14个v-开头的指令
v-这些指令是干啥的，怎么用，用的时候注意什么
-
v-bind
用于访问data中的数据，在标签的属性中使用
v-bind:src 可以简写为 :src
-
v-model
（1）用于表单元素上，<input> <textarea> < select >，创建数据的双向绑定。
（2）会忽略掉表单元素原本的value
（3）v-model双向绑定实现的原理
用到的技术是数据劫持，ES5中的一个语法：Object.defineProperty，所以vue不支持IE8以下的版本。
给对象的某个属性添加修饰：
let temp = 属性
Object.defineProperty(对象,属性名,{修饰对象
//里面重写set和get方法
get() {
return temp
},
set(value) {
temp = value
input.value = value
}
})
-
v-on
作用：用来给元素注册点击事件
语法：v-on:事件名="事件函数"
v-on:click="clickEvent"可以简写为@click="clickEvent"
注意点：
（1）传参数
//事件函数加上()即可，里面传入参数
<button type="button" @click="parameClick(name)">传参数</button>
<script>
export default {
data() {
return {
name: '你好'
}
},
methods: {
parameClick(name) {
console.log(name)
}
}
}
</script>
（2）事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
.stop
.prevent
.capture
.self
.once
.passive
其中.stop 和 .prevent是最常用的
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面（即阻止默认事件） -->
<form v-on:submit.prevent="onSubmit"></form>
（3）按键修饰符
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<input @keyup.enter="aClick()" />
-
v-show VS v-if
（1）v-show控制元素显示和隐藏，v-show=”bool“，他是通过样式display属性来控制的显示和隐藏
（2）v-if也是控制元素显示和隐藏，但是v-if是销毁和创建，用于一次性的显示隐藏
-
v-for
我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
<ul id="example-1">
<li v-for="item in items" :key="item.message">
{{ item.message }}
</li>
</ul>
注意点
（1）:key是必须的，提高渲染效率
（2）也可以用 v-for 来遍历一个对象的 property。
（3）也可以在 <template> 上使用 v-for
（4）也可以在组件上使用 v-for
7、计算属性
首先来看例子：
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage() {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
（1）计算属性要写到computed中
（2）计算属性写法上是一个函数，但实质上是一个属性，其对应的是函数的返回值
（3）计算属性只会计算一次，结果会缓存起来，高效
（4）计算属性只有依赖的数据发生了变化，才会重新计算
（5）什么时候使用计算属性？需要在插值表达式或者指令中使用复杂的逻辑，都应该使用计算属性
（6）计算属性的setter
计算属性默认只有getter
computed: {
total() {
return this.num1 + this.num2
}
}
但是当v-model双向绑定的是一个计算属性的话，就需要书写计算属性的完整形态，否则会报错，代码如下：
computed: {
total: {
get() {
return
},
set() {
}
}
}
8、监听属性
（1）监听属性写在watch中
（2）作用，监听data中数据的改变
（3）语法简单类型 ：watch:{ msg(newValue, oldValue) {} }
复杂类型：
//这是一个对象
list: {
handler(value) {
localStorage.setItem('todos', JSON.stringify(value))
},
deep: true, //深层次监听
immediate:true //是否立刻监听
}
9、VUE的生命周期
-
初始化阶段
（1）new Vue（）初始化Vue实例
（2）初始化内部的一些事件、生命周期
（3）初始化vue内部的数据，把data中的数据都劫持给vm，这一步开始vm上就有数据
（4）判断是否有el 1.指定el参数 2.vm.$mount[#'app']
（5）确定是否有模板 1.如果有templete，直接templete作为模板 2.如果没有templete，那么el本身就是模板
（6）结合数据和模板，动态渲染结构，然后把原来的el替换掉
-
数据更新阶段
（1）等待数据发生改变
（2）视图自动更新数据发生改变的那部分
-
销毁阶段
（1）等待调用vm.$destrory()方法
（2）卸载vue内部的事件和监听、vue的数据再次发生改变页面不再更新
钩子函数：
vue生命周期4组8个常用 创建前后，挂载前后，更新前后，销毁前后
beforeCreate() {
console.log('beforeCreate', '创建前');
},
created() {
console.log('created', '创建完成');
},
beforeMount() {
console.log('beforeMount', '挂载前');
},
mounted() {
console.log('mounted', '挂载完成');
},
beforeUpdate() {
console.log('beforeUpdate', '更新前');
},
updated() {
console.log('updated', '更新完成');
},
beforeDestroy() {
console.log('beforeDestroy', '销毁前');
clearInterval(this.interID)
},
destroyed() {
console.log('Destroy', '销毁完成');
}
常用的钩子函数
- created 创建完成 可以获取this ajax加载 开启定时器
- mounted 挂载完成（内容以及渲染完毕） 可以获取dom节点
- beforeDestroy 销毁前 清除定时器 移除监听事件
vue父子组件生命周期执行顺序
- 加载渲染过程：父beforeCreate —> 父created —> 父beforeMount —> 子beforeCreate —> 子created —> 子beforeMount —> 子mounted —> 父mounted
- 子组件更新过程：父beforeUpdate —> 子beforeUpdate —> 子updated —> 父updated
- 父组件更新过程：父beforeUpdate —> 父updated
- 销毁过程：父beforeDestroy —> 子beforeDestroy —> 子destroyed —> 父destroyed
10、过滤器
vue提供了过滤器的语法，常用于格式化我们的文本，vue3中已经移除，可以用计算属性代替
11、组件
（1）组件化和模块化的区别
- 组件化：是从UI界面的角度进行划分，方便UI组件的重用
- 模块化：是从代码逻辑的角度进行划分，带有业务，功能模块的单一化
12、refs
作用：
（1）获取元素
<div>
<input type="text" value="123" ref="input">
</div>
export default {
data(){
return{
}
},
mounted() {
console.log(this.$refs.input)
}
}
（2）获取子组件中的data或者method
// 父组件
<template>
<div id="app">
<Son ref="myref"></Son>
</div>
</template>
<script>
import Son from "./components/son";
export default {
mounted() {
console.log(this.$refs.myref.name); //输出子组件data中的name的值：myhua
this.$refs.myref.logName();//子组件中的方法
},
components: {
Son
}
};
</script>
13、js文件路径简介
- '/'开头： 代表根目录
- './'开头：代表当前目录
- '../'开头：代表上一级目录
- '@/'开头：此特殊情况，@为自定义的，一般为模块目录开始
14、路由
15、nrm
nrm是一个npm源管理工具，使用它可以快速切换npm源。
- 1、安装
npm install -g nrm - 2、查看源列表（前面带*的为当前源）
nrm ls - 3、添加新的npm源
nrm add 别名 源地址 - 4、切换源
nrm use 源名称 - 5、删除源
nrm del 源名称
16、svg图片的导入使用（vite+ts）
主要观看这个视频
https://www.bilibili.com/video/BV17V4y1s7Hc/?spm_id_from=333.999.0.0
- npm引入svg库
- 配置vite.config.ts文件
- 写svg组件
- main.ts全局引用组件
- 在需要的地方直接使用
