Vue3 零基础实战教程：快速上手入门指南

对于零基础的学习者，以下是一些 Vue3 的实际应用示例，可以帮助您开始学习：

创建一个 Vue3 项目：

首先需要安装 Node.js 和 Vue CLI，然后在终端中运行以下命令：

vue create my-project

这将创建一个 Vue3 项目，并安装必要的依赖项。在项目目录中运行以下命令以启动开发服务器：

npm run serve

创建一个组件：

在 Vue3 中，可以使用 Composition API 创建组件。在项目目录中创建一个名为 HelloWorld.vue 的新组件，并在其中编写以下代码：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
  import { reactive } from 'vue'

  export default {
    setup() {
      const state = reactive({
        message: 'Hello, world!'
      })

      return {
        ...state
      }
    }
  }
</script>

这将创建一个简单的组件，显示一条消息。

使用组件：

要在 Vue3 应用程序中使用组件，需要将其导入并在模板中使用。在 App.vue 中，添加以下代码：

<template>
  <div>
    <HelloWorld />
  </div>
</template>

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

  export default {
    components: {
      HelloWorld
    }
  }
</script>

这将在应用程序中使用 HelloWorld 组件，并将其渲染到页面上。

使用 Vue3 路由：

Vue3 应用程序可以使用 Vue Router 进行路由。要使用 Vue Router，需要安装它并在应用程序中配置它。在项目目录中运行以下命令以安装 Vue Router：

npm install vue-router@4

然后，在 main.js 中，添加以下代码以配置 Vue Router：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

最后，在 router.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(),
  routes
})

export default router

这将定义两个路由：主页和关于页面。现在，可以使用 Vue Router 在应用程序中进行导航。

这些是 Vue3 的一些基础实际应用示例，可以帮助您开始学习。如果您需要更深入的了解，请查阅 Vue3 官方文档。