VUE3使用教程

VUE基础入门

认识VUE

什么是Vue.js

Vue.js（读音类似于"view"）是一款流行的 JavaScript 前端框架，主要用于构建用户界面和单页应用程序。作为一个渐进式框架，Vue 的设计理念是"可以逐步采用"。这意味着你可以将 Vue 轻松整合到现有项目的某个部分，也可以用它来构建功能完整、结构复杂的单页应用。- 声明式渲染: Vue使用模板语法，允许我们以声明式的方式描述HTML输出应该基于JavaScript状态如何变化。

• 响应式系统:当数据变化时，视图会自动更新，无需手动操作DOM。
• 组件化开发:应用被拆分为独立可复用的组件，使代码更易于组织和维护。

Vue框架易于上手，对新手友好，同时又足够灵活强大，能满足复杂应用的需求。

vue3的新特性与优势

Vue3于2020年9月正式发布，如今Vue3已经成为了默认版本，相比Vue2带来了许多重大改进和新特性:

性能提升

• 更小的包体积:Vue3核心代码体积比Vue2小约41%。
• 虚拟DOM重写:更高效的DOM diff算法，渲染性能提升约1.3~2倍。
• 树摇优化:更好的Tree-shaking支持,只打包用到的功能。

Composition APl(组合式API)

Vue3最显著的变化是引入了Composition APl，它提供了一种更灵活的代码组织方式:

• 更好的逻辑复用:通过可复用的组合式函数来提取和重用逻辑。
• 更好的类型推导:对TypeScript的支持更为友好。
• 更好的代码组织:相关联的代码可以放在一起，而不是分散在不同的选项中。

更好的TypeScript支持

Vue3是用TypeScript重写的，为TypeScript用户提供了改进的类型检查和类型推断。

Teleport组件

允许将组件的内容传送到DOM的其他部分，解决了模态框、通知等UI元素的定位问题。

Fragments (片段)

Vue3组件现在可以有多个根节点，不再需要一个单一的包装元素。

更好的响应式系统

基于Proxy的响应式系统，解决了Vue2中基于object.defineProperty的一些限制:

• 可以直接检测对象属性的添加和删除
• 可以直接检测数组索引和长度的变更
• 可以支持Map、Set、WeakMap和WeakSet

Vue3核心功能与生态

Vue3不仅仅是一个UI框架，而是一个完整的生态系统，包括多个核心和社区工具:

核心库

• Vue Core: Vue的核心库，提供组件系统、模板编译器和响应式系统。
• Vue Router: Vue官方的路由管理器，用于构建单页应用。
• Pinia: Vue官方推荐的状态管理库，替代了Vuex，专为Vue3设计。

开发工具

• Vue CLI:命令行工具，用于快速搭建Vue项目。
• Vite:现代前端构建工具，由Vue团队开发，提供极快的开发服务器和优化的构建过程。
• Vue DevTools:浏览器扩展，用于调试Vue应用。

UI框架

基于Vue3的多个UI组件库:

• Element Plus:基于Vue3的桌面端组件库.
• Naive UI:支持TypeScript的Vue3组件库.
• Vuetify: Material Design风格的Vue组件库
• Quasar:一套Vue组件，支持同时开发网页、移动应用和桌面应用

开发模式

Vue3支持多种开发方式:

• 单文件组件(SFC):在.vue文件中组合HTML、CSS和JavaScript
• 选项式API:通过对象选项组织代码(Vue2的主要方式)
• 组合式APl:通过函数组合实现更灵活的代码组织(Vue3的新特性)

生态系统优势

Vue3生态系统的主要优势在于:

• 官方维护的核心库确保一致性和兼容性
• 灵活的开发模式适应不同项目需求和团队习惯·强大的工具链提升开发效率
• 活跃的社区提供大量插件和支持

随着Vue3的普及，其生态系统正变得越来越丰富，为开发者提供了全方位的支持，对于零基础的初学者，Vue3是一个理想的起点，它既简单易学，又拥有足够的深度和广度，能够伴随你从入门到精通的整个学习旅程。

开发环境搭建

配置安装

安装node.js与npm

• Node.js是一个基于Chrome v8引擎的JavaScript运行环境，它使JavaScript 可以在浏览器之外运行。
• npm (Node Package Manager）是Node.js的包管理工具，用于安装、管理和共享JavaScript代码包。
• 对于Vue开发而言，Node.js和npm是必不可少的工具，它们使我们能够:使用现代化的构建工具(如Vite),安装和管理项目依赖,运行开发服务器,构建生产版本的应用

node.js版本18.3或者更高

使用淘宝镜像

npm config set registry https://registry.npmmirror.com

快速上手

npm create vue@latest

运行命令之后，出现这些交互提示，可选择需要的功能安装

✔ Project name: ... <your-project-name>
✔ Add TypeScript? ... No / Yes
✔ Add JSX Support? ... No / Yes
✔ Add Vue Router for Single Page Application development? ... No / Yes
✔ Add Pinia for state management? ... No / Yes
✔ Add Vitest for Unit testing? ... No / Yes
✔ Add an End-to-End Testing Solution? ... No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? ... No / Yes
✔ Add Prettier for code formatting? ... No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) ... No / Yes

Scaffolding project in ./<your-project-name>...
Done.

进入项目目录

运行 npm install 安装依赖

运行 npm run dev 启动项目

生产构建

当你准备部署应用到生产环境时，运行构建命令:

npm run build

这将在项目的./dist目录中创建生产就绪的构建文件。

了解Vite 构建工具

什么是Vite

Vite(法语中"快"的意思)是vue团队开发的下一代前端构建工具，现在已经成为Vue3项目的默认构建工具。当你使用create-vue创建项目时，Vite 就已经自动集成在其中了。

Vite的主要特点:

• 极快的启动速度:无需打包，直接利用浏览器的ES模块功能
• 即时热更新:修改代码后，页面几乎立即更新，无需刷新
• 优化的构建:生产环境使用Rollup进行高效打包
• 开箱即用:内置支持TypeScript、JSx、CSS 预处理器等

常用的命令

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览生产构建
npm run preview

# 运行代码检查（如果配置了 ESLint）
npm run lint

# 运行单元测试（如果配置了 Vitest）
npm run test:unit

安装插件

可以创建一个.vscode/extensions.json文件在项目根目录，推荐团队成员安装相同的插件:

{
  "recommendations": [
    "Vue.volar",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "formulahendry.auto-rename-tag",
    "christian-kohler.path-intellisense"
  ]
}

Vue3语法基础