【Vue 3 使用手册】——快速上手前端【最火】框架!!!

Vue 3 使用手册

1. 引言2. 安装与设置2.1 安装 Vue CLI2.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-projectnpm run serve

3. 基本用法

3.1 创建组件

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

<template>  <div class="hello">    <h1>{{ msg }}</h1>  </div></template><script>export default {  name: 'HelloWorld',  props: {    msg: String  }}</script><style scoped>h1 {  font-size: 2em;  color: #42b983;}</style>

3.2 使用组件

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

<template>  <div id="app">    <HelloWorld msg="Welcome to Your Vue.js App"/>  </div></template><script>import HelloWorld from './components/HelloWorld.vue'export default {  name: 'App',  components: {    HelloWorld  }}</script><style>#app {  font-family: Avenir, Helvetica, Arial, sans-serif;  text-align: center;  color: #2c3e50;}</style>

4. 响应式系统

4.1 ref 和 reactive

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

使用 ref

<template>  <div>    <p>{{ count }}</p>    <button @click="increment">Increment</button>  </div></template><script>import { ref } from 'vue'export default {  setup() {    const count = ref(0)    const increment = () => {      count.value++    }    return {      count,      increment    }  }}</script>

使用 reactive

<template>  <div>    <p>{{ state.count }}</p>    <button @click="increment">Increment</button>  </div></template><script>import { reactive } from 'vue'export default {  setup() {    const state = reactive({ count: 0 })    const increment = () => {      state.count++    }    return {      state,      increment    }  }}</script>

5. 组件通信

5.1 父子组件通信

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

<!-- ParentComponent.vue --><template>  <ChildComponent :message="parentMessage"/></template><script>import ChildComponent from './ChildComponent.vue'export default {  components: {    ChildComponent  },  data() {    return {      parentMessage: 'Hello from Parent'    }  }}</script>

<!-- ChildComponent.vue --><template>  <div>{{ message }}</div></template><script>export default {  props: {    message: String  }}</script>

5.2 兄弟组件通信

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

6. 渲染优化

6.1 静态提升

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

6.2 静态节点缓存

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

7. TypeScript 支持

7.1 项目设置

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

vue add typescript

7.2 使用 TypeScript

在组件中使用 TypeScript：

<template>  <div>{{ message }}</div></template><script lang="ts">import { defineComponent } from 'vue'export default defineComponent({  data() {    return {      message: 'Hello TypeScript'    }  }})</script>

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 MasteryUdemy - Vue 3 Courses

9.3 社区与支持

Vue.js ForumStack Overflow

10. 结论

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