Pure Admin Table 项目启动与配置教程

Pure Admin Table 项目启动与配置教程

pure-admin-table 二次封装element-plus的Table，提供高度灵活的配置项 项目地址: https://gitcode.com/gh_mirrors/pu/pure-admin-table

1. 项目目录结构及介绍

Pure Admin Table 项目的目录结构如下：

pure-admin-table/
├── public/                      # 公共静态文件
│   └── index.html               # 项目入口 HTML 文件
├── src/                         # 源代码目录
│   ├── api/                     # 接口管理
│   ├── assets/                  # 静态资源（如图片、样式、字体等）
│   ├── components/              # Vue 组件
│   ├── layout/                  # 布局组件
│   ├── router/                  # 路由配置
│   ├── store/                   # Vuex 状态管理
│   ├── utils/                   # 工具库
│   ├── views/                   # 页面文件
│   ├── App.vue                  # 根组件
│   └── main.js                  # 入口文件，初始化 Vue 实例
├── .env.development             # 开发环境配置文件
├── .env.production              # 生产环境配置文件
├── .gitignore                   # Git 忽略文件
├── babel.config.js              # Babel 配置文件
├── package.json                 # 项目配置文件
└── package-lock.json            # 依赖锁定文件

• public/: 存放公共静态文件，如入口 HTML 文件。
• src/: 源代码目录，包含项目的所有代码。
• api/: 管理所有与后端交互的接口。
• assets/: 存放项目中的静态资源。
• components/: 存放 Vue 组件。
• layout/: 存放布局相关的组件。
• router/: Vue 路由配置。
• store/: Vuex 状态管理。
• utils/: 存放工具函数。
• views/: 存放页面级别的 Vue 文件。
• App.vue: 根组件，所有页面都会在这个组件中渲染。
• main.js: 入口文件，初始化 Vue 实例。

2. 项目的启动文件介绍

项目的启动文件是 src/main.js，其主要功能如下：

• 引入 Vue 框架和相关插件。
• 引入路由配置和状态管理。
• 创建 Vue 实例并挂载到 #app 元素上。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3. 项目的配置文件介绍

项目包含两个环境配置文件：.env.development 和 .env.production，分别用于开发环境和生产环境。

• .env.development: 开发环境配置文件，可以设置一些开发时使用的变量，例如 API 基址等。
• .env.production: 生产环境配置文件，用于设置生产环境下的变量，如 API 基址等。

环境变量的设置格式为 VUE_APP_变量名=值。例如，设置 API 基址：

VUE_APP_API_BASE_URL=http://example.com/api

在项目中可以通过 process.env.变量名 访问这些变量。例如，在 axios 请求中：

axios.get(process.env.VUE_APP_API_BASE_URL + '/path')

以上就是 Pure Admin Table 项目的启动和配置教程。

pure-admin-table 二次封装element-plus的Table，提供高度灵活的配置项 项目地址: https://gitcode.com/gh_mirrors/pu/pure-admin-table