使用@vue/cli 4.5.13創建一個新項目

我看網上很多文章，包括我本地使用的官方腳手架是基於Vue CLI 2的。今天研究了下最新的官方文檔，基於最新的@vue/cli 4.5.13一步步初始化一個項目。

官方文檔：https://cli.vuejs.org/zh/guide/installation.html

node和npm安裝

略

Vue CLI安裝

卸載舊版本

1.如果安裝了舊版本vue-cli，先卸載
sudo npm uninstall vue-cli -g

安裝新版本

2.安裝@vue/cli，使用國內鏡像加速
sudo npm install -g @vue/cli --registry=https://registry.npm.taobao.org

Vue CLI 2橋接工具 (舊版本)

Vue CLI >= 3 和舊版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆蓋了。如果你仍然需要使用舊版本的 vue init 功能，你可以全局安裝一個橋接工具：

npm install -g @vue/cli-init
# `vue init` 的運行效果將會跟 `vue-cli@2.x` 相同
vue init webpack my-project

該兼容舊版本的方式暫未驗證

創建一個項目

使用vue create

1. 運行以下命令來創建一個新項目：

vue create hello-world

2. 手動自定義預設；也可以選擇已保存的預設

• PWA：可以讓網頁支持以類似原生app的方式添加到桌面，可以方便的支持web、桌面和移動端（感覺有點類似electron，不過在操作系統API層面應該有所不及）
• CSS預處理器，sass-loader支持scss/sass，如果選擇sass-loader推薦搭配dart sass（node sass官方不出新功能了）

3. 預設的配置

可以將預設以及配置保存供下次直接使用，配置保存在home 目錄下一個名叫 .vuerc 的 JSON 文件中。

4. 生成的項目的目錄結構：

5. 默認的啟動命令變為npm run serve

使用圖形化界面

1. 你也可以通過 vue ui 命令以圖形化界面創建和管理項目：

vue ui

2. Vue 項目管理器圖形界面

3. 使用圖形界面創建新項目

4. 選擇預設

5. 配置預設中選擇的插件

   略

6. 創建完成

項目自定義配置

vue.config.js配置

以上過程創建的是一個默認配置的項目。在實際使用過程中我們常常需要自定義配置，如更改host、端口等。此時，需要在項目根目錄下創建一個vue.config.js文件。

vue.config.js主要是修改的webpack相關配置，可以使用vue inspect > output.js審查項目的 webpack 配置。

vue.config.js 是一個可選的配置文件，如果項目的 (和 package.json 同級的) 根目錄中存在這個文件，那么它會被 @vue/cli-service 自動加載。你也可以使用 package.json 中的 vue 字段，但是注意這種寫法需要你嚴格遵照 JSON 的格式來寫。

具體配置參考官方文檔：https://cli.vuejs.org/zh/config/

我的配置（持續更新）

// vue.config.js
// 可以使用`vue inspect > output.js`審查項目的 webpack 配置

