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

基於 vue-cli3 搭建的前端模板，clone 本倉庫，便可搭建完成一個新項目的基礎模板，源碼地址，歡迎 star 或 fork

特性

• CSS 預編譯語言：less
• Ajax: axios，作了必定的封裝，詳見 src/services/request.js
• SVG 雪碧圖：vue-svgicon
• 移動 web 的適配方案：引入了 postcss-pxtorem 及 lib-flexible，能夠自由地用 px 去開發
• 經常使用的 js 工具類： cloud-utils
• 引用 style-resources-loader：全局注入相關的less文件，如通用的 variable及 mixins等
• 經常使用的 Less 的 mixins 集合：magicless
• 支持根據 npm scripts，自動生成 component 和 view 功能
• 支持採用TinyPNG node.js API 進行在線壓縮.jpg或.png格式圖片，而且轉換Webp格式文件
• 支持斷網處理

• 支持將 webpack watch mode 編譯後文件自動上傳至指定服務器，並在終端打印入口頁面地址及生成二維碼(靈感來源：@nutui/upload)

  • 運行 vue-cli-service build，以監聽模式（watch mode）啓動編譯，並將編譯後的文件自動上傳到內網服務器 (解決手動上傳不便的問題)
  • 終端（命令行界面）打印出頁面入口地址和二維碼，手機掃碼便可訪問 （解決手機錄入地址不便的問題）
  • 監聽文件，一旦保存修改，增量編譯 （解決全量編譯速度慢的問題）
  • 將編譯後且有變化的文件增量上傳到內網服務器 （解決全量上傳速度慢的問題）
  • 在手機上刷新頁面或從新掃碼便可看到變化

目錄介紹

.
├── build              # 生成壓縮包
├── public             # 靜態資源，不須要 webpack 處理
├── scripts            # npm scripts
└── src
    ├── assets
    │   ├── fonts      # 字體文件
    │   ├── img
    │   ├── js         # 不通過 npm 或 yarn 下載的第三方依賴包
    │   └── less       # reset 樣式，及定義的常量文件等
    ├── components
    │   ├── SendCode   # tree shaking 組件
    │   └── global     # 全局註冊組件
    ├── 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

# 自動生成 component
yarn run gen:comp

# 自動生成 view
yarn run gen:view

瀏覽器訪問 http://localhost:3000

其餘

# --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/11...