使用vite创建Vue3项目+配置路径+配置路由（手把手教程）

 创建项目：

1. 在你放项目的盘符创建文件夹，并在文件夹的目录输入 cmd +回车进入运行对话框（我这里是D盘符中的project文件夹中的V3文件里）

 接下来可以看到我们直接进入了所选择的文件夹里面（如图）

 2. 输入：  npm create vite@latest

 3.输入项目名称并回车（这里我取的index）

 

 4. 依次选择Vue TypeScript

 5. 按照指示输入cd index（cd 你的项目名）&& npm install 并回车

 到这里 项目已经创建完成！ 可以直接拖到开发工具里面运行项目了（这里我用的是Vscode开发工具）

 配置路径：

 1. 这里需要安装一个文件路径插件（也是我配置路由的时候遇到的坑）

npm install --save-dev @types/node

 2. 首先在 vite.config.ts中配置（可直接全部复制替换）

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// *********************************** 路径配置新增 start  
import { resolve } from 'path'

const pathResolve = (dir: string): any => {
  return resolve(__dirname, ".", dir)
}

const alias: Record<string, string> = {
  '@': pathResolve("src")
}
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {  // ****************** 路径配置新增
    alias     // ****************** 路径配置新增
  }           // ****************** 路径配置新增
})

 3. 其次在tsconfig.json中配置（在compilerOptions中配置）

"baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ],
    }

 以上配置完成后文件路径都可以写成 “@”

配置路由：

1. 安装路由：npm install vue-router@4

 2. 在src目录下 创建 routes文件夹（用做放路由js文件）和views文件夹（用做放页面文件）

 3. 在routes文件夹下创建 index.ts， 在views文件夹下创建one.vue , two.vue两个页面

4. 在index.ts中编写 ：

import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/',
            name: 'home',
            component: () => import('@/views/one.vue')
        },
        {
            path: '/two',
            name: 'two',
            component: () => import('@/views/two.vue')
        }
    ]
})
// 导出
export default router

 5. 在main.ts中引入：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from '@/routes/index'
const app = createApp(App)
app.use(router)
app.mount('#app')
//这里稍微整理了一下代码 可以不按照这种写法，直接引入你的index.ts就好
//如果不明白也可直接复制

 6. 写好路由容器（这里是在app.vue里面编写）

 <router-view></router-view>

 7.分别在两个页面写点代码测试路由是否成功

 one页面：

如果这个地方你的<script setup>有报错可以在tsconfig.json中添加 "allowJs": true（在compilerOptions中配置） 

 two页面：

 测试：

 成功！