vue-cli 3.0 入門

環境安裝

全新版本的腳手架、逼格非常高、 記住這個名字 @vue/cli ，對就是這個 你npm 或者yarn 安裝就行了，先保證全局環境有它。

   npm install -g @vue/cli

   yarn add global @vue/cli

創建項目

這裏對比下以前2.X之前的版本 ，新版本把插件以及模板等 移植到命令行界面了.

舊版	創建命令
2.x	vue init <template-name> <project-name>
3.x	vue create <project-name>

來一張圖把 ，這裏已經有幾個默認配好的模板了，我們選最後的Manually select features

vue-cli3.0在你創建後會有一個保存當前配置的功能

配置項目插件和功能

這裏就很傻瓜了， 你要集成什麼 就選就行了。我這裏選個我比較常用的。

• TypeScript
• PWA
• Vue-router
• Vuex
• CSS預處理
• eslint prettier
• 自動化測試單元測試 、e2e

這裏我選LESS

這裏我選eslint + prettier

這裏選擇語法檢查的方式 保存就檢查 還是fix和commit時候檢查，我就默認選第一個了

這裏單元測試 插件我選jest

這裏是把babel,postcss,eslint這些配置文件放哪

1. 獨立文件放置
2. 放package.json裏

個人喜好 這裏我獨立放

最後就是選擇 是否記錄一下？ 下次繼續使用這套配置 ，這裏咱就不存了 這玩呢存多了 我都不知道怎麼刪 知道的小哥哥小姐姐麻煩 告訴我下哈。

ok最後確定後 等待裝好吧

嗖 裝好了

啓動項目

1. 進入目錄,啓動項目 這裏 vue-cli 3.x 默認會打開瀏覽器 地址也會打在控制檯。

   yarn serve 
   // OR
   npm run serve

啓動後的界面就不截圖了 ，按步驟正常操作下來應該跟之前版本一樣。

項目分析

首先看下整體目錄 比 2.x之前 是精簡了不少

去掉了2.x build和config等目錄 ,大部分配置 都集成到vue.config.js這裏了

vue.config.js裏
大概包括了配置 常用的輸出路徑名、跟目錄、預處理、devServer配置、pwa、dll、第三方插件等等
詳細配置可以看官方文檔 詳細config配置

module.exports = {
  // 項目部署的基礎路徑
  // 我們默認假設你的應用將會部署在域名的根部，
  // 比如 https://www.my-app.com/
  // 如果你的應用時部署在一個子路徑下，那麼你需要在這裏
  // 指定子路徑。比如，如果你的應用部署在
  // https://www.foobar.com/my-app/
  // 那麼將這個值改爲 `/my-app/`
  baseUrl: '/',

  // 將構建好的文件輸出到哪裏
  outputDir: 'dist',

  // 是否在保存的時候使用 `eslint-loader` 進行檢查。
  // 有效的值：`ture` | `false` | `"error"`
  // 當設置爲 `"error"` 時，檢查出的錯誤會觸發編譯失敗。
  lintOnSave: true,

  // 使用帶有瀏覽器內編譯器的完整構建版本
  // 查閱 https://cn.vuejs.org/v2/guide/installation.html#運行時-編譯器-vs-只包含運行時
  compiler: false,

  // 調整內部的 webpack 配置。
  // 查閱 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
  chainWebpack: () => {},
  configureWebpack: () => {},

  // vue-loader 選項
  // 查閱 https://vue-loader.vuejs.org/zh-cn/options.html
  vueLoader: {},

  // 是否爲生產環境構建生成 source map？
  productionSourceMap: true,

  // CSS 相關選項
  css: {
    // 將組件內的 CSS 提取到一個單獨的 CSS 文件 (只用在生產環境中)
    extract: true,

    // 是否開啓 CSS source map？
    sourceMap: false,

    // 爲預處理器的 loader 傳遞自定義選項。比如傳遞給
    // sass-loader 時，使用 `{ sass: { ... } }`。
    loaderOptions: {},

    // 爲所有的 CSS 及其預處理文件開啓 CSS Modules。
    // 這個選項不會影響 `*.vue` 文件。
    modules: false
  },

  // 在生產環境下爲 Babel 和 TypeScript 使用 `thread-loader`
  // 在多核機器下會默認開啓。
  parallel: require('os').cpus().length > 1,

  // 是否使用 `autoDLLPlugin` 分割供應的包？
  // 也可以是一個在 DLL 包中引入的依賴的顯性的數組。
  // 查閱 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#dll-模式
  dll: false,

  // PWA 插件的選項。
  // 查閱 https://github.com/vuejs/vue-doc-zh-cn/vue-cli-plugin-pwa/README.md
  pwa: {},

  // 配置 webpack-dev-server 行爲。
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    // 查閱 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理
    proxy: null, // string | Object
    before: app => {
      // `app` 是一個 express 實例
    }
  },

  // 三方插件的選項
  pluginOptions: {
    // ...
  }
}

如何隨心所欲

1. 服務器配置修改

這裏我先改個端口, 修改vue.config.js 然後重新啓動工程 , 可以看到已經改成5999端口了

module.exports = {
  lintOnSave: false,
  devServer: {
    port: 5999
  }
}

2. 常用webpack配置修改

webpack的配置在這個屬性裏修改configureWebpack

包括plugins也可以自己擴展 ，本身尤大已經把常用的都封裝了 ，不滿足可以自行擴展。

這裏改個webpack devtool輸出方式、默認那個我屬實不知道怎麼跟蹤代碼

configureWebpack: config => {
    if (process.env.NODE_ENV === 'development') {
        config.devtool = 'source-map'
        // mutate config for production...
    } 
}

其他配置 就不一一介紹了 具體可以看這裏webpack

3. 全局變量的設置

在項目根目錄 創建二個文件

.env.development
.env.production

裏面配置鍵值對就行了

但要注意 這裏必須以VUE_APP開頭

這樣我們就可以自定義個全局變量在某個模式下

VUE_APP_MOCK_URL = 'http://xxxx.xxx.xx.xx/mockjs/'

比如這樣在axios中就可以配置根路徑了

const service = axios.create({
    baseURL: process.env.VUE_APP_MOCK_URL
})

環境變量cli官網配置