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 的基础。