基於 vue-cli3 搭建的前端模板，fork 或 clone 本倉庫，即可搭建完成一個新專案的基礎模板，原始碼地址，歡迎 star 或 fork
特性
-
CSS 預編譯語言：less
-
Ajax: axios，做了一定的封裝，詳見
src/services/request.js -
SVG 雪碧圖：採用
webpack外掛svg-sprite-loader,及svg精簡壓縮工具svgo -
移動 web 的適配方案：引入了
postcss-pxtorem及lib-flexible，可以自由地用 px 去開發 -
常用的 js 工具類： cloud-utils
-
常用的 Less 的 mixins 集合：magicless
目錄介紹
.
├── build # 生成壓縮包
├── public # 靜態資源，不需要 webpack 處理
└── src
├── assets
│ ├── fonts # 字型檔案
│ ├── img
│ ├── js # 不經過 npm 或 yarn 下載的第三方依賴包
│ └── less # reset 樣式，及定義的常量檔案等
├── components
│ └── SvgIcon # svg 雪碧圖
├── filters # 全域性過濾器
├── icons # svg 檔案
│ └── svg
├── router # 路由及攔截器
├── services # 統一的服務介面請求處理
└── views
└── hello
複製程式碼開發及釋出
# 克隆專案
git clone git@github.com:cklwblove/vue-cli3-template.git
# 安裝依賴
yarn install
# 可以通過如下操作解決 yarn 下載速度慢的問題
yarn install --registry=https://registry.npm.taobao.org
# 啟動服務
yarn run serve
# 構建生產環境
yarn run build
# 壓縮 dist 資料夾，生成 zip 包
yarn run deploy
複製程式碼瀏覽器訪問 http://localhost:3001
其他
# --svgo svg精簡壓縮
yarn run svgo
# --analyz 基於 webpack-bundle-analyzer 外掛分析打包的檔案構成及大小(vue ui 介面上的分析不習慣)
yarn run analyz
# --report 生成靜態報告檔案
yarn run report
複製程式碼