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>

總結

通過以上步驟，你已經快速了解了如何使用 Vue 3 和 TypeScript 創建一個簡單的項目，包括組件創建、路由配置和狀態管理。希望這個快速入門教程對你有所幫助，可以作為你進一步學習和使用 Vue 3 的基礎。