【免费下载】 Vue-Vben-Admin 快速入门教程

1. 项目目录结构及介绍

Vue-Vben-Admin 的目录结构如下：

├── public                 # 静态资源目录
│   └── index.html         # 入口HTML文件
├── src                    # 项目源代码目录
│   ├── assets             # 图片、字体等静态资源
│   ├── components         # 自定义组件
│   │   ├── global         # 全局组件
│   │   └── common         # 常用组件
│   ├── layouts            # 页面布局
│   ├── views               # 页面视图
│   ├── api                 # 接口请求模块
│   ├── plugins             # 第三方插件
│   ├── mock                # Mock数据
│   ├── routers             # 路由配置
│   ├── store               # Vuex状态管理
│   ├── shims-tsx.d.ts      # TypeScript 类型声明
│   ├── config.ts           # 项目配置
│   ├── main.ts             # 应用入口文件
│   ├── index.css           # 样式入口
│   └── index.tsx           # 入口脚本
└── .env*                  # 环境变量配置
└── vite.config.ts          # Vite构建配置
└── package.json            # 项目依赖和脚本

2. 项目的启动文件介绍

src/main.ts

main.ts 是应用的入口文件，它导入了所需的库和配置，并启动Vue应用。主要任务包括：

1. 导入Vue和必要的插件，如Vue Router、Vuex等。
2. 初始化Vue实例。
3. 注册全局组件。
4. 设置路由。
5. 启动应用。

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

const app = createApp(App);
// 注册全局组件
app.use(store).use(router).mount('#app');

.env* 文件

.env.development, .env.production, .env.test 等环境变量配置文件用于设置不同环境下的应用配置，如API地址、是否开启mock等。

例如，在 .env.development 中：

VUE_APP_BASE_API=/api
VITE_USE_MOCK=true

3. 项目的配置文件介绍

src/config.ts

config.ts 文件包含了项目的一些通用配置，如主题颜色、系统名称、接口基础路径等。这些配置可以全局访问，方便在应用中使用。

export const systemConfig = {
  name: 'Vben Admin',
  logoText: 'Vben',
  theme: 'dark', // 主题颜色：'dark' 或 'light'
  baseApi: '/api', // API基础路径
};

vite.config.ts

vite.config.ts 是Vite的构建配置文件，这里你可以定制Vite的工作流程，比如修改服务器端口、添加额外的插件或者调整打包配置。

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

export default defineConfig({
  base: './',
  server: {
    port: 3000,
  },
  plugins: [vue()],
  resolve: {
    alias: [
      {
        find: '@',
        replacement: path.resolve(__dirname, 'src'),
      },
    ],
  },
});

通过以上介绍，你应该能够更好地理解和操作Vue-Vben-Admin项目。更多详细的配置和组件使用方法，建议参考项目官方文档。