Boot-Vue 项目教程
1. 项目的目录结构及介绍
boot-vue/
├── public/ # 公共静态资源
├── src/ # 源代码目录
│ ├── assets/ # 资源文件(如图片、样式等)
│ ├── components/ # Vue 组件
│ ├── router/ # Vue Router 配置
│ ├── stores/ # Pinia 状态管理
│ ├── App.vue # 主应用组件
│ └── main.ts # 应用入口文件
├── .gitignore # Git 忽略文件配置
├── .eslintrc.js # ESLint 配置
├── tsconfig.json # TypeScript 配置
├── vite.config.ts # Vite 配置
├── unocss.config.ts # UnoCSS 配置
└── README.md # 项目说明文档
2. 项目的启动文件介绍
main.ts
main.ts
是项目的入口文件,负责初始化 Vue 应用并挂载到 DOM 上。以下是 main.ts
的基本内容:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
const app = createApp(App)
app.use(router)
app.use(createPinia())
app.mount('#app')
App.vue
App.vue
是主应用组件,包含了应用的根组件和全局样式。以下是 App.vue
的基本内容:
<template>
<router-view />
</template>
<script setup lang="ts">
// 这里可以导入全局组件或进行其他全局配置
</script>
<style>
/* 全局样式 */
</style>
3. 项目的配置文件介绍
vite.config.ts
vite.config.ts
是 Vite 的配置文件,用于配置开发服务器、构建选项等。以下是 vite.config.ts
的基本内容:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
vue(),
AutoImport({
imports: ['vue', 'vue-router', 'pinia'],
dts: 'src/auto-imports.d.ts',
}),
Components({
resolvers: [ElementPlusResolver()],
dts: 'src/components.d.ts',
}),
],
server: {
port: 3000,
},
})
tsconfig.json
tsconfig.json
是 TypeScript 的配置文件,用于配置 TypeScript 编译选项。以下是 tsconfig.json
的基本内容:
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"isolatedModules": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
"lib": ["esnext", "dom"]
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
unocss.config.ts
unocss.config.ts
是 UnoCSS 的配置文件,用于配置原子 CSS 引擎。以下是 unocss.config.ts
的基本内容:
import { defineConfig } from 'unocss'
import { presetUno, presetAttributify } from 'unocss'
export default defineConfig({
presets: [