Vue 3 起步指南

Vue 3 是一个渐进式的 JavaScript 框架，用于构建用户界面。通过其清晰简洁的 API 和灵活的设计，它使得构建现代 Web 应用变得更加简单。在这篇指南中，我将带你从零开始创建一个 Vue 3 项目，并帮助你了解基础概念。

1. 环境准备

在开始之前，确保你已经安装了以下工具：

  • Node.js 和 npm（Node 包管理器）
  • 代码编辑器：建议使用 VSCode，因为它提供了强大的插件支持，适合前端开发。

2. 创建 Vue 3 项目

Vue 3 项目的创建可以通过两种工具进行：Vue CLI 或 Vite。

使用 Vite 创建 Vue 3 项目（推荐）

Vite 是一个现代的前端构建工具，它对 Vue 3 提供了原生支持，构建速度快，适合现代开发环境。

  1. 打开终端，运行以下命令来初始化一个新项目： npm create vite@latest my-vue-app --template vue
  2. 进入项目目录： cd my-vue-app
  3. 安装项目依赖： npm install
  4. 启动开发服务器： npm run dev 打开浏览器，访问 http://localhost:3000/，你将看到 Vue 3 的欢迎页面。

使用 Vue CLI 创建 Vue 3 项目

Vue CLI 是 Vue 官方提供的脚手架工具，可以快速生成项目。

  1. 全局安装 Vue CLI（如果未安装）： npm install -g @vue/cli
  2. 创建一个 Vue 3 项目： vue create my-vue-app
  3. 在交互式菜单中选择 Vue 3 配置（选择 Vue 3 或手动选择 Vue 3）。
  4. 进入项目目录： cd my-vue-app
  5. 启动开发服务器： npm run serve 访问 http://localhost:8080/，你应该看到 Vue 3 项目的欢迎页面。

3. Vue 3 项目的基础结构

无论你选择了 Vite 还是 Vue CLI，项目的结构都会非常相似。以下是 Vue 3 项目的标准目录结构：

my-vue-app/
├── public/               # 存放静态资源，构建时不会被打包
├── src/                  # 存放源码
│   ├── assets/           # 静态资源文件夹
│   ├── components/       # Vue 组件
│   ├── App.vue           # 根组件
│   ├── main.js           # 入口文件
├── package.json          # 项目依赖、脚本等配置
└── node_modules/         # 项目依赖

4. 编写你的第一个 Vue 组件

在 src/components/ 文件夹下创建一个新的组件，例如 HelloWorld.vue：

<template>
  <div>
    <h1>Hello, Vue 3!</h1>
    <p>This is your first Vue component!</p>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

然后在 src/App.vue 中使用这个组件：

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  components: {
    HelloWorld,
  },
};
</script>

<style>
/* 全局样式 */
</style>

5. 运行和调试

通过 npm run dev 启动开发服务器后，访问 http://localhost:3000/（或 http://localhost:8080/，取决于你使用的是 Vite 还是 Vue CLI），你会看到页面上显示的 Vue 组件内容。

在开发过程中，你可以进行热重载（hot-reload），修改代码后，浏览器会自动刷新，展示最新的修改。

6. 使用 Vue Router 路由管理

安装 Vue Router 用于页面导航。

  1. 安装 Vue Router： npm install vue-router@4
  2. 配置 Vue Router。在 src/router/index.js 创建路由文件： import { createRouter, createWebHistory } from 'vue-router'; import Home from '../views/Home.vue'; import About from '../views/About.vue'; const routes = [ { path: '/', name: 'Home', component: Home, }, { path: '/about', name: 'About', component: About, }, ]; const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes, }); export default router;
  3. 创建 Home.vue 和 About.vue 页面组件： src/views/Home.vue <template> <h1>Home Page</h1> </template> src/views/About.vue <template> <h1>About Page</h1> </template>
  4. 在 src/main.js 中引入并使用 Vue Router： import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; createApp(App).use(router).mount('#app');
  5. 修改 App.vue 文件，添加路由视图： <template> <div id="app"> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-view /> </div> </template>

7. 使用 Vuex 状态管理

Vuex 用于管理应用的全局状态。安装 Vuex：

  1. 安装 Vuex： npm install vuex@next
  2. 创建 src/store/index.js，配置 Vuex： import { createStore } from 'vuex'; const store = createStore({ state() { return { count: 0, }; }, mutations: { increment(state) { state.count++; }, }, }); export default store;
  3. 在 src/main.js 中引入并使用 Vuex： import { createApp } from 'vue'; import App from './App.vue'; import store from './store'; createApp(App).use(store).mount('#app');
  4. 在组件中使用 Vuex 状态： <template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> </div> </template> <script> export default { computed: { count() { return this.$store.state.count; }, }, methods: { increment() { this.$store.commit('increment'); }, }, }; </script>

8. 总结

Vue 3 提供了非常简洁而强大的开发体验。通过创建组件、配置路由、使用 Vuex 等，您可以迅速构建现代的单页应用（SPA）。这只是 Vue 3 的起步，随着项目的复杂度增加，您可以深入了解更高级的特性，例如 组合式 API、Suspense 和 Teleport 等。

如果你有任何问题或需要进一步的帮助，随时告诉我！