Vue 3 使用手册

• • 1. 引言
  • 2. 安装与设置
  • • 2.1 安装 Vue CLI
    • 2.2 创建项目
    • 2.3 项目结构
    • 2.4 启动项目
  • 3. 基本用法
  • • 3.1 创建组件
    • 3.2 使用组件
  • 4. 响应式系统
  • • 4.1 `ref` 和 `reactive`
    • • 使用 `ref`
      • 使用 `reactive`
  • 5. 组件通信
  • • 5.1 父子组件通信
    • 5.2 兄弟组件通信
  • 6. 渲染优化
  • • 6.1 静态提升
    • 6.2 静态节点缓存
  • 7. TypeScript 支持
  • • 7.1 项目设置
    • 7.2 使用 TypeScript
  • 8. 模块化与轻量化
  • 9. 资源与学习
  • • 9.1 官方文档
    • 9.2 在线课程
    • 9.3 社区与支持
  • 10. 结论

1. 引言

Vue.js 是一个渐进式的 JavaScript 框架，主要用于构建用户界面。与其他单页面应用框架不同，Vue 旨在通过自底向上逐层应用的设计，使您可以逐步将项目迁移至更复杂的架构。Vue 3 是 Vue.js 的最新版本，带来了许多新特性和改进，本文将详细介绍 Vue 3 的使用方法。

2. 安装与设置

2.1 安装 Vue CLI

首先，确保您已安装 Node.js 和 npm。然后，使用以下命令安装 Vue CLI：

npm install -g @vue/cli 

2.2 创建项目

使用 Vue CLI 创建一个新的 Vue 3 项目：

vue create my-vue3-project 

在提示中选择 Default (Vue 3) 选项或手动选择 Vue 3.x。

2.3 项目结构

创建的项目结构如下：

my-vue3-project/ ├── node_modules/ ├── public/ │   ├── index.html ├── src/ │   ├── assets/ │   ├── components/ │   ├── App.vue │   ├── main.js ├── .gitignore ├── babel.config.js ├── package.json ├── README.md ├── vue.config.js 

2.4 启动项目

进入项目目录并启动开发服务器：

cd my-vue3-project npm run serve 

3. 基本用法

3.1 创建组件

在 src/components 目录下创建一个名为 HelloWorld.vue 的新组件：

3.2 使用组件

在 src/App.vue 文件中导入并使用 HelloWorld 组件：

4. 响应式系统

4.1 ref 和 reactive

Vue 3 提供了两个主要的响应式 API：ref 和 reactive。

使用 ref

使用 reactive

5. 组件通信

5.1 父子组件通信

通过 props 向子组件传递数据：

5.2 兄弟组件通信

使用事件总线或 Vuex 等状态管理工具来实现兄弟组件之间的通信。

6. 渲染优化

6.1 静态提升

Vue 3 会自动将静态内容提升到渲染函数外部，从而减少渲染函数的执行次数。

6.2 静态节点缓存

Vue 3 会缓存静态节点，从而避免不必要的重新渲染。

7. TypeScript 支持

7.1 项目设置

在创建项目时选择 TypeScript 选项，或手动安装所需依赖：

vue add typescript 

7.2 使用 TypeScript

在组件中使用 TypeScript：

8. 模块化与轻量化

Vue 3 更加模块化，通过 Tree shaking 可以减少打包体积。例如，按需引入 Vue Router：

npm install vue-router@next 

在 src/main.js 中配置路由：

import { createApp } from 'vue' import App from './App.vue' import { createRouter, createWebHistory } from 'vue-router' import Home from './components/Home.vue' import About from './components/About.vue'  const routes = [   { path: '/', component: Home },   { path: '/about', component: About } ]  const router = createRouter({   history: createWebHistory(),   routes })  createApp(App).use(router).mount('#app') 

9. 资源与学习

9.1 官方文档

Vue.js 官方文档

9.2 在线课程

• Vue Mastery
• Udemy - Vue 3 Courses

9.3 社区与支持

• Vue.js Forum
• Stack Overflow

10. 结论

Vue 3 带来了许多新特性和改进，使得开发体验更加顺畅和高效。通过本手册，您可以快速上手 Vue 3 并利用其强大的功能构建现代化的 web 应用。希望这些内容能帮助您更好地理解和使用 Vue 3。