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 返回的數據，更新視圖數據或觸發其它行為