Vue Antd Admin 教程
1. 项目目录结构及介绍
Vue Antd Admin 是基于 Vue.js 和 Ant Design Pro 的后台管理模板。以下是主要的目录结构:
vue-antd-admin/
├── public/ # 静态资源目录
│ └── index.html # 入口HTML文件
├── src/ # 主要源码目录
│ ├── api/ # 接口请求文件
│ ├── assets/ # 自定义静态资源
│ ├── components/ # 全局组件
│ ├── layouts/ # 页面布局
│ ├── models/ # 数据模型
│ ├── routes/ # 路由配置
│ ├── services/ # 服务层逻辑
│ ├── styles/ # 样式文件
│ ├── utils/ # 工具函数
│ ├── views/ # 页面视图
│ ├── App.vue # 应用入口组件
│ ├── main.js # 主应用入口文件
│ └── ...
├── .env.development # 开发环境变量配置
├── .env.production # 生产环境变量配置
└── ... # 其他配置和脚本文件
重点目录说明:
public
: 存放公共HTML模板和静态资源。src
: 项目的主要源代码,包括组件、样式、路由和业务逻辑等。src/api
: HTTP请求相关代码,与服务器接口交互。src/components
: 自定义UI组件库。src/models
: 用于状态管理的数据模型。src/routes
: 应用的路由配置。src/services
: 封装业务逻辑的服务函数。
2. 项目启动文件介绍
main.js
src/main.js
是Vue应用的入口文件,它负责初始化Vue实例,挂载到页面上,同时也引入了基本的样式、全局组件以及路由配置。
import Vue from 'vue';
import { Button } from 'ant-design-vue'; // 引入Ant Design Vue组件
import App from './App.vue';
import router from './router'; // 引入路由配置
import './styles/global.less'; // 引入全局样式
Vue.config.productionTip = false;
Vue.component(Button.name, Button); // 注册Button组件
new Vue({
router,
render: h => h(App),
}).$mount('#app');
在该文件中,你可以添加全局使用的组件、设置Vue配置以及导入其他必要的设置。
3. 项目的配置文件介绍
Vue Antd Admin 中有多个配置文件,主要用于环境变量、打包配置和构建过程中的参数设定。
.env.development
和 .env.production
这两个文件分别用于开发环境和生产环境的环境变量配置。例如,API的基础URL可以在这些文件中定义,以便在不同环境中切换。
例如,在.env.development
文件中:
VUE_APP_API_BASE_URL=http://localhost:8000/api
在.env.production
文件中:
VUE_APP_API_BASE_URL=https://api.example.com
vue.config.js
此文件是自定义Vue CLI构建步骤的地方,可以调整一些默认配置,如代理服务器、输出目录等。例如:
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/' : '/vue-antd-admin/', // 输出路径
devServer: {
port: 8080, // 开发服务器端口
proxy: {
'/api': {
target: process.env.VUE_APP_API_BASE_URL, // API代理目标地址
changeOrigin: true,
pathRewrite: { '^/api': '' }, // 重写URL,去掉'/api'
},
},
},
};
在这个配置文件中,你可以修改打包选项,比如端口号、代理设置,或者设置publicPath来适应不同的部署场景。
通过理解上述关键文件的作用,你将更好地掌握Vue Antd Admin的构建和运行过程。如果想要了解更多细节,建议查阅项目仓库的文档和示例代码。