【Vue 3.0】Vue介绍和开发环境安装与配置
一、前言
1.Vue是什么？ Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的JavaScript框架。
Vue.js（通常简称为 Vue）采用了组件化的架构，允许将一个复杂的用户界面分解为多个可复用的组件，每个组件都有自己的 HTML 模板、JavaScript 逻辑和 CSS 样式。
这使得开发人员可以更加高效地组织和管理代码，提高代码的可维护性和可扩展性。无论是简单还是复杂的界面，Vue都可以胜任。
Vue是一个独立的社区驱动的项目，它是由尤雨溪在2014年作为其个人项目创建，是一个成熟的、经历了无数实战考验的框架，它是目前生产环境中使用最广泛的JavaScript框架之一，可以轻松处理大多数Web应用的场景，并且几乎不需要手动优化，并且Vue完全有能力处理大规模的应用。
2.为什么要用Vue？ (1) 经过编译器优化、完全响应式的渲染系统，几乎不需要手动优化。
(2) 丰富的、可渐进式集成的生态系统，可以根据应用规模在库和框架间切换自如。
(3) 数据驱动，轻量级，组件化，插件化。
(4) Vue使用model-view-viewmodel （MVVM）体系结构
(5) 响应式布局，声明式语言。
3.Vue2.0 和 3.0的区别：
（1）响应式实现原理不一样 Vue 2.0使用Object.defineProperty()来实现响应式，这种方式存在一些局限性，例如无法检测对象属性的添加或删除，对于数组，也只能拦截特定的变异方法（如 push、pop 等）。如果要对一个已经创建的对象添加新属性，需要使用 Vue.set() 方法才能确保新属性是响应式的。
Vue 3.0使用 Proxy 对象来实现响应式。Proxy 可以劫持整个对象，并对对象的各种操作进行拦截，因此可以检测到对象属性的添加、删除以及数组索引和长度的变化，无需使用特殊方法，响应式能力更加全面和强大。
（2）组合式 API Vue 2.0主要使用选项式 API，通过 data、methods、computed、watch 等选项来组织代码。当组件变得复杂时，相同逻辑关注点的代码会分散在不同的选项中，导致代码的可读性和可维护性下降。
Vue 3.0引入了组合式 API，允许开发者通过 setup 函数来组织逻辑，将相关的逻辑代码放在一起，提高了代码的复用性和可维护性。组合式 API 更适合处理复杂的逻辑，并且可以更好地与 TypeScript 集成。
（3）性能 Vue 2.0在初始化和更新时需要遍历对象的属性，进行 Object.defineProperty() 的转换，当对象属性较多时，初始化性能会受到一定影响。而且在更新时，需要手动触发依赖收集和更新操作，性能优化相对有限。
Vue 3.0 由于使用 Proxy 实现响应式，初始化时的性能有所提升。同时，Vue 3.0 还采用了静态提升、PatchFlag 等优化策略，在编译时对模板进行优化，减少了不必要的 DOM 操作，提高了渲染性能和更新性能。
（4）生命周期钩子 Vue 2.0：有 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed 等生命周期钩子。
Vue 3.0：基本保留了大部分生命周期钩子，但名称有所变化，例如 beforeDestroy 改为 beforeUnmount，destroyed 改为 unmounted。同时，在组合式 API 中，可以使用 onBeforeMount、onMounted 等函数来使用生命周期钩子。
（5）TypeScript 支持： Vue 2.0 对 TypeScript 的支持相对有限，需要使用额外的装饰器和插件来实现较好的类型检查。
Vue 3.0 从设计上就更好地支持 TypeScript，组合式 API 与 TypeScript 结合得更加紧密，提供了更清晰的类型定义和更好的类型推导。
（6）Fragment： Vue 2.0 中，每个组件只能有一个根元素，如果需要多个根元素，需要使用一个额外的父元素包裹。
Vue 3.0 支持 Fragment，组件可以有多个根元素，无需额外的包裹元素。
Vue 2 已于 2023 年 12 月 31 日停止维护。所以现在从Vue 3.0开始。
二、Vue学习路线：
视频学习，官方网站，点击跳转至vuemastery
官网知识点，点击进入Vue官网地址。：
三、环境安装与配置
1.首先安装VSCode IDE用来Vue的编码开发。会有插件语言校验提示等。便于我们开发Vue。
VSCode下载
2.下载Node环境，Vue框架需要从node中下载配置：
Node.js下载
3.配置Vue工程环境：
- 配置Vite,构建设置
2.创建Vue项目：
创建项目：打开终端，运行以下命令创建一个新的 Vite + Vue 项目：这里 my-vue-app 是项目名称，你可以根据需求修改。
npm init vite@latest my-vue-app -- --template vue
进入项目目录
cd my-vue-app
安装依赖：
npm install
启动开发服务器：
npm run dev
项目启动后，你就可以在浏览器中访问项目。
3.完成以上步骤就完事了，打开VSCode选择你的项目进行开发即可。也可选配一些扩展插件：
打开 VSCode，选择 “文件” -> “打开文件夹”，然后选择刚才创建的 Vue 项目文件夹。
安装 VSCode 扩展
为了提高 Vue 开发效率，可以安装一些实用的 VSCode 扩展。
Vetur：Vetur 是一个强大的 Vue 工具，提供了语法高亮、智能提示、格式化等功能。在 VSCode 的扩展商店中搜索 “Vetur”，然后点击 “安装” 按钮进行安装。
Vue 3 Snippets：如果你使用 Vue 3 进行开发，这个扩展可以提供 Vue 3 的代码片段，帮助你快速编写代码。同样在扩展商店中搜索 “Vue 3 Snippets” 并安装。
ESLint：ESLint 可以帮助你检查代码中的语法错误和潜在问题，确保代码风格的一致性。在扩展商店中搜索 “ESLint” 并安装。安装完成后，你还需要在项目中配置 ESLint。
Prettier - Code formatter：Prettier 是一个代码格式化工具，可以帮助你自动格式化代码，使代码风格统一。在扩展商店中搜索 “Prettier - Code formatter” 并安装。
如果你一直有网络，也可以使用云环境进行Vue的开发学习。
点击跳转stackblitz
