Vitify Admin 项目教程
1. 项目的目录结构及介绍
vitify-admin/
├── public/
│ └── index.html
├── src/
│ ├── assets/
│ ├── components/
│ ├── layouts/
│ ├── pages/
│ ├── plugins/
│ ├── router/
│ ├── store/
│ ├── styles/
│ ├── utils/
│ ├── App.vue
│ └── main.ts
├── .gitignore
├── .eslintrc.js
├── .prettierrc
├── tsconfig.json
├── vite.config.ts
├── package.json
└── README.md
public/
: 存放静态资源文件,如index.html
。src/
: 项目的主要源代码目录。assets/
: 存放静态资源,如图片、字体等。components/
: 存放 Vue 组件。layouts/
: 存放布局组件。pages/
: 存放页面组件。plugins/
: 存放插件配置文件。router/
: 存放路由配置文件。store/
: 存放状态管理文件,如 Pinia。styles/
: 存放全局样式文件。utils/
: 存放工具函数。App.vue
: 项目的根组件。main.ts
: 项目的入口文件。
.gitignore
: Git 忽略文件配置。.eslintrc.js
: ESLint 配置文件。.prettierrc
: Prettier 配置文件。tsconfig.json
: TypeScript 配置文件。vite.config.ts
: Vite 配置文件。package.json
: 项目的依赖和脚本配置。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 store from './store';
import './styles/index.scss';
const app = createApp(App);
app.use(router);
app.use(store);
app.mount('#app');
createApp(App)
: 创建 Vue 应用实例。app.use(router)
: 安装路由插件。app.use(store)
: 安装状态管理插件。app.mount('#app')
: 将应用挂载到 DOM 元素#app
上。
3. 项目的配置文件介绍
vite.config.ts
vite.config.ts
是 Vite 的配置文件,用于配置项目的构建和开发服务器。以下是 vite.config.ts
的基本结构:
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': resolve(__dirname, 'src'),
},
},
server: {
port: 3000,
open: true,
},
build: {
outDir: 'dist',
assetsDir: 'assets',
},
});
plugins: [vue()]
: 使用 Vue 插件。resolve.alias
: 配置路径别名,方便导入模块。server
: 配置开发服务器,如端口和自动打开浏览器。build
: 配置构建选项,如输出目录和静态资源目录。
tsconfig.json
tsconfig.json
是 TypeScript 的配置文件,用于配置 TypeScript 编译选项。以下是 tsconfig.json
的基本结构:
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"source