一張圖教你快速玩轉vue-cli3

前言

本文系統的梳理了vue-cli3搭建項目的常見用法，目的在於讓你快速掌握獨立搭建vue項目的能力。你將會了解以下知識點：

• 如何安裝項目插件
• 添加瀏覽器支持
• 如何配置scss/stylus共享全局變量
• 如何整合elementUI等第三方框架並實現按需引入
• 配置單/多頁面
• 如何配置自定義環境變量
• 如何在vue.config.js定製本身的webpack
• vue項目部署

說明

本文末尾會給出一個以上提到的全部功能的一個配置文件，可供你們學習參考。

思惟導圖

接下來，咱們根據思惟導圖，一步步來解釋和實現咱們的目標。

1.安裝項目插件

vue add @vue/cli-plugin-eslint
# 或
vue add xjFile
複製代碼

vue add 的設計意圖是爲了安裝和調用 Vue CLI 插件。對於普通的 npm 包而言，咱們仍然能夠（根據所選的 npm 包）使用包管理器。最後能夠在vue.config.js作webpack自定義配置

2.添加瀏覽器支持

1. browserslist

咱們能夠經過package.json 文件裏的 browserslist字段或一個單獨的 .browserslistrc 文件來指定項目的目標瀏覽器的範圍。這個值會被 @babel/preset-env 和 Autoprefixer 用來肯定須要轉譯的 JavaScript 特性和須要添加的 CSS 瀏覽器前綴

例如：

// .browserslistrc
> 1%
last 2 versions
複製代碼

想要獲取更多browserslist，可移步browserslist

2. Polyfill

默認狀況下，cli會把 useBuiltIns: 'usage' 傳遞給 @babel/preset-env，這樣它會根據源代碼中出現的語言特性自動檢測須要的 polyfill。這確保了最終包裏 polyfill 數量的最小化。可是若是其中一個依賴須要特殊的 polyfill，默認狀況下 Babel 沒法將其檢測出來。咱們能夠經過以下三種方式解決此類問題：

• 將依賴添加到 vue.config.js 中的 transpileDependencies 選項

// vue.config.js
module.exports = {
    // 默認狀況下 babel-loader 會忽略全部 node_modules 中的文件。若是你想要經過 Babel 顯式轉譯一個依賴，能夠在這個選項中列出來
    transpileDependencies: ['glob']
}
複製代碼

• 可使用 @vue/babel-preset-app 的 polyfills 選項預包含所須要的 polyfill

// babel.config.js
module.exports = {
  presets: [
    ['@vue/app', {
      polyfills: [
        'es6.promise',
        'es6.symbol'
      ]
    }]
  ]
}
複製代碼

• 使用 useBuiltIns: 'entry' 而後在入口文件添加 import '@babel/polyfill',這種方式的問題就是會增長包的大小

3.配置scss/stylus共享全局變量

對與scss，可使用以下方式開啓：

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // 這裏假設你有 `src/variables.scss` 文件
        data: `@import "~@/variables.scss";`
      }
    }
  }
}
複製代碼

對於stylus，本人親測使用如上方式無效，能夠經過以下方式實現：

vue add style-resources-loader

// vue.config.js
const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      'patterns': [
        path.resolve(__dirname, 'src/styles/abstracts/*.styl'),
      ]
    }
  }
}
複製代碼

4.整合elementUI等第三方框架並實現按需引入

1. 安裝babel-plugin-component

npm install babel-plugin-component -D
複製代碼

2. 配置babel.config.js

module.exports = {
  presets: [
    '@vue/app',
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
複製代碼

此時便可按需引入element組件，優化項目體積了。

5.配置單/多頁面

vue-cli默認單頁面結構，咱們能夠經過配置文件來將項目配置成多頁面：

// vue.config.js
const path = require('path')
module.exports = {
  // 單/多頁面
    pages: {
        index: {
          // page 的入口
          entry: 'src/home/main.js',
          // 模板來源
          template: 'public/index.html',
          // 在 dist/index.html 的輸出
          filename: 'index.html',
          // 當使用 title 選項時，
          // template 中的 title 標籤須要是 <title><%= htmlWebpackPlugin.options.title %></title>
          title: 'Your Web For PC',
          // 在這個頁面中包含的塊，默認狀況下會包含
          // 提取出來的通用 chunk 和 vendor chunk。
        //   chunks: ['chunk-vendors', 'chunk-common', 'index']
        },
        // 當使用只有入口的字符串格式時，
        // 模板會被推導爲 `public/subpage.html`
        // 而且若是找不到的話，就回退到 `public/index.html`。
        // 輸出文件名會被推導爲 `subpage.html`。
        // subpage: 'src/subpage/main.js'
    },
}
複製代碼

6.如何配置自定義環境變量

你能夠替換你的項目根目錄中的下列文件來指定環境變量：

.env                # 在全部的環境中被載入
.env.local          # 在全部的環境中被載入，但會被 git 忽略
.env.[mode]         # 只在指定的模式中被載入
.env.[mode].local   # 只在指定的模式中被載入，但會被 git 忽略
複製代碼

以下：

// .env.local
APPID=123
VUE_APP_SECRET=secret
複製代碼

若是你想在客戶端側代碼中使用環境變量，變量名因以 VUE_APP_開頭，以下可獲取定義的環境變量：

console.log(process.env.VUE_APP_SECRET)
複製代碼

7.如何在vue.config.js定製本身的webpack

咱們可使用cli支持的鏈式調用，或者自定義調用：

// vue-cli內部webpack配置
    chainWebpack: config => {
        // 設置快捷目錄別名
        config.resolve.alias.set('utils',resolve('../utils'))

        // 修改靜態資源打包方式，下例爲超過10k才用文件導入的方式，不然爲base64.默認爲4k
        // config.module
        // .rule('images')
        // .use('url-loader')
        // .loader('url-loader')
        // .tap(options => Object.assign(options, { limit: 10240 }))
    },
    // webpack自定義配置
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
          // 爲生產環境修改配置...
        } else {
          // 爲開發環境修改配置...
        }
    }