/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
module.exports = {

  // http://127.0.0.1:8080/dev-path/#/
  // 如果你想把開發服務器架設在根路徑，你可以使用一個條件式的值：
  publicPath: process.env.NODE_ENV === 'production'
    ? '/prod-path/'
    : '/dev-path/',

  // 當運行 vue-cli-service build 時生成的生產環境構建文件的目錄，Default: 'dist'
  outputDir: 'dist',

  // 放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄。Default: ''
  assetsDir: '',

  // 生成的靜態資源在它們的文件名中包含了 hash 以便更好的控制緩存。（要求 index 的 HTML 是被 Vue CLI 自動生成的）。Default: true。
  filenameHashing: true,

  // 是否在開發環境下通過 eslint-loader 在每次保存時 lint 代碼。Default: 'default'
  // 當 lintOnSave 是一個 truthy 的值時，eslint-loader 在開發和生產構建下都會被啟用。如果你想要在生產構建時禁用 eslint-loader，你可以用如下配置：
  // lintOnSave: process.env.NODE_ENV !== 'production',

  // 設置為 true 后你就可以在 Vue 組件中使用 template 選項了。如：new Vue({template: '<div>{{ hi }}</div>'})。Default: false
  runtimeCompiler: true,

  // 如果你不需要生產環境的 source map，可以將其設置為 false 以加速生產環境構建。Default: true
  productionSourceMap: false,

  // webpack配置
  // 如果這個值是一個函數，則會接收被解析的配置作為參數。該函數既可以修改配置並不返回任何東西，也可以返回一個被克隆或合並過的配置版本。
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 為生產環境修改配置...
    } else {
      // 為開發環境修改配置...
    }
  },

  // 允許對內部的 webpack 配置進行更細粒度的修改。
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        // 修改它的選項...
        return options
      })
  },

  // 向 CSS 相關的 loader 傳遞選項，比如你可以這樣向所有 Sass/Less 樣式傳入共享的全局變量：
  // 對於 CSS 相關 loader 來說，這樣做比使用 chainWebpack 手動指定 loader 更推薦，因為這些選項需要應用在使用了相應 loader 的多個地方。
  // css: {
  //   loaderOptions: {
  //     // 給 sass-loader 傳遞選項
  //     sass: {
  //       // @/ 是 src/ 的別名
  //       // 所以這里假設你有 `src/variables.sass` 這個文件
  //       // 注意：在 sass-loader v8 中，這個選項名是 "prependData"
  //       additionalData: '@import "~@/variables.sass"'
  //     },
  //     // 默認情況下 `sass` 選項會同時對 `sass` 和 `scss` 語法同時生效
  //     // 因為 `scss` 語法在內部也是由 sass-loader 處理的
  //     // 但是在配置 `prependData` 選項的時候
  //     // `scss` 語法會要求語句結尾必須有分號，`sass` 則要求必須沒有分號
  //     // 在這種情況下，我們可以使用 `scss` 選項，對 `scss` 語法進行單獨配置
  //     scss: {
  //       additionalData: '@import "~@/variables.scss";'
  //     },
  //     // 給 less-loader 傳遞 Less.js 相關選項
  //     less: {
  //       // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
  //       // `primary` is global variables fields name
  //       globalVars: {
  //         primary: '#fff'
  //       }
  //     }
  //   }
  // },

  // webpack-dev-server配置，所有 webpack-dev-server 的選項都支持
  // 有些值像 host、port 和 https 可能會被命令行參數覆寫;有些值像 publicPath 和 historyApiFallback 不應該被修改。
  devServer: {
    // 熱加載
    hot: true,
    // ip地址
    host: '0.0.0.0',
    // 端口
    port: 8080,
    // false關閉https，true為開啟
    https: false,
    // 自動打開瀏覽器
    open: true,
    /**
     * 如果你的前端應用和后端 API 服務器沒有運行在同一個主機上，你需要在開發環境下將 API 請求代理到 API 服務器。
     * 這會告訴開發服務器將任何未知請求 (沒有匹配到靜態文件的請求) 代理到配置的對應URL
     */
    proxy: {
      '/api': {
        target: 'http://localhost:8081/',
        // 如果要代理 websockets
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }

  // 這是一個不進行任何 schema 驗證的對象，因此它可以用來傳遞任何第三方插件選項。例如：
  // pluginOptions: {
  //   foo: {
  //     // 插件可以作為 `options.pluginOptions.foo` 訪問這些選項。
  //   }
  // }
}

環境變量配置

你可以在你的項目根目錄中放置下列文件來指定環境變量：

.env                # 在所有的環境中被載入
.env.local          # 在所有的環境中被載入，但會被 git 忽略
.env.[mode]         # 只在指定的模式中被載入
.env.[mode].local   # 只在指定的模式中被載入，但會被 git 忽略

例如可以在環境變量文件中，為不同的環境配置不同的調用地址：

• .env.development：

ENV = 'development'

# 接口地址
VUE_APP_BASE_API  = 'http://127.0.0.1:8800/rcc-web'
VUE_APP_WS_API = 'ws://localhost:8800/rcc-web'

# 是否啟用 babel-plugin-dynamic-import-node插件
VUE_CLI_BABEL_TRANSPILE_MODULES = true

• .env.production：

ENV = 'production'

VUE_APP_BASE_API  = 'http://10.13.XX.XX:9091/rcc-web'
VUE_APP_WS_API = 'ws://10.13.XX.XX:9091/rcc-web'

集成Element-UI

可以選擇完整引入或者按需引入，我這里完整引入。
按需引入可以參考官方文檔：https://element.eleme.cn/#/zh-CN/component/quickstart

命令行方式

cd my-project
vue add element

圖形化界面方式

可以使用圖形化界面傻瓜式安裝和配置。

vue ui

在插件標簽頁查找安裝：vue-cli-plugin-element

出現下面的提示和按鈕則安裝elementUI成功：

然后就可以用elementUI組件庫愉快的玩耍啦。