基於 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 [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 界面上的分析不習慣)
yarn run analyz

# --report 生成靜態報告文件
yarn run report
 

相關鏈接

• vue-cli3官方文檔
• vue-cli 3.0 配置
• chainWebpack
• Vue CLI 3 配置 webpack-bundle-analyzer 插件

原文地址：https://segmentfault.com/a/1190000017040058

vue-cli3 搭建的前端項目基礎模板