1.使用

npm install -g @vue/cli
# or
yarn global add @vue/cli

檢視版本（是否安裝成功）：vue -V(大寫的V)

11576163-5ebc6d418467d0c4.png

2.命令變化

  Commands:

    create [options] <app-name>      create a new project powered by vue-cli-service // 建立一個由vue-cli-service支援的新專案
    add <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created project // 在已建立的專案中新增外掛
    invoke <plugin> [pluginOptions]  invoke the generator of a plugin in an already created project // 在開發者模式下以零配置執行一個js或vue檔案
    inspect [options] [paths...]     inspect the webpack config in a project with vue-cli-service // 在vue-cli-service的專案中檢查webpack配置
    serve [options] [entry]          serve a .js or .vue file in development mode with zero config // 簡單理解為開發環境下啟動命令
    build [options] [entry]          build a .js or .vue file in production mode with zero config // 在生產模式下以零配置構建一個js或vue檔案
    init <template> <app-name>       generate a project from a remote template (legacy API, requires @vue/cli-init) // 舊api 需要@vue/cli-init // 就是原來的vue-cli init <template> <app-name>
 

3.建立一個專案
新建資料夾，在該資料夾下開啟命令視窗，輸入以下命令，
vue create project-name
這時你會看見

Vue CLI v3.0.0-beta.6
? Please pick a preset: (Use arrow keys)
> xs-default (vue-router, vuex, stylus, babel, pwa, eslint, unit-jest) // 這是我執行過之後的預設設定，第一次執行create是沒有的
  default (babel, eslint)
  Manually select features

按鍵盤上下鍵選擇預設（default）還是手動（Manually），如果選擇default，一路回車執行下去就行了（注：現在vue-cli3.0預設使用yarn下載），這裡我選擇手動，

11576163-5ce01980491220c1.png

4.選擇配置，這時你會看見一些選項,
你要整合什麼就選就行了，我這裡選個我比較常用的（注：空格鍵是選中與取消，A鍵是全選）

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
 

11576163-6cbc16d02b36888b.png

5.選擇css預處理，這裡我選擇stylus

? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
> SCSS/SASS
  LESS
  Stylus

[email protected]~N}B%IMYN3O.png

6.選擇ESLint + Prettier

? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

11576163-d296d46dc6ca8f36.png

7.選擇語法檢查方式，這裡我選擇儲存就檢測

Vue CLI v3.0.0-beta.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Lint on save // 儲存就檢測
 ( ) Lint and fix on commit // fix和commit時候檢查

1.png

8.選擇單元測試

Vue CLI v3.0.0-beta.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai
  Jest

2.png

9.她會問你 ，把babel,postcss,eslint這些配置檔案放哪，這裡隨便選，我選擇放在獨立資料夾

Vue CLI v3.0.0-beta.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files // 獨立檔案放置
  In package.json // 放package.json裡

3.png

10.鍵入N不記錄，如果鍵入Y需要輸入儲存名字，如第一步所看到的我儲存的名字為xs-default

Vue CLI v3.0.0-beta.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (Y/n) // 是否記錄一下以便下次繼續使用這套配置

11.確定後，等待下載依賴模組

4.png

12.裝好後，啟動

cd vue-pro3.0-demo // 進入專案根目錄
yarn serve // 啟動專案

5.png

13.專案目錄，現在的目錄是3.0的cli看上去簡潔多了，去掉了2.0 build和config等目錄

)Y_Z_RSKOTQNM%5MAH55`A9.png

14.修改埠，在根目錄下建立vue.config.js

ARAM73G_ZUA)9$HYSZJRFQG.png

devServer: {
        open: process.platform === 'darwin',
        host: '0.0.0.0',
        port: 1234,
        https: false,
        hotOnly: false,
        // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy
        proxy: null, // string | Object
        before: app => {}
    },

6.png

作者：我友幾個逗逼
連結：https://www.jianshu.com/p/fbcad30031c2
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。

打包上線

在開發完專案之後，就應該打包上線了。 vue-cli 也提供了打包的命令，在專案根目錄下執行：

npm run build

執行完之後，可以看到在專案根目錄下多出了一個 dist 目錄，該目錄下就是打包好的所有靜態資源，直接部署到靜態資源伺服器就好了。

實際上，在部署的時候要注意，假設靜態伺服器的域名是 http://static.baidu.com ，那麼對應到訪問 <專案根目錄>/dist/index.html 的 URL 一定要是 http://static.baidu.com/index.html ，其他的靜態資源以此類推。

單元測試

執行：

npm run test

 專案配置 Vue.config.js

我們發現之前的build和config資料夾不見了，那麼應該如何配置 如webpack等的配？？？

不用擔心，只需要在專案的根目錄下新建 vue.config.js 檔案（是根目錄，不是src目錄）

module.exports = {
 // 基本路徑
 baseUrl: '/',
 // 輸出檔案目錄
 outputDir: 'dist',
 // eslint-loader 是否在儲存的時候檢查
 lintOnSave: true,
 // use the full build with in-browser compiler?
 // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
 compiler: false,
 // webpack配置
 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
 chainWebpack: () => {},
 configureWebpack: () => {},
 // vue-loader 配置項
 // https://vue-loader.vuejs.org/en/options.html
 vueLoader: {},
 // 生產環境是否生成 sourceMap 檔案
 productionSourceMap: true,
 // css相關配置
 css: {
  // 是否使用css分離外掛 ExtractTextPlugin
  extract: true,
  // 開啟 CSS source maps?
  sourceMap: false,
  // css預設器配置項
  loaderOptions: {},
  // 啟用 CSS modules for all css / pre-processor files.
  modules: false
 },
 // use thread-loader for babel & TS in production build
 // enabled by default if the machine has more than 1 cores
 parallel: require('os').cpus().length > 1,
 // 是否啟用dll
 // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
 dll: false,
 // PWA 外掛相關配置
 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
 pwa: {},
 // webpack-dev-server 相關配置
 devServer: {
  open: process.platform === 'darwin',
  host: '0.0.0.0',
  port: 8080,
  https: false,
  hotOnly: false,
  proxy: null, // 設定代理
  before: app => {}
 },
 // 第三方外掛配置
 pluginOptions: {
  // ...
 }
}
舉個栗子

上圖內容做了兩塊內容，經測試沒有問題

   1.將啟動埠設定為 8080

   2.設定路徑別名