【亲测免费】 V3 Admin Vite 项目使用教程【vue3】

1. 项目的目录结构及介绍

v3-admin-vite/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── layouts/
│   ├── router/
│   ├── store/
│   ├── views/
│   ├── App.vue
│   ├── main.ts
│   └── shims-vue.d.ts
├── .gitignore
├── LICENSE
├── README.md
├── package.json
├── tsconfig.json
├── vite.config.ts
└── yarn.lock

目录结构介绍

• public/: 存放静态资源文件，如 index.html。
• src/: 项目的主要源代码目录。
  • assets/: 存放静态资源，如图片、字体等。
  • components/: 存放可复用的 Vue 组件。
  • layouts/: 存放页面布局组件。
  • router/: 存放 Vue Router 相关配置。
  • store/: 存放 Pinia 状态管理相关配置。
  • views/: 存放页面视图组件。
  • App.vue: 项目的根组件。
  • main.ts: 项目的入口文件。
  • shims-vue.d.ts: 用于 TypeScript 识别 .vue 文件。
• .gitignore: Git 忽略文件配置。
• LICENSE: 项目许可证文件。
• README.md: 项目说明文档。
• package.json: 项目依赖和脚本配置。
• tsconfig.json: TypeScript 配置文件。
• vite.config.ts: Vite 配置文件。
• yarn.lock: Yarn 依赖锁定文件。

2. 项目的启动文件介绍

入口文件：main.ts

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

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

根组件：App.vue

<template>
  <router-view />
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
/* 样式代码 */
</style>

3. 项目的配置文件介绍

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000
  }
})

tsconfig.json

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

package.json

{
  "name": "v3-admin-vite",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^3.0.0",
    "vue-router": "^4.0.0",
    "pinia": "^2.0.0",
    "element-plus": "^1.0.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.0.0",
    "typescript": "^4.0.0",
    "vite": "^2.0.0"
  }
}

以上是 V3 Admin Vite 项目的基本使用教程，涵盖