vue3 + ts +element-plus + vue-router + scss + axios搭建项目

以下是一个使用Vue 3、TypeScript、Element Plus、Vue Router、SCSS和Axios的项目基础结构的示例：

1. 安装必要的依赖：

npm install

2. 项目结构可能如下所示：

src/
|-- api/
|   |-- index.ts
|
|-- assets/
|   |-- styles/
|       |-- index.scss
|
|-- components/
|   |-- ExampleComponent.vue
|
|-- router/
|   |-- index.ts
|
|-- App.vue
|-- main.ts
|-- shims-vue.d.ts
|-- tsconfig.json
|-- vite.config.ts

3. vite.config.ts 配置文件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/assets/styles/index.scss";`
      }
    }
  }
})

4. tsconfig.json 类型脚本配置：

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": ".",
    "types": ["vite/client"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

5. shims-vue.d.ts 类型声明文件：

declare module '*.vue' {
  import { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

6. main.ts 入口文件：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
 
const app = createApp(App)
 
app.use(router)
app.use(ElementPlus)
 
app.mount('#app')

7. App.vue 根组件：

<template>
  <router-view />
</template>
 
<script lang="ts">
import { defineComponent } from 'vue'
 
export default defineComponent({
  name: 'App'
})
</script>

8. router/index.ts 路由配置：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 
const routes: Array