複製代碼

7.vue項目部署

這裏咱們使用shell腳本部署，固然你們也可使用本身熟悉的方式部署：

#!/usr/bin/env sh 
# 當發生錯誤時停止腳本
set -e

# 構建
npm run build

# cd 到構建輸出的目錄
cd dist

git init
git add -A
git commit -m 'deploy'

git push -f git@bitbucket.org:<USERNAME>/<USERNAME>.bitbucket.io.git master

cd -
複製代碼

最後，上一張相對完整的配置清單：

// vue.config.js
// 自定義vue配置
const path = require('path');
const resolve = dir => path.join(__dirname, dir);
// mock數據
const mockData = require('./mock/test.json');

module.exports = {
    // 基本路徑
    publicPath: './',

    // 輸出文件目錄
    // outputDir: 'dist',

    // eslint-loader 是否在保存的時候檢查
    // lintOnSave: true,

    // 單/多頁面
    pages: {
        index: {
          // page 的入口
          entry: 'src/main.js',
          // 模板來源
          template: 'public/index.html',
          // 在 dist/index.html 的輸出
          filename: 'index.html',
          // 當使用 title 選項時，
          // template 中的 title 標籤須要是 <title><%= htmlWebpackPlugin.options.title %></title>
          title: 'OpenCoder For PC',
          // 在這個頁面中包含的塊，默認狀況下會包含
          // 提取出來的通用 chunk 和 vendor chunk。
        // chunks: ['chunk-vendors', 'chunk-common', 'index']
        },
        // 當使用只有入口的字符串格式時，
        // 模板會被推導爲 `public/subpage.html`
        // 而且若是找不到的話，就回退到 `public/index.html`。
        // 輸出文件名會被推導爲 `subpage.html`。
        // subpage: 'src/subpage/main.js'
    },

    // css相關配置
    css: {
        // 是否使用css分離插件 ExtractTextPlugin
        extract: true,
        // 開啓 CSS source maps?
        sourceMap: false,
        // css預設器配置項
        loaderOptions: {
            // stylus: {
            // // @/ 是 src/ 的別名
            // // 因此這裏假設你有 `src/variables.stylus` 這個文件, 不過目前測試無效
            // data: `@import "~@/style/variables.styl";`
            // }
        },
        // 啓用 CSS modules for all css / pre-processor files.
        modules: false
   },


    pluginOptions: {
        // 共享變量
        'style-resources-loader': {
            preProcessor: 'stylus',
            patterns: [
                //這個是加上本身的路徑，
                //注意：試過不能使用別名路徑
                resolve('src/style/variables.styl'),
            ]
        }
    },

    devServer: {
        // 端口
        port: 3000,

        // 配置代理
        proxy: {
            '^/api': {
              target: 'http://localhost:8081',
              ws: true,
              changeOrigin: true
            },
            '^/data': {
              target: 'http://localhost:3000'
            }
        },

        // mock
        before(app){
            app.get('/api/getUser',(req,res,next)=>{
                res.json(mockData);
            })
        }
    },
    // vue-cli內部webpack配置
    chainWebpack: config => {
        // 設置快捷目錄別名
        config.resolve.alias.set('utils',resolve('../utils'))

        // 修改靜態資源打包方式，下例爲超過10k才用文件導入的方式，不然爲base64.默認爲4k
        // config.module
        // .rule('images')
        // .use('url-loader')
        // .loader('url-loader')
        // .tap(options => Object.assign(options, { limit: 10240 }))
    },
    // webpack配置
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
          // 爲生產環境修改配置...
        } else {
          // 爲開發環境修改配置...
        }
    }
}

// babel.config.js
module.exports = {
  presets: [
    '@vue/app',
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

// .browserslistrc
> 1%
last 2 versions

// package.json
{
  "name": "pc",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:serve": "serve -s dist",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "clipboard": "^2.0.4",
    "core-js": "^2.6.5",
    "element-ui": "^2.9.1",
    "register-service-worker": "^1.6.2",
    "serve": "^11.0.2",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-plugin-eslint": "^3.8.0",
    "@vue/cli-plugin-pwa": "^3.8.0",
    "@vue/cli-plugin-unit-mocha": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-eslint": "^10.0.1",
    "babel-plugin-component": "^1.1.1",
    "chai": "^4.1.2",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "style-resources-loader": "^1.2.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vue-cli-plugin-style-resources-loader": "^0.1.3",
    "vue-template-compiler": "^2.6.10"
  }
}

複製代碼

本文梳理了一個最基本的cli3項目配置流程，咱們能夠根據這個思惟導圖，去搭建本身的項目。

本文參考vue-cli官網

如想獲取思惟導圖高清源文件，請掃描下方公衆號：

在公衆號點擊進羣，能夠加入vue學習小組，一塊兒學習前端技術

更多推薦

• 9012教你如何使用gulp4開發項目腳手架

• 如何用不到200行代碼寫一款屬於本身的js框架)

• 讓你瞬間提升工做效率的經常使用js函數彙總(持續更新)

• 使用Angular8和百度地圖api開發《旅遊清單》

• js基本搜索算法實現與170萬條數據下的性能測試

• 《前端算法系列》如何讓前端代碼速度提升60倍

• 《前端算法系列》數組去重

• 如何把控css的方向感

• vue高級進階系列——用typescript玩轉vue和vuex

• 前端三年，談談最值得讀的5本書籍