vue-cli 3.x 使用

一直使用vue-cli 2.x來搭項目，最近看文檔已經升級到3.0了，先試着安裝一下
目前使用的npm v6.4.0,node v10.5.0

安裝

npm install -g @vue/cli

檢測安裝： vue -V

創建項目

vue create hello-world

默認配置，還是自己配置（一般選第二個）
黃色的字提示，npm太慢了，要不要使用淘寶鏡像，可裝可不裝（混用有時會出現問題，速度快點）

按空格選擇要安裝的配置，然后按enter下一般
如果不使用CSS 預處理器就不要選CSS Pre-processors

路由是否設置history模式，一般選是，默認hash模式，地址上會帶#號

你安裝哪一種 CSS 預處理器

選擇哪個自動化代碼格式化檢測

保存就檢測，還是是 fix 和 commit 的時候檢測

配置文件放獨立文件里，還是放package.json里？（推薦放單獨配置文件）

是否將以上這些將此保存為未來項目的預配置嗎？選擇是，下次再創建新項目 就有你以前選擇的配置了，不用重新再配置一遍了

下載完成后，項目結構相比2.0精簡了很多， 然后cd 進項目，啟動服務變成了npm run serve，webpack 的配置沒有有了，需要在根目錄下新建一個 vue.config.js 文件，進行你的配置。

手動配置 webpack
這里只列一部分，具體配置慘考文檔 https://cli.vuejs.org/zh/guide/webpack.html

const path = require('path');

module.exports = {
    //baseUrl: '/xxx',// default:'/'
    outputDir: 'dist',// 輸出文件目錄
    lintOnSave: true,// eslint-loader 是否在保存的時候檢查
    productionSourceMap: false,// 如果您不需要生產時的源映射，那么將此設置為false可以加速生產構建

    // css相關配置
    css: {
        extract: true,// 是否使用css分離插件 ExtractTextPlugin
        sourceMap: false,// 開啟 CSS source maps?
        modules: false,        // 啟用 CSS modules for all css / pre-processor files.
        loaderOptions: {// css預設器配置項
            sass: {
                //data: `@import "@/variables.scss";`// 向所有 Sass 樣式傳入共享的全局變量
            }
        }
    },

    // webpack配置
    chainWebpack: () => {},
    configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            // 為生產環境修改配置...
            config.mode = 'production';
        } else {
            // 為開發環境修改配置...
            config.mode = 'development';
        }
    },

    // webpack-dev-server 相關配置
    devServer: {
        port: 8085, // 端口號
        //host: 'localhost',//不設置顯示localhost和ip兩個
        https: false, // https:{type:Boolean}
        open: true, //配置自動啟動瀏覽器
        proxy: {
            '/api': {
                target: 'http://10.71.19.216:10001',
                ws: true,//
                changeOrigin: true
            },
        },
    },
    // 第三方插件配置
    pluginOptions: {
        // ...
    }
};

public 文件夾
public 文件夾的靜態資源都會被簡單的復制，而不經過 webpack。你需要通過絕對路徑來引用它們。
public 目錄提供的是一個應急手段，當你通過絕對路徑引用它時，留意應用將會部署到哪里。如果你的應用沒有部署在域名的根部，那么你需要為你的 URL 配置 baseUrl 前綴：
在模板中，你首先需要向你的組件傳入基礎 URL，然后調用

<img :src="`${baseUrl}my-image.png`">
data () {
  return {
    baseUrl: process.env.BASE_URL
  }
}

如果啟動服務不習慣npm run serve，可以將package.json的serve改成dev