Vue 3与Vite项目入门指南

前言

​ 大家好！我是薛慕昭。最近，我转学到了Java编程，但是由于一段时间没有接触前端开发，我对Vue 3和Vite等前端技术有些遗忘了。因此，我决定回顾一下Vue 3和Vite的基础知识，以便能够更好地应用它们来构建应用程序。

在本文中，我将为大家分享关于Vue 3和Vite的入门指南。我们将一起学习如何使用Vite来创建一个全新的Vue 3项目，并了解如何使用Vue Router进行页面路由管理。通过本次回顾和入门的学习，我们将能够快速上手Vue 3和Vite，并开始开发出令人印象深刻的前端应用程序。

如果你也是和我一样有一段时间没有接触前端开发，或者对Vue 3和Vite感兴趣，那么这篇文章绝对是为你准备的。无需担心，我们将从头开始，逐步学习和实践。

让我们开始这段令人兴奋的Vue 3和Vite之旅吧！

什么是Vue 3和Vite？

Vue 3是一款流行的JavaScript框架Vue.js的最新版本。Vue.js通过数据驱动和组件化的方式，提供了构建用户界面的灵活性和高效性。Vue 3在相比之前版本有一些重要的改进，包括更好的性能、逻辑组合和更小的包体积。

Vite则是一个由尤雨溪团队开发的轻量级的现代化构建工具。它与Vue 3结合使用，可以实现快速启动和热更新的开发体验。Vite通过利用ES模块的原生特性，直接在浏览器中运行代码，而无需像传统工具那样先打包再运行。

步骤 1：创建一个新的Vite项目

首先，我们需要确保我们安装了最新版本的Node.js。我们可以在终端中运行以下命令进行检查：

node -v

如果未安装Node.js，请到官方网站下载并安装。

然后，我们使用以下命令全局安装Vite：

npm install -g create-vite

接下来，我们使用create-vite命令创建一个新的Vite项目：

create-vite my-vue3-project --template vue

项目创建完成后，进入项目目录：

cd my-vue3-project

步骤 2：安装Vue Router

在Vue 3中，Vue Router是用于处理页面路由的官方库。我们可以使用以下命令来安装Vue Router：

npm install vue-router@next

步骤 3：创建一个简单的Vue组件

现在，我们可以开始编写我们的Vue组件了。在src目录下创建一个新文件夹components，在该文件夹中创建一个新的Vue组件：

<template>
  <div>
    <h1>Hello, {{ name }}!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      name: 'Vue 3'
    }
  }
}
</script>

步骤 4：配置Vue Router

在src目录下创建一个新文件夹router，在该文件夹中创建一个新的文件index.js：

import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'

const routes = [
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

步骤 5：在主应用程序中使用Vue Router

打开src目录下的main.js文件，添加以下代码来使用Vue Router：

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

createApp(App).use(router).mount('#app')

步骤 6：运行项目

最后，我们可以在终端中运行以下命令启动项目：

npm run dev

现在，您可以在浏览器中访问http://localhost:3000，您应该能够看到一个显示"Hello, Vue 3！"的页面。

这就是使用Vue 3和Vite构建项目的基本步骤！您现在可以根据自己的需求继续扩展和定制。