目录
简介
什么是 Vue？
Vue.js 是一个流行的前端 JavaScript 框架，用于构建用户界面和单页面应用程序（SPA）。Vue.js 的第三个主要版本是 Vue 3。Vue 3 在性能、开发体验和扩展性等方面进行了许多改进和优化。
以下是 Vue 3 的一些主要特点：
- Composition API: Vue 3 引入了 Composition API，这是一种新的组织组件逻辑的方式，使得代码更易于阅读、维护和重用。Composition API 允许将相关逻辑组织在一起，而不是按照选项（data、methods、computed 等）的方式分散在组件中。
- 更快的渲染性能: Vue 3 通过对响应系统的重写和优化，以及对虚拟 DOM 的改进，提供了更快的渲染性能。这包括了更快的初始化、更新和销毁过程。
- 更小的包大小: Vue 3 通过精简和优化代码，以及利用 Tree-shaking 等技术，使得最终构建的包更小，这有助于减少加载时间和网络传输量。
- Typescript 支持: Vue 3 具有更好的 TypeScript 支持，包括更完整的类型定义和更好的类型推断，这使得在 TypeScript 项目中使用 Vue 更加方便。
- 更好的 TypeScript 集成: Vue 3 提供了更好的 TypeScript 集成和支持，使得在使用 TypeScript 进行开发时更加顺畅。
- 更好的错误处理: Vue 3 改进了错误处理机制，提供了更清晰的错误信息和堆栈跟踪，有助于更快地定位和解决问题。
总的来说，Vue 3 保留了 Vue.js 的简洁性和易用性，并通过引入新特性和优化现有功能来提高开发效率和应用性能。
创建Vue3工程
前提条件
- 熟悉命令行
- 已安装 18.0 或更高版本的 Node.js
不会安装node.js的小伙伴，可以参考这个视频
Node.js安装及环境变量配置_哔哩哔哩_bilibili
基于 vue-cli 创建（不推荐）
点击查看官方文档
备注：目前vue-cli已处于维护模式，官方推荐基于 Vite 创建项目。
## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version## 安装或者升级你的@vue/cli
npm install -g @vue/cli## 执行创建命令
vue create vue_test## 随后选择3.x
## Choose a version of Vue.js that you want to start the project with (Use arrow keys)
## > 3.x
## 2.x## 启动
cd vue_test
npm run serve
基于 vite 创建（推荐）
vite 是新一代前端构建工具，官网地址：https://vitejs.cn，
vite的优势如下：
轻量快速的热重载（HMR）: Vite 提供了快速的热模块重载，使开发者能够即时看到代码更改后的效果，提高了开发效率。
对 TypeScript、JSX、CSS 等支持开箱即用: Vite 对于一些常用的前端开发技术栈（如 TypeScript、JSX、CSS）提供了开箱即用的支持，无需额外配置即可开始开发。
真正的按需编译: Vite 采用了一种按需编译的方式，只有在需要的时候才会编译相应的模块，而不是等待整个应用编译完成。这种方式提高了开发过程中的响应速度和效率。
快速启动服务: Vite 的服务启动速度极快，使得开发者能够快速开始编写代码并查看效果，提高了开发的流畅度。
优化的构建性能: 与传统的构建工具相比，Vite 在构建过程中的性能表现更好，使得开发者能够更快地构建和部署应用程序。
综上所述，Vite 的优势在于其快速的热重载、开箱即用的支持、按需编译、快速启动服务和优化的构建性能，这些特点使得前端开发过程更加高效和愉快。
具体操作如下（点击查看官方文档）
## 1.创建命令（任选一种）
npm create vue@latestpnpm create vue@latest
yarn create vue@latest
bun create vue@latest
## 2.具体配置
## 配置项目名称
√ Project name: vue3_test
## 是否添加TypeScript支持
√ Add TypeScript? Yes
## 是否添加JSX支持
√ Add JSX Support? No
## 是否添加路由环境
√ Add Vue Router for Single Page Application development? No
## 是否添加pinia环境
√ Add Pinia for state management? No
## 是否添加单元测试
√ Add Vitest for Unit Testing? No
## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? » No
## 是否添加ESLint语法检查
√ Add ESLint for code quality? Yes
## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting? No
如果不确定是否要开启某个功能，你可以直接按下回车键选择 NO。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：
----npm----
cd <your-project-name>
npm install
npm run dev
----pnpm----
cd <your-project-name>
pnpm install
pnpm run dev
----yarn----
cd <your-project-name>
yarn
yarn dev
----bun----
cd <your-project-name>
bun install
bun run dev安装官方推荐的vscode插件：
当你准备将应用发布到生产环境时，请运行（任选一种）：
npm run build
pnpm run build
yarn build
bun run build
通过 CDN 使用 Vue
可以借助 script 标签直接通过 CDN 来使用 Vue：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>通过 CDN 使用 Vue 时，不涉及“构建步骤”。这使得设置更加简单，并且可以用于增强静态的 HTML 或与后端框架集成。但是，你将无法使用单文件组件 (SFC) 语法。
代码示例
<template>
<div class="person">
<h2>姓名：{
{name}}</h2>
<h2>年龄：{
{age}}</h2>
<button @click="changeName">修改名字</button>
<button @click="changeAge">年龄+1</button>
<button @click="showTel">点我查看联系方式</button>
</div>
</template>
<script lang="ts">
export default {
name: "Preson",
};
</script>
<script setup lang="ts">
import { ref } from 'vue';
const name = ref('张三');
const age = ref(18);
const tel = '1234567890';
function changeName() {
name.value = '李四';
}
function changeAge() {
age.value +=1;
}
function showTel() {
alert(tel)
}
</script>
<style scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button {
margin: 0 5px;
}
</style>这段代码是一个 Vue 3 组件的代码片段，包含了模板、脚本和样式。让我来解释一下这个组件的功能和结构：
1、模板部分：
- <template> 标签中包含了组件的 HTML 结构，其中包括姓名、年龄和三个按钮。
- { {name}} 和 { {age}} 是 Vue 的插值语法，用于显示 name 和 age 的值。
- @click 是 Vue 的事件监听器，用于在按钮被点击时调用相应的方法。
2、脚本部分：
- <script lang="ts"> 标签中的代码定义了 Vue 组件的基本信息，这里主要是组件的名称。
- <script setup lang="ts"> 标签中的代码使用了 Vue 3 新引入的 <script setup> 语法，用于编写组件的逻辑部分。
- import { ref } from 'vue'; 导入了 Vue 3 中的 ref 方法，用于创建响应式的数据。
- const name = ref('张三'); 和 const age = ref(18); 创建了名为 name 和 age 的响应式数据。
- const tel = '1234567890'; 定义了一个不需要响应式的常量。
- function changeName() { ... }、function changeAge() { ... } 和 function showTel() { ... } 分别定义了修改姓名、增加年龄和显示电话的方法。
3、样式部分：
- <style scoped> 标签中的 CSS 样式只作用于当前组件，不会影响到其他组件。
- .person 类设置了背景颜色、阴影、圆角和内边距等样式。
- button 样式设置了按钮之间的间距。
