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

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 的新组件：

<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 Mastery
• Udemy - Vue 3 Courses

9.3 社区与支持

• Vue.js Forum
• Stack Overflow

10. 结论

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