強撸vue-element-admin

項目位址：vue-element-admin

目錄結構内部分檔案解析

├── build                      // 建構相關
├── config                     // 配置相關
├── src                        // 源代碼
│   ├── api                    // 所有請求
│   ├── assets                 // 主題 字型等靜态資源
│   ├── components             // 全局公用元件
│   ├── directive              // 全局指令
│   ├── filters                // 全局 filter
│   ├── icons                  // 項目所有 svg icons
│   ├── lang                   // 國際化 language
│   ├── mock                   // 項目mock 模拟資料
│   ├── router                 // 路由
│   ├── store                  // 全局 store管理
│   ├── styles                 // 全局樣式
│   ├── utils                  // 全局公用方法
│   ├── vendor                 // 公用vendor
│   ├── views                  // views 所有頁面
│   ├── App.vue                // 入口頁面
│   ├── main.js                // 入口檔案 加載元件 初始化等
│   └── permission.js          // 權限管理
├── static                     // 第三方不打包資源
│   └── Tinymce                // 富文本
├── .babelrc                   // babel-loader 配置
├── .eslintrc.js               // eslint 配置項
├── .gitignore                 // git 忽略項
├── .travis.yml                // 自動化CI配置
├── favicon.ico                // favicon圖示
├── index.html                 // html模闆
└── package.json               // package.json
           

由上面衍生的前後端分離目錄

/**  項目根目錄/browser/  **/
|
├── build                      // 建構相關
├── config                     // 配置相關
├── src                        // 源代碼
│   ├── api                    // 所有請求
│   ├── assets                 // 主題 字型等靜态資源
│   ├── components             // 全局公用元件
│   ├── directive              // 全局指令
│   ├── filters                // 全局 filter
│   ├── icons                  // 項目所有 svg icons
│   ├── lang                   // 國際化 language
│   ├── mock                   // 項目mock 模拟資料
│   ├── router                 // 路由
│   ├── store                  // 全局 store管理
│   ├── styles                 // 全局樣式
│   ├── utils                  // 全局公用方法
│   ├── vendor                 // 公用vendor
│   ├── views                  // views 所有頁面
│   ├── App.vue                // 入口頁面
│   ├── main.js                // 入口檔案 加載元件 初始化等
│   └── permission.js          // 權限管理
├── static                     // 第三方不打包資源
│   └── Tinymce                // 富文本
├── .babelrc                   // babel-loader 配置
├── .eslintrc.js               // eslint 配置項
├── .gitignore                 // git 忽略項
├── .travis.yml                // 自動化CI配置
├── favicon.ico                // favicon圖示
├── index.html                 // html模闆
└── package.json               // package.json

/**  項目根目錄/server/  **/
|
├── build                      // 建構相關
├── logs                       // 日志相關
├── src                        // 源代碼
│   ├── main                    
          |——java
          |——resources 
               
           

也就是說把前一整個目錄封裝進browser裡面作為前端，再建一個server目錄寫後端代碼，運作IDEA打開指令行操作即可實作前背景對接

• .babelrc                   // babel-loader 配置

首先需要明白，

loader

官方解釋是檔案預處理器，通俗點說就是webpack在處理靜态檔案的時候，需要使用 

loader

 來加載各種檔案，

比如： 

html

檔案需要使用

html-loader

 ,

css 

需要使用

css-loader 

、 

style-loader

 等等。

同樣的，用來處理ES6文法，将其編譯為浏覽器可以執行的js文法就叫做babel-loader啦，在此我們使用.babelrc 檔案來進行配置

參考連結：Webpack 之 babel-loader 詳解    webpack之重新認知babel-loader   babel-loader的原理

• .eslintrc.js               // eslint 配置項

參考連結：Vue中ESlint配置檔案eslintrc.js檔案詳解

• .gitignore                 // git 忽略項

參考連結：Git忽略送出規則 - .gitignore配置運維總結

• .travis.yml                // 自動化CI配置

Travis CI 提供的是持續內建服務（Continuous Integration，簡稱 CI）。它綁定 Github 上面的項目，隻要有新的代碼，就會自動抓取。然後，提供一個運作環境，執行測試，完成建構，還能部署到伺服器。

持續內建指的是隻要代碼有變更，就自動運作建構和測試，回報運作結果。確定符合預期以後，再将新代碼”內建”到主幹。

持續內建的好處在于，每次代碼的小幅變更，就能看到運作結果，進而不斷累積小的變更，而不是在開發周期結束時，一下子合并一大塊代碼。

參考連結：詳解TRAVIS CI的.TRAVIS.YML配置檔案   持續內建（TRAVIS CI）簡介

• package.json 

每個項目的根目錄下面，一般都有一個package.json檔案，定義了這個項目所需要的各種子產品，以及項目的配置資訊（比如名稱、版本、許可證等中繼資料）

參考連結：對package.json的了解和學習

關于如何優雅的使用icon

首先我們建立一個專門放置圖示 icon 的檔案夾如：

@/src/icons

，将所有 icon 放在這個檔案夾下。 之後我們就要使用到 webpack 的 require.context。很多人對于

require.context

可能比較陌生，直白的解釋就是

require.context("./test", false, /.test.js$/); 這行代碼就會去 test 檔案夾（不包含子目錄）下面的找所有檔案名以

.test.js

結尾的檔案能被 require 的檔案。 更直白的說就是 我們可以通過正則比對引入相應的檔案子產品。

require.context有三個參數：

• directory：說明需要檢索的目錄
• useSubdirectories：是否檢索子目錄
• regExp: 比對檔案的正規表達式

了解這些之後，我們就可以這樣寫來自動引入

@/src/icons

下面所有的圖示了

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)

//keys()的意思就是 整理requireContext 不管這個是Object還是Array 都把key值整理出來變成一個數組,在通過map去循環。
           

之後我們增删改圖示直接直接檔案夾下對應的圖示就好了，什麼都不用管，就會自動生成

svg symbol

了。

詳情參看：手摸手，帶你優雅的使用 icon