vue-cli3腳手架的使用和相關配置

前言

經過 @vue/cli 搭建交互式的項目腳手架。
經過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發。
一個運行時依賴 (@vue/cli-service)，該依賴：

可升級；
基於 webpack 構建，並帶有合理的默認配置；
能夠經過項目內的配置文件進行配置；
能夠經過插件進行擴展。

一個豐富的官方插件集合，集成了前端生態中最好的工具。
一套徹底圖形化的建立和管理 Vue.js 項目的用戶界面。
Vue CLI 致力於將 Vue 生態中的工具基礎標準化。它確保了各類構建工具可以基於智能的默認配置便可平穩銜接，這樣你能夠專一在撰寫應用上，而沒必要花好幾天去糾結配置的問題。與此同時，它也爲每一個工具提供了調整配置的靈活性，無需 eject。

快速建立一個項目

1. 安裝vue-cli3;

注意vue-cli3要求node版本8或者更高以上，（推薦8.10.0+）
安裝命令 npm install –g @vue/cli
或者 cnpm install –g @vue/cli 或者 yarn global add @vue/cli
檢測是否安裝成功

1. 建立項目：

vue create hello-world

第一次建立的時候應該以後後面兩個選項，defalut是默認的，包含了babel和eslint; Manually select features是能夠手動選擇所須要的插件；而demo是做者以前配置過的，保留下來的配置；

按上下箭頭選擇配置，空格鍵選中,選擇完成後，回車鍵繼續，會依次問詢你所選插件的配置，

vue-router選擇模式

所用的css預處理語言,我選擇了sass;

選擇的代碼風格和格式校驗

代碼校驗方式，我選擇了保存即校驗，也能夠在add和commit的時候校驗；

在哪裏保存配置我這些插件的配置，我選擇了獨立文件

是否保存爲保存爲一個未來可複用的 preset；
選擇完畢以後開始安裝插件：

看一下安裝完成的項目目錄

安裝完成以後，cd hello-world,進入文件夾，npm run serve啓動項目；
你也可使用圖形化界面
能夠經過 vue ui 命令以圖形化界面建立和管理項目：

不作重點講解；

vue.config.js

配置api的地址配置參考#
項目搭建完成，由於 vue-cli 3 的項目初始化，幫開發者已經解決了 80% ，甚至絕大部分情形下的 webpack 配置。但開發過程當中不免要遇到須要開發者本身配置的點東西，那咱們要如何配置呢，這點就須要在項目根目錄下手動新建一個 vue.config.js，此處我提供的一個咱們項目中的經常使用模版；針對如下選項作大概的講解；

const path = require('path')
const webpack = require('webpack')
module.exports = {
  // 修改output.path
  outputDir: 'dist',
  // 修改output.publishPath
  baseUrl: './',
  chainWebpack: config => {
    // 添加全局scss文件
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => {
      config.module.rule('scss').oneOf(type).use('style-resource')
        .loader('style-resources-loader')
        .options({
          patterns: [
            path.resolve(__dirname, 'src/css/base.scss')
          ]
        })
    })
    // 移除 prefetch 插件 //預加載
    config.plugins.delete('prefetch')
    // 引入
    const chunkFolder = process.env.NODE_ENV !== 'production' ? 'debug' : 'dist'
    config.plugin('dll-reference-plugin')
      .use(webpack.DllReferencePlugin)
      .tap(options => {
        options[0] = {
          context: __dirname,
          manifest: require(path.join(__dirname, `./src/common_chunk/${chunkFolder}/manifest.json`))
        }
        return options
      })
    config.plugin('add-asset-html-webpack-plugin')
      .use('add-asset-html-webpack-plugin')
      .tap(options => {
        options[0] = {
          filepath: path.resolve(__dirname, `./src/common_chunk/${chunkFolder}/lib_*.js`)
        }
        return options
      })
  }
}

baseUrl：從 Vue CLI 3.3 起已棄用，請使用publicPath
publicPath

Type: string
Default: '/'
部署應用包時的基本 URL。用法和 webpack 自己的 output.publicPath 一致，可是 Vue CLI 在一些其餘地方也須要用到這個值，因此請始終使用 publicPath 而不要直接修改 webpack 的 output.publicPath。默認狀況下，Vue CLI 會假設你的應用是被部署在一個域名的根路徑上，例如 http://shop.ktvsky.com/。若是應用被部署在一個子路徑上，你就須要用這個選項指定這個子路徑。例如，若是你的應用被部署在 http://shop.ktvsky.com/vue/，則設置 publicPath 爲 /vue/。
也可使用相對路徑 './',這樣這樣打出來的包能夠被部署在任意路徑
相對路徑的打包後的

絕對路徑

outputDir

Type: string 
Default: 'dist'
當運行 vue-cli-service build 時生成的生產環境構建文件的目錄。注意目標目錄在構建以前會被清除 (構建時傳入 --no-clean 可關閉該行爲)。

chainWebpack
咱們將在下篇文章裏詳細講述 chainWebpack的使用https://segmentfault.com/a/11...；
官方文檔 https://cli.vuejs.org/zh/guid...