积木成林，聚沙成塔

由于在日常开发中会有一部分前端的开发任务，会涉及到Vue的项目的搭建、迭代、构建发布等操作，所以想系统的学习一下Vue相关的知识点，本专题会依照Vue的搭建、开发基础实践、进阶用法、打包部署的顺序进行记录，同时也会提到一些功能在实际生产环境中的使用。《Vue3搭建、路由配置与基本语法》《响应式变量、双向绑定、计算属性、监听器》《优雅使用VUE3 组件特性：组件定义、组件注册、事件监听、双向绑定》《优雅使用VUE3 组件特性：属性透传、依赖注入、组件插槽、动态组件》《生命周期函数、组合式函数的使用》

本篇的主要内容是Vite中环境变量的使用以及打包部署，包含以下关键点：- 环境变量 -通过`.env`文件来划分环境，命名规则为`.env.[mode]` - `vite`指令的默认mode为`development`，`vite build`的默认mode为`production`，可以根据这个默认值来命名 - `.env`文件也可以不加mode，这样的文件在任何情况下都可以被引用，但是优先级低于有`[mode]`的文件 - 如果想让客户端直接使用，`.env`文件中的变量名应该以`VITE_

本篇主要讲了生命周期函数、组合式函数需要关注以下几点：- 生命周期函数： - 生命周期分为4个阶段：创建、挂载、更新、销毁 - 最常用的钩子函数是`created`和`mounted` - Vue3中`onMounted`处理挂载阶段的钩子函数，通过`setup`处理创建阶段- 组合式函数： - 是使用Vue的组合式API封装的函数 - 与普通函数的区别在于，组合式函数**有状态**，即这个函数中会定义**响应式变量**，参与到组件的生命周期中

本篇主要讲了VUE3中组件的其他几个特性：属性透传、依赖注入、组件插槽、动态组件。属性透传：可以避免在中间层组件中重复定义这些属性或者方法在子组件中不需要定义props和emits来接收属性和事件依赖注入：更加灵活在子组件，使用父组件提供的属性或方法，即使中间跨越了很多层级与透传的区别在于，不需要中间层级的组件一级一级的透传属性组件插槽：用于插入父组件中的自定义DOM，分为默认插槽和具名插槽具名插槽使用name="xxx"来定义标识符，父组件通过v-slot:xxx或#xxx将DOM插入指

本篇主要讲述的是组件的通用功能抽取以及在其他组件中的引入使用，需要注意以下的细节点：- 定义组件：- 编写单独的`.vue`文件- 在这个单独的文件中定义需要接收的属性、函数、事件等，类似于形参- 组件注册：- 注册方式：- 全局注册：通过顶层的`APP`对象进行引入，全局注册的组件，在组件中都可以直接使用- 局部注册：在需要使用到的组件中`import`，只有当前组件可以使用- 父组件引入组件后，在`html`标签中传入实际的属性、函数、事件等，类似于实参- 属性传递- 子组件通过

本篇主要是讲了VUE开发中经常会使用到的响应式变量、双向绑定的使用方式，并举例说明了计算属性和监听器之间的使用差别及各自的作用，有了本篇的基础，已经可以使用VUE做一些简单的开发了。需要注意这么几个细节：- 响应式与双向绑定的联系与区别，`v-model`的作用- 计算属性的使用限制，生成的快照属性不能别其他功能修改- 监听器`watch`与`watchEffect`的区别，`watchEffect`与`computed`的区别- 监听器监听数据源为对象时需要注意两个问题：**深层监听**、`n

由于在日常开发中会有一部分前端的开发任务，会涉及到Vue的项目的搭建、迭代、构建发布等操作，所以想系统的学习一下Vue相关的知识点，同时也开一个专题记录一下学习笔记以及日常开发中遇到的问题的处理方式。Vue3搭建、路由配置与基本语法响应式变量、生命周期、属性计算、侦听器工具与组件的封装，父子组件的使用环境变量、axios配置与打包部署Vue项目搭建，与Vite的配置应用创建与路由配置基本语法的使用（模板、条件、循环、事件）