Vue 3 实战教程（快速入门）

Vue.js 是一个用于构建用户界面的渐进式框架，Vue 3 是 Vue 的最新版本，带来了许多改进和新特性。本文将通过一个简单的项目示例，带你快速入门 Vue 3 的基础使用。

环境设置

安装 Node.js 和 npm

确保你已经安装了 Node.js 和 npm，可以通过以下命令检查：

node -v
npm -v

如果没有安装，请前往 Node.js 官网下载并安装最新的 LTS 版本。

创建 Vue 3 项目

使用 Vue CLI 创建一个新的 Vue 3 项目。首先，全局安装 Vue CLI：

npm install -g @vue/cli

然后，创建一个新项目：

vue create my-vue3-project

选择默认设置或根据你的需要进行自定义设置。

项目结构

创建完成后，项目结构大致如下：

my-vue3-project/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   ├── main.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js

编写你的第一个组件

修改 `App.vue`

打开 src/App.vue 文件，修改模板和样式：

<template><div id="app"><img alt="Vue logo" src="./assets/logo.png"><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;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

创建一个新的组件

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

<template><div class="my-component"><h2>{{ title }}</h2><button @click="increment">Click me</button><p>Count: {{ count }}</p></div>
</template><script setup>
import { ref } from 'vue';const title = 'My First Vue 3 Component';
const count = ref(0);function increment() {count.value++;
}
</script><style scoped>
.my-component {text-align: center;
}button {padding: 10px 20px;font-size: 16px;
}
</style>

使用新组件

打开 src/App.vue 文件，引入并使用 MyComponent：

<template><div id="app"><img alt="Vue logo" src="./assets/logo.png"><HelloWorld msg="Welcome to Your Vue.js App"/><MyComponent /></div>
</template><script>
import HelloWorld from './components/HelloWorld.vue';
import MyComponent from './components/MyComponent.vue';export default {name: 'App',components: {HelloWorld,MyComponent}
};
</script>

使用 Composition API

Vue 3 引入了 Composition API，这使得在组件中组织逻辑变得更加灵活和可重用。让我们在 MyComponent.vue 中使用 Composition API。

<template><div class="my-component"><h2>{{ title }}</h2><button @click="increment">Click me</button><p>Count: {{ count }}</p></div>
</template><script setup lang="ts">
import { ref } from 'vue';const title = ref('My First Vue 3 Component');
const count = ref(0);function increment() {count.value++;
}
</script><style scoped>
.my-component {text-align: center;
}button {padding: 10px 20px;font-size: 16px;
}
</style>

路由和状态管理

安装 Vue Router

Vue Router 是 Vue.js 的官方路由器，用于构建单页面应用。安装 Vue Router：

npm install vue-router@next

配置路由

在 src 目录下创建一个 router 文件夹，并在其中创建 index.ts 文件：

// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';const routes = [{ path: '/', component: Home },{ path: '/about', component: About }
];const router = createRouter({history: createWebHistory(),routes
});export default router;

使用路由

修改 src/main.ts 文件，使用路由：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';createApp(App).use(router).mount('#app');

创建视图组件

在 src/views 目录下创建 Home.vue 和 About.vue 文件：

<!-- src/views/Home.vue -->
<template><div><h1>Home</h1><p>Welcome to the Home page.</p></div>
</template><script setup>
</script><style scoped>
</style>

<!-- src/views/About.vue -->
<template><div><h1>About</h1><p>This is the About page.</p></div>
</template><script setup>
</script><style scoped>
</style>

更新 `App.vue`

修改 src/App.vue 文件以添加导航链接：

<template><div id="app"><nav><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link></nav><router-view></router-view></div>
</template><script setup>
</script><style>
nav {margin-bottom: 20px;
}nav a {margin-right: 10px;text-decoration: none;color: #42b983;
}nav a.router-link-active {font-weight: bold;
}
</style>

状态管理 (Vuex)

虽然 Vue 3 推荐使用 Composition API 进行状态管理，但你仍然可以使用 Vuex。

安装 Vuex

npm install vuex@next

配置 Vuex

在 src 目录下创建一个 store 文件夹，并在其中创建 index.ts 文件：

// src/store/index.ts
import { createStore } from 'vuex';export default createStore({state: {count: 0},mutations: {increment(state) {state.count++;}},actions: {increment({ commit }) {commit('increment');}},getters: {count: (state) => state.count}
});

使用 Vuex

修改 src/main.ts 文件，使用 Vuex：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';createApp(App).use(router).use(store).mount('#app');

访问 Vuex 状态

在组件中访问 Vuex 状态和方法：

<template><div class="my-component"><h2>{{ title }}</h2><button @click="increment">Click me</button><p>Count: {{ count }}</p></div>
</template><script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';const store = useStore();const title = 'My First Vue 3 Component';
const count = computed(() => store.state.count);function increment() {store.dispatch('increment');
}
</script><style scoped>
.my-component {text-align: center;
}button {padding: 10px 20px;font-size: 16px;
}
</style>