学习Vue3的第一天

简介

什么是 Vue？

创建Vue3工程

前提条件

基于 vue-cli 创建（不推荐）

基于 vite 创建（推荐）

通过 CDN 使用 Vue

代码示例

简介

什么是 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@latest

pnpm 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、样式部分：