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

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

环境设置

安装 Node.js 和 npm

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

bash 复制代码

node -v
npm -v

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

创建 Vue 3 项目

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

bash 复制代码

npm install -g @vue/cli

然后，创建一个新项目：

bash 复制代码

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 文件，修改模板和样式：

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 的新文件：

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：

vue 复制代码

<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。

vue 复制代码

<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：

bash 复制代码

npm install vue-router@next

配置路由

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

typescript 复制代码

// 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 文件，使用路由：

typescript 复制代码

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 文件：

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>

vue 复制代码

<!-- 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 文件以添加导航链接：

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

bash 复制代码

npm install vuex@next

配置 Vuex

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

typescript 复制代码

// 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：

typescript 复制代码

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 状态和方法：

vue 复制代码

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

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

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

环境设置

安装 Node.js 和 npm

创建 Vue 3 项目

项目结构

编写你的第一个组件

修改 App.vue

创建一个新的组件

使用新组件

使用 Composition API

路由和状态管理

安装 Vue Router

配置路由

使用路由

创建视图组件

更新 App.vue

状态管理 (Vuex)

安装 Vuex

配置 Vuex

使用 Vuex

访问 Vuex 状态

总结

修改 `App.vue`

更新 `App.vue`