基於 vue-cli3
搭建的前端模板,fork
或 clone
本倉庫,即可搭建完成一個新項目的基礎模板,源碼地址,歡迎 star 或 fork
特性
- CSS 預編譯語言:less
- Ajax: axios,做了一定的封裝,詳見
src/services/request.js
- SVG 雪碧圖:採用
webpack
插件svg-sprite-loader
,及svg
精簡壓縮工具svgo
- 移動 web 的適配方案:引入了
postcsspostcss-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 [email protected]: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 界面上的分析不習慣 :stuck_out_tongue_winking_eye:)
yarn run analyz
# --report 生成靜態報告文件
yarn run report