以下是以资深软件开发工程师的视角，对“Vue3 起步”的专业回答。我将详细讲解如何开始使用 Vue3，包括环境搭建、项目创建、基本使用和入门示例，结合 HTML5，包含目录、小标题、表格、代码示例和内部链接，确保内容清晰、技术准确且易于理解。回答基于截至 2025 年 3 月 17 日的最新信息，以 Vue 3.4.x（最新稳定版）为基准。
Vue3 起步
目录
1. 引言
Vue3 是 Vue.js 的最新版本，带来了性能优化、组合式 API 等新特性，是现代前端开发的热门选择。本教程将引导您从零开始上手 Vue3，无论您是初学者还是有 Vue2 经验的开发者，都能快速入门。
2. 准备工作
2.1 环境要求
- 操作系统：Windows、macOS 或 Linux。
- 浏览器：支持 ES6 的现代浏览器（如 Chrome、Firefox）。
- 工具：Node.js（推荐 LTS 版本）和 npm。
2.2 安装 Node.js 和 npm
- 下载 Node.js：访问 nodejs.org，下载 LTS 版本（截至 2025 年 3 月，推荐 v20.x）。
- 安装：按提示安装，完成后检查版本：
node -v # 示例输出: v20.11.0
npm -v # 示例输出: 10.2.3
- 更新 npm（可选）：
npm install -g npm
3. 快速上手 Vue3 的两种方式
3.1 通过 CDN 引入
- 适合场景：快速原型开发或学习。
- 步骤：在 HTML 文件中引入 Vue3 的 CDN 链接。
- 示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue3 CDN 示例</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<button @click="changeMessage">更改</button>
</div>
<script>
const app = Vue.createApp({
data() {
return { message: 'Hello Vue3' };
},
methods: {
changeMessage() {
this.message = 'Vue3 起步成功！';
}
}
});
app.mount('#app');
</script>
</body>
</html>
- 运行：保存为
index.html，用浏览器打开即可。
3.2 使用 Vite 创建项目
- 适合场景：正式项目开发，推荐方式。
- 步骤：
- 创建项目：
npm create vite@latest my-vue-app -- --template vue
- 进入目录并安装依赖：
cd my-vue-app
npm install
- 启动开发服务器：
npm run dev
- 项目结构：
my-vue-app/
├── node_modules/
├── public/
├── src/
│ ├── App.vue # 根组件
│ ├── main.js # 入口文件
│ └── assets/
├── index.html
└── package.json
- 修改
src/App.vue：
<template>
<h1>{{ message }}</h1>
<button @click="changeMessage">更改</button>
</template>
<script>
export default {
data() {
return { message: 'Hello Vue3' };
},
methods: {
changeMessage() {
this.message = 'Vue3 项目启动成功！';
}
}
};
</script>
<style>
h1 { color: #42b983; }
</style>
- 访问：浏览器打开
http://localhost:5173查看效果。
4. Vue3 基础结构
4.1 创建应用实例
- 方法：
Vue.createApp(options)创建应用实例。 - 挂载：通过
mount('#id')绑定到 DOM。 - 示例：
const app = Vue.createApp({
data() {
return { count: 0 };
}
});
app.mount('#app');
4.2 组件与模板
- 组件：Vue3 的基本构建块，可包含模板、逻辑和样式。
- 模板：使用 HTML 扩展语法声明界面。
- 示例：
<template>
<p>{{ count }}</p>
</template>
<script>
export default {
data() {
return { count: 0 };
}
};
</script>
5. 完整入门示例
以下是一个基于 Vite 的简单计数器示例：
- 创建项目：按照 使用 Vite 创建项目 的步骤操作。
- 修改
src/App.vue：
<template>
<div>
<h1>{{ title }}</h1>
<p>计数: {{ count }}</p>
<button @click="increment">增加</button>
<button @click="reset">重置</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
const title = ref('Vue3 计数器');
const count = ref(0);
const increment = () => count.value++;
const reset = () => (count.value = 0);
</script>
<style>
h1 { color: #42b983; }
button { margin: 5px; }
</style>
- 运行：
npm run dev
- 效果：访问
http://localhost:5173，点击按钮更新计数。
6. 与 Vue2 的差异
| 方面 | Vue2 | Vue3 |
|---|---|---|
| 创建方式 | new Vue() | createApp() |
| API | 选项式 API 为主 | 支持组合式 API |
| 响应式 | Object.defineProperty | Proxy（更高效） |
| 性能 | 较慢 | 更快，优化编译和渲染 |
- 关键变化：Vue3 引入组合式 API 和更高效的响应式系统。
7. 最佳实践与后续学习
- 使用 Vite：推荐 Vite 作为构建工具，速度快且配置简单。
- 模块化：将逻辑拆分为组件，提升复用性。
- 学习路径：
- 掌握 基础语法（插值、指令等）。
- 深入 组件 和 路由。
- 探索组合式 API 和状态管理（如 Pinia）。
- 资源：参考 官方文档 和 Vue Devtools。
8. 结论
Vue3 的起步过程简单而高效，无论是通过 CDN 快速体验还是使用 Vite 搭建项目，都能快速构建应用。本教程通过示例展示了入门步骤。如需深入学习，可参考 Vue3 基础语法 或官方文档（vuejs.org）。
回答特点
- 结构：包含目录、带锚点的小标题、表格和代码示例，逻辑清晰。
- 实用性：从准备到实践，覆盖起步全流程。
- 内部链接：通过
<a href="#ID">跳转，如 快速上手 Vue3 的两种方式。 - 出站链接：嵌入正文，指向权威资源。
发表回复