收下這款 Vue 專案模版，它將讓你的開發效率在 2021 年提高 50%
阿新 • • 發佈：2020-12-31
眾所周知，雖然 Vue CLI 提供了腳手架的功能，但由於官方的腳手架過於簡單，生成好的專案在實際專案開發的時候，還需要做很多事情，而 [vue-automation](https://gitee.com/eoner/vue-automation) 就是來解決這一痛點，讓你的開發效率至少提升 50% 以上
# 這是什麼
[vue-automation](https://gitee.com/eoner/vue-automation) 是一款開箱即用的 Vue 專案模版，它基於 Vue CLI 4
# 特點
- 預設整合 vue-router 、vuex 和 axios
- 全域性 SCSS 資源自動引入
- 全域性元件自動註冊
- 支援 SVG 圖示，CSS 精靈圖自動合成
- 支援 mock 資料，可擺脫後端束縛獨立開發
- 支援 GZip 和 CDN 優化專案體積/載入速度
- 結合 IDE 外掛、ESlint 、stylelint 、Git 鉤子，輕鬆實現團隊程式碼規範
# 功能介紹
## 配置
預設提供開發環境和生產環境兩套配置，分別在根目錄下 `.env.development` 和 `.env.production` 檔案裡，可配置項有網站標題、介面請求地址和是否開啟CDN支援。
開發者可根據實際業務需求進行擴充套件，如果對這塊不熟悉，可閱讀 [Vue CLI 環境變數和模式](https://cli.vuejs.org/zh/guide/mode-and-env.html) 章節。
## 全域性 SCSS 資源
> 全域性 SCSS 資源並不是全域性樣式，是變數、@mixin 、@function 這些東西
在 `assets/styles/resources/` 目錄下存放全域性的 SCSS 資源，也就是說在這個目錄裡的檔案，無需在頁面上引用即可生效並使用。
專案中預設存放了 `utils.scss` 檔案，裡面有幾個 `@mixin` 和 `%` ，你可以嘗試在頁面中使用它們看看效果。
同樣，精靈圖目錄下生成的 SCSS 資源也是全域性可呼叫的。
## 精靈圖
> 又稱雪碧圖，原理是將多張小圖合併到一張大圖上，以便減少 HTTP 請求，提高網站訪問速度。
精靈圖原始圖片的存放位置位於 `assets/sprites/` 目錄下，注意按資料夾區分。
專案執行前會根據資料夾生成對應的精靈圖檔案（精靈圖圖片和 `.scss` 檔案），多個資料夾則會生成多個精靈圖檔案。需要注意的是，在專案執行時，修改資料夾裡的圖片，會重新生成相關精靈圖檔案，但如果新建資料夾，則需要重新執行專案才會生成對應精靈圖檔案。
在 `.vue` 檔案中可通過 `@include` 直接使用精靈圖，無需手動引入 `.scss` 檔案：
```scss
// 方法 1
// @include [資料夾名稱]-sprite([檔名稱]);
.icon {
@include example-sprite(address);
}
// 方法 2
// @include all-[資料夾名稱]-sprites;
@include all-example-sprites;
```
最終輸出如下：
```css
/* 方法 1 */
.icon {
background-image: url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png);
background-position: 0px 0px;
background-size: 210px 210px;
width: 100px;
height: 100px;
}
/* 方法 2 */
.example-address-sprites {
background-image: url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png);
background-position: 0 0;
background-size: 210px 210px;
width: 100px;
height: 100px;
}
.example-feedback-sprites {
background-image: url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png);
background-position: -110px 0;
background-size: 210px 210px;
width: 100px;
height: 100px;
}
.example-payment-sprites {
background-image: url(img/example.326b35aec20837b9c08563c654422fe6.326b35ae.png);
background-position: 0 -110px;
background-size: 210px 210px;
width: 100px;
height: 100px;
}
```
如果是小型專案，靜態圖示不多，可全部放在一個資料夾內；如果是中大型專案，資料夾可按模組來劃分，這樣不同的模組最終會生成各自的精靈圖檔案。
## SVG 圖示
現在越來越多專案開始使用 SVG 圖示做為精靈圖的替代品，本框架也提供了 SVG 圖示支援，方便使用。推薦去[阿里巴巴向量圖示庫](https://www.iconfont.cn/)下載高質量 SVG 圖示
首先將 svg 檔案放到 `src/assets/icons/` 目錄下，然後在頁面中就可以使用了，`name` 就是 svg 檔名
```html