env## 一、概述 VueAntdAdmin基于ant-design-vue组件库，是一套完整的，可以直接用来搭建完整后台管理系统前端解决方案； ## 二、安装 这里安装不同于组件库的安装，它的开发要采用基于原代码库进行增加或修改的开发模式； 所以，它的安装，是克隆项目代码，然后安装依赖，这样形成了本地代码库了，以此为基础，进行开发工作； ~~~ git clone https://github.com/iczer/vue-antd-admin.git adminproject cd adminproject npm install npm run serve ~~~ 即可看到效果了，完成开发环境adminproject（新工程的名称）的基础代码库的搭建了； ## 三、配置文件说明 作为一个基于vue-cli 1、vue.config.js vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载；你也可以使用 package.json 中的 vue 字段来代替这个文件； 2、.env和.env.development 环境文件，里面只包含环境变量的“键=值”对； ~~~ .env # 在所有的环境中被载入 .env.[mode] # 只在指定的模式中被载入 ~~~ 因此，开发模式下，两个文件中的变量都可用，而发布模式下，则只有.env可用； ## 四、生命周期（核心）文件 生命周期的三个核心文件，是典型的vue项目配置，并没有什么特殊的生命周期逻辑； ### **src/main.js文件** main.js是项目的入口文件，项目中所有的页面都会加载main.js，所以main.js； 它主要有三个作用： 1. 实例化Vue； 2. 放置项目中经常会用到的插件和CSS样式； 3. 存储全局变量 >[danger] 由于vue组件的全局注册的行为必须在根 Vue 实例 (通过 `new Vue`) 创建之前发生，因此，只有在main.js中，注册的组件，全局才可以使用； ### **src/App.vue文件** App.vue是项目的根组件文件； ### **public/index.html文件** index.html是项目主页文件，web请求的默认页面，就是从这个页面开始的；文件里面关键代码是定义了一个id为app的div； ``` <div id="app"></div> ``` 具体的，可以参考：[前端框架/vueCli/vue核心文件](../../vueCli/vue%E6%A0%B8%E5%BF%83%E6%96%87%E4%BB%B6.md) ## 五、布局和视图 都是基于ant-design-vue的布局组件开发，该布局组件采用 flex 布局实现； ### Layout 组件 如果你需要辅助页面框架级别的布局设计，那么ant-design-vue的Layout组件则是你最佳的选择（该组件库还提供了Grid组件用于布局），它抽象了大部分框架布局结构，使得只需要填空就可以开发规范专业的页面整体布局； >[danger] 需要注意的是，这些布局组件和我们平时使用的其它组件并没有什么不同，只不过功能性上是为了处理布局问题； ## 六、路由和菜单 菜单是通过[menu.js]插件来把路由配置生成菜单信息的； | 路由属性 | 对应菜单功能 | | --- | --- | | **name** | 菜单名称 | | **path** | 点击菜单时的跳转链接 | | **meta.icon** | 菜单图标，图标使用 ant-design-vue 图标库，对应[Icon](https://www.antdv.com/components/icon-cn/#API)组件 的 type 属性 | | **meta.invisible** | 是否不将此路由项渲染为菜单项，默认false；如设置为 true，则生成菜单时将忽略此路由 | ### **异步路由** 系统的路由和菜单会根据用户的角色变化而变化，或者路由菜单根据用户的权限动态生成，这个就需要异步加载方案； 1、开启异步设置； ``` 在 /config/config.js 文件中设置 asyncRoutes 的值为 true: ``` 2、注册路由组件； 这一步相当于把完整的路由拆分成单个的路由配置进行注册，为后面的路由动态配置打好基础； 3、配置基本路由； 如果没有任何路由，你的应用是无法访问的，所以我们需要在本地配置一些基本的路由，比如登录页、404、403 等； 4、异步获取路由配置； 当用户登录后（或者其它的前提条件），你可能想根据不同用户加载不同的路由和菜单。 那么我们就需要先从后端服务获取异步路由配置，后端返回的异步路由配置`routesConfig`是一个异步路由配置数组； 5、加载路由并应用； 只需调用`/utils/routerUtil.js`中的`loadRoutes`方法加载上一步获取到的`routesConfig`即可； 至此，异步路由的加载就完成了，你可以访问异步加载的路由了； ### **异步菜单** 菜单，是根据路由配置自动生成的，默认获取根路由`‘/’`下所有子路由作为菜单配置。 当你完成了异步路由的加载，菜单也会随之改变，无需你做其它额外的操作； ~~~ // 初始化Admin后台菜单数据 const rootRoute = router.options.routes.find(item => item.path === '/') const menuRoutes = rootRoute && rootRoute.children if (menuRoutes) { mergeI18nFromRoutes(i18n, menuRoutes) store.commit('setting/setMenuData', menuRoutes) } ~~~ ## 七、服务端交互 在 service 模块封装了服务端交互，通过 API 的形式可以和任何技术栈的服务端应用一起工作； 与服务器端的交互过程： * 组件内调用 service 服务 API * service 服务 API 封装请求数据，通过 request.js 发送请求 * 组件获取 service 返回的数据，更新视图数据或触发其它行为