vue3 + vite 搭建脚手架 以及配置路由

要创建一个 Vite 项目，需要先安装 Vite。可以使用 npm 或者 yarn 进行安装。在命令行中输入：

vite 安装

npm install vite -g     # 全局安装 vite
或者
yarn global add vite  # 全局安装 vite

然后通过以下命令创建一个 Vite 项目，名称是  vite-demo

npm init vite@latest vite-demo

默认生成的项目结构如下

然后  npm install  初始化项目

完成之后  npm run dev   启动项目，出现如下页面表示运行成功

配置路由

这边要注意是vue3 使用router要用4 版本的

npm install vue-router@4

第一步 在views 中新建路由文件

<template>
  <div>
    <h1>这是一个vue文件</h1>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped></style>

第二步 在router 文件夹中配置index 文件

import { createRouter, createWebHistory} from 'vue-router'; // history


const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import('../views/home.vue') // 路径
  }
]
const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router

第三步 在 main中导入路由表

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

// 引入路由
import router from './router/index'
// 使用路由
const app = createApp(App)
app.use(router)
app.mount('#app')

这样就好啦