学习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的优势如下：

1. 轻量快速的热重载（HMR）: Vite 提供了快速的热模块重载，使开发者能够即时看到代码更改后的效果，提高了开发效率。

2. 对 TypeScript、JSX、CSS 等支持开箱即用: Vite 对于一些常用的前端开发技术栈（如 TypeScript、JSX、CSS）提供了开箱即用的支持，无需额外配置即可开始开发。

3. 真正的按需编译: Vite 采用了一种按需编译的方式，只有在需要的时候才会编译相应的模块，而不是等待整个应用编译完成。这种方式提高了开发过程中的响应速度和效率。

4. 快速启动服务: Vite 的服务启动速度极快，使得开发者能够快速开始编写代码并查看效果，提高了开发的流畅度。

5. 优化的构建性能: 与传统的构建工具相比，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 
npm install
npm run dev

----pnpm----
cd 
pnpm install
pnpm run dev

----yarn----
cd 
yarn
yarn dev

----bun----
cd 
bun install
bun run dev

 安装官方推荐的vscode插件：

当你准备将应用发布到生产环境时，请运行（任选一种）：

npm run build
pnpm run build
yarn build
bun run build

通过 CDN 使用 Vue

可以借助 script 标签直接通过 CDN 来使用 Vue：

通过 CDN 使用 Vue 时，不涉及“构建步骤”。这使得设置更加简单，并且可以用于增强静态的 HTML 或与后端框架集成。但是，你将无法使用单文件组件 (SFC) 语法。 

代码示例

这段代码是一个 Vue 3 组件的代码片段，包含了模板、脚本和样式。让我来解释一下这个组件的功能和结构：

1、模板部分：