如何快速入门 Vue 3
Vue.js 是一个流行的前端 JavaScript 框架，以其简洁、高效而著称。Vue 3 作为最新的主要版本，带来了许多新特性和改进，包括更好的性能、更小的体积以及更多的内置功能。以下是一份快速入门 Vue 3 的指南。
一、了解 Vue 3 的新特性
在开始之前，了解 Vue 3 的一些关键新特性是很有帮助的：
- Composition API：Vue 3 引入了 Composition API，提供了一种更灵活的方式来组织组件逻辑。
- 响应式系统的改进：Vue 3 的响应式系统经过重写，性能得到显著提升。
- Teleport：一个新的内置组件，允许你将组件的子节点"传送"到 DOM 中的其他位置。
- Fragments：支持多个根节点，使得组件可以返回多个元素。
- 自定义渲染器 API：允许开发者创建自定义的渲染器。
二、环境准备
要开始使用 Vue 3，你需要准备以下环境：
-
Node.js：确保你的开发环境中安装了 Node.js，Vue 3 需要 Node.js 版本 10.0 或更高。
-
Vue CLI：Vue CLI 是 Vue 官方的命令行工具，用于快速生成和管理 Vue 项目。安装 Vue CLI 的命令是：
bash
代码解读
复制代码
npm install -g @vue/cli
三、创建 Vue 3 项目
使用 Vue CLI 创建一个新的 Vue 3 项目：
-
打开终端或命令提示符。
-
输入以下命令创建新项目：
lua
代码解读
复制代码
vue create my-vue3-app -
按照提示选择 Vue 3 预设或手动选择特性。
四、探索项目结构
创建项目后，熟悉一下项目的基本结构：
src/：存放所有的源代码。components/：存放 Vue 组件。App.vue：根组件。main.js：入口文件，用于创建 Vue 实例。public/：存放静态资源，如index.html。
五、使用 Composition API
Vue 3 的 Composition API 提供了一种新的方式来组织组件逻辑，它允许开发者将组件的功能分割成可复用的函数。以下是一些实际的 Composition API 使用示例。
1. 基础响应式状态
使用 ref 创建响应式状态：
xml
代码解读
复制代码
<template> <button @click="increment">Count is {``{ count }}</button> </template> <script setup> import { ref } from 'vue'; const count = ref(0); function increment() { count.value++; } </script>
2. 计算属性
使用 computed 创建计算属性：
xml
代码解读
复制代码
<template> <div>Double Count: {``{ doubleCount }}</div> </template> <script setup> import { ref, computed } from 'vue'; const count = ref(0); const doubleCount = computed(() => count.value * 2); </script>
3. 侦听器
使用 watch 和 watchEffect 来侦听响应式状态的变化：
xml
代码解读
复制代码
<template> <button @click="increment">Count is {````{ count }}</button> </template> <script setup> import { ref, watchEffect } from 'vue'; const count = ref(0); watchEffect(() => { console.log(`count is now: ${count.value}`); }); function increment() { count.value++; } </script>
4. 生命周期钩子
使用 onMounted, onUpdated, onUnmounted 等生命周期钩子：
ini
代码解读
复制代码
<template> <div>Component is {``{ state }}</div> </template> <script setup> import { ref, onMounted, onUpdated, onUnmounted } from 'vue'; const state = ref('mounted'); onMounted(() => { state.value = 'mounted'; }); onUpdated(() => { state.value = 'updated'; }); onUnmounted(() => { state.value = 'unmounted'; }); </script>
5. 自定义 Hook
创建自定义的 Hook 来复用逻辑：
javascript
代码解读
复制代码
// useCounter.js export default function useCounter(initialValue) { const count = ref(initialValue); function increment() { count.value++; } return { count, increment }; } // MyComponent.vue <template> <button @click="increment">Count is {``{ count }}</button> </template> <script setup> import useCounter from './useCounter'; const { count, increment } = useCounter(10); </script>
6. 提供和注入
使用 provide 和 inject 进行跨组件的状态共享：
javascript
代码解读
复制代码
// ParentComponent.vue <template> <ChildComponent /> </template> <script setup> import { provide } from 'vue'; import ChildComponent from './ChildComponent.vue'; provide('theme', 'dark'); </script> // ChildComponent.vue <template> <div>The theme is {``{ theme }}</div> </template> <script setup> import { inject } from 'vue'; const theme = inject('theme'); </script>
六、组件开发
开始开发你的组件，使用 Vue 3 的新特性：
- 模板语法 ：使用新的指令，如
v-model现在统一为v-model:value和v-model:arg。 - 组件通信 ：使用
provide和inject来实现祖先组件向后代组件传递数据。 - 自定义指令：Vue 3 改进了自定义指令 API。
七、项目构建和部署
当你的项目开发完成后，使用以下命令来构建项目：
arduino
代码解读
复制代码
npm run build
构建完成后，将 dist/ 目录中的内容部署到你的服务器或使用静态网站托管服务。
八、学习资源
- Vue 官方文档 ：Vue 3 Documentation
- Vue 3 教程：网络上有许多教程和课程可以帮助你更深入地学习 Vue 3。
- 社区：加入 Vue 社区，如论坛、Slack 频道或 Discord 服务器，与其他开发者交流。
结语
Vue 3 带来了许多激动人心的新特性和改进，通过上述步骤，你可以快速入门并开始构建现代化的前端应用。不断实践和探索，你将能够充分利用 Vue 3 的强大能力。
作者：乘风77
链接：https://juejin.cn/post/7377658332842377227
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。