当前位置：首页 > 技术分析 > 正文内容

【Vue3】保姆级毫无废话的进阶到实战教程 - 01

ruisui883个月前 (02-03)技术分析8

作为一个 React、Vue 双修选手，在 Vue 3 逐渐稳定下来之后，是时候摸摸 Vue 3 了。Vue3 的变化不可谓不大，所以，本系列主要通过对 Vue3 中的一些 Big Changes 做详细的介绍，然后封装一个比较通用的业务脚手架，里面会增加很多非常有用的小技巧，让你在 Vue 3 的世界里纵享丝滑 ~

第一篇将着重介绍一些 Vue3 中重要的变化和概念 ~

1、新建项目

找个可以开机的电脑，在终端输入：

打开链接 http://127.0.0.1:5173，你的眼睛就会看到：

代表项目初始化成功，你真棒！

你的目录会长这个样子：

注意：记笔记，小技巧学起来，在 vscode 终端中使用 tree 指令打印当前项目的文件树：

tree -I "node_modules|.vscode|cypress" > tree.txt

这个命令会做两件事:

  1. 使用 tree 命令输出目录树结构，同时排除 node_modules、.vscode 和 cypress 文件夹
  2. tree 命令可以输出目录的树形结构
  3. -I 参数用于排除某些文件夹不显示
  4. 在排除参数中用 | 分隔多个要排除的文件夹名
  5. 使用 '>' 符号将标准输出重定向到 tree.txt 文件（没有就会自动生成一个）

这样 tree 命令的输出就会被写入到 tree.txt 文件中，而不是打印到终端屏幕上。在项目中执行，然后你就会在项目根目录中看到一个 tree.txt 文件:

.
├── README.md
├── cypress.config.ts
├── dist
│?? ├── assets
│?? │?? ├── AboutView-4d995ba2.css
│?? │?? ├── AboutView-675ecf4b.js
│?? │?? ├── index-9f680dd7.css
│?? │?? ├── index-d5df9149.js
│?? │?? └── logo-277e0e97.svg
│?? ├── favicon.ico
│?? └── index.html
├── env.d.ts
├── index.html
├── package.json
├── pnpm-lock.yaml
├── public
│?? └── favicon.ico
├── src
│?? ├── App.vue
│?? ├── assets
│?? │?? ├── base.css
│?? │?? ├── logo.svg
│?? │?? └── main.css
│?? ├── components
│?? │?? ├── HelloWorld.vue
│?? │?? ├── TheWelcome.vue
│?? │?? ├── WelcomeItem.vue
│?? │?? ├── __tests__
│?? │?? │?? └── HelloWorld.spec.ts
│?? │?? └── icons
│?? │??     ├── IconCommunity.vue
│?? │??     ├── IconDocumentation.vue
│?? │??     ├── IconEcosystem.vue
│?? │??     ├── IconSupport.vue
│?? │??     └── IconTooling.vue
│?? ├── main.ts
│?? ├── router
│?? │?? └── index.ts
│?? ├── stores
│?? │?? └── counter.ts
│?? └── views
│??     ├── AboutView.vue
│??     └── HomeView.vue
├── tree.txt
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
├── tsconfig.vitest.json
├── vite.config.ts
└── vitest.config.ts

简单介绍一下重要的文件/文件夹：

public

里面的东西不会经过编译和打包，所以放在 public 内的东西 ”不要引用“；

通常会放置( 不被JavaScript ) 引用的静态资源，例如：网页标题栏 icon，即 favicon.ico；

打包的时候，里面的东西会直接被复制一份，放在根目录内，所以要引用 public 内的资源时，要使用根目录绝对路径，比如：要取 public/favicon.ico ，你应写成 /favicon.ico；

assets：放静态资源，如：图片、CSS

components：放公用组件

stores：与 Pinia 状态管理器有关

router：与 Vue Router 路由管理有关

views：放路由组件

2、深入认识 npm xxx

在 package.json 的 scripts 中常用的有三个指令：

npm run dev｜npx vite：启动项目本地服务，并提供 Hot Module Replacement (HMR)，可以在更新代码后即时更新页面；

是的，在项目根目录下 npx vite 也可以启动项目！

  • npm run build｜npx vite build：项目打包
  • npm run preview｜npx vite preview --port 4173：启动一个本地服务，预览打包后的 dist 内容，可以在正式布署前检查打包后的内容是否有问题

3、为什么要打包？

Vue3项目打包的主要目:

  1. 必要的语法编译
  2. 浏览器不认识 vue 文件，需要编译成浏览器能读懂的 js 和 css
  3. 浏览器不认识的新 ES 语法，需要 polyfill。
  4. Minify 代码：去除无用代码，节省浏览器解析的时间
  5. 在不影响程序运行的前提下，去除不必要的空白字元、注解，将变量名称、函数名称、参数名称缩短等等，减少部署后的代码体积。
  6. 整合第三方模块：打包可以将引入的各种第三方模块打包合并到一起，作为一个整体进行部署。通过 npm 或yarn 安装所需的第三方库，实际都放在 node_modules 内，却可以透过 import from "xxx" 直接使用，不需要写出该库的完整路径，这是打包工具的功劳。
  7. 性能优化：通过打包合并文件，减少页面 HTTP 请求数量，加快加载速度。
  8. 代码保护：源码经过打包后会进行压缩和混淆，可以起到一定的代码保护作用。
  9. 兼容性优化：打包可以将代码转换为主流浏览器都能识别的语法，优化不同浏览器的兼容性。
  10. 部署方便：打包后生成的静态资源文件可以很方便地部署到各种环境。
  11. 开启gzip压缩：打包过程可以进行gzip压缩，优化静态资源文件的体积。
  12. 分析代码：通过分析打包后的文件，可以清晰看到项目中不同文件的组成和大小。

打包主要是为了优化性能、安全性、扩展性、部署便利性等等，实际项目部署中也是必要的步骤。

4、Option API 和Composition API 区别

Vue 3 提供 Option API 和 Composition API 两种写法，Option API 是延续自 Vue 2 的写法，Composition API 则是跟着 Vue 3 一起推出的新写法。

Option API 和 Composition API 主要差别有两个：

  1. 管理逻辑代码的方式，也就是

    6、几个重要的东西

    6.1 setup() 和

    不过需要注意： 还是一项实验性功能。它不一定会最终成为稳定功能，并且在稳定之前相关 API 也可能会发生变化。

    7、SFC

    在 Vue 3 中，SFC（Single File Component，单文件组件）是一种将模板、脚本和样式封装在一个单独的文件中的开发模式。SFC 提供了一种组织和编写 Vue 组件的便捷方式，并提供了更好的可读性和可维护性。

    一个典型的 Vue 3 SFC 包含三个部分：

    • 模板（template）：每个 .vue 文件最多只能有一个