m0_74217128的博客

有些项目里面导入资源的时候，没有直接使用“../”，而是使用的@符号，这就是一种路径别名。设置路径别名，我们要先找到这个文件：vite.config.js。这个文件的默认布局：添加别名我们就在红线处进行添加。

实际项目中不可能就一个页面，会有很多个页面。在Vue里面，页面与页面之间的跳转和传参会使用我们的路由: vue-router。

详情可以看。

Vue3的语法相对比Vue2有不少改变，这篇讲一下基础语法在Vue3里的形式。

在编程领域生命周期指的即一个对象从创建到销毁的过程。

使用Vue渲染主要分下面两步：1.引包2.指定配置数据来创建Vue实例引包通过<script>标签进行引入，引入后就会有vue的全局变量。下面的src链接是vue2的直连地址，使用时对设备的网络有要求。你也可以将其js文件下载下来，放到你项目的lib目录中供你的页面资源访问。引入之后，我们就可以创建vue实例，用来给指定盒子进行效果渲染。渲染的过程如下：1.给我们想要渲染的盒子设置唯一标识符2.创建vue实例，其中el用来指定渲染的盒子，格式为 # + 对应盒子的唯一标识符。

简介vue指令的特征是都有着 "v-" 前缀，其本身也是，不同属性对应不同功能。

比如a超链接标签，默认事件是点击该元素后跳转到指定的网页链接中，使用该修饰符后，点击后不再直接跳转。

如果你要侦听一个对象的所有属性，那么我们的侦听器不再写成一个方法，，而是一个对象，并且可以使用配置项。watch的作用是帮我们监视数据变化，在监视的数据变化时执行一些逻辑操作或异步操作。如果你要侦听的是某个对象的子属性，那么你的方法名则为 对象.属性名，并。侦听器watch是和data同级的模块，所有的侦听器都写在这里面。immediateProp:true ： 在页面加载时就执行一次相关操作。deep:true ： 用于标明对复杂类型深度监视。

页面中可以看见的内容不再在index.html中进行编辑，而是在App.vue中进行编辑。

下载安装了Vue脚手架之后，我们就可以使用其创建统一标准的Vue项目。这里来简单介绍一下Vue脚手架的使用。脚手架创建项目后的目录结构：根据脚手架版本的不同，项目结构可能会有些不一样。（比如在比较老版本的脚手架中，index.html文件是在public目录下面的）：第三方包文件，通常是各种js脚本文件。除去脚手架默认引入的包之外，还可以引入私用的包。引包通常通过package.json文件来管理，package-lock.json来管理版本。

vue的生命周期有四个阶段，相应的Vue也准备了四对生命周期函数：创建阶段前：beforeCreate。创建阶段后：created。此时数据已经准备完毕，可以发送初始化渲染请求。挂载阶段前：beforeMount挂载阶段后：mounted。此时页面的Dom已经正式渲染完毕，可以开始操作Dom。更新阶段前：beforeUpdate更新阶段后：updated销毁阶段前：beforeDestroy。常用来释放Vue以外的资源，比如定时器、延时器。销毁阶段后：Destroyed。

在之前的文章中已经讲到过el（声明该vue对象应用的盒子）、data（定义变量）、methods（定义函数）。在网页中，我们常常会用到统计总和这一类的数据，而面对这种数据，我们往往不能够直接通过 a=b+c;的方式来定义，必须使用一个函数来进行返回。vue分出了计算属性。计算属性的声明是在computed中，其过程与函数相差不大，区别在计算属性封装了计算过程，最终仍为属性。我们可以使用插值表达式来使用它。而且。同样的，我们在其他地方调用计算函数时，也可以直接使用 this.计算属性变量名 来进行引用。

之前我们讲到过v-model用于双向绑定一个数据，通常用于表单提交数据。而之前的演示里只演示了文本输入栏，这里详细演示一下其他表单输入时使用v-model。

v-bind可以控制元素的属性，而且可以直接指定class。语法和指定其他属性一样：v-bing:class=""，同样的可以写成 :class=""根据""中填写的属性，主要分为两种使用方式，一种是对象，一种是数值。

下载安装可以参考其他博文，已经很详细。本文主要面对新手首次安装和使用IDEA等开发工具运行中可能会出现的问题，提一些个人经验上的解决方案。