Vue3 + Vite 实现项目搭建

vite 官网：Vite | 下一代的前端工具链

安装 Vite

安装 vite 构建工具：

npm create vite@latest

cd 项目文件夹名称

npm install
npm run dev

安装 vue-router

安装 vue-router 工具，首先命令安装最新版本：

npm install vue-router@4.3.3

安装完成，在 src 文件夹下创建 router 文件夹，router 文件夹下创建 index.js 文件。

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
        path: '/',
        redirect: '/home'
    },
    {
      path: '/home',
      name: 'home',
      component: () => import('../views/HomeView.vue')
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

在src文件夹下创建views文件夹，在views文件夹下创建home,.vue,about.vue,文件

在app.vue中修改这一部分
<template>
  <div class="nav-btn">
    <router-link to='/'> Home</router-link>
    <router-link to='/about'>About </router-link>
  </div>
  <router-view></router-view>
</template>

最后在全局 main.js 引入一下 router。
import { createApp } from 'vue'
import App from './App.vue'
import './style.css'
import router from './router'

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

然后这个就可以了！