好長一段時間沒有關注vue腳手架了，昨天因為需要個後臺模板，用腳手架
搞了一下，竟然發現指令不能用了，看官方文件已經升級3.0，也是試的玩了一下，
大致寫寫怎麼玩的！

1.先全域性安裝vue-cli3.0

檢測安裝：
vue -V

2.建立專案（這個就跟react建立腳手架專案比較像了）

這裡如果你是第一次用3.0版本的話，是沒有前兩個的，而只有最後兩個，這裡是
讓你選的，第一個是預設配置，一般選第二個，自己配置，這裡選擇最後一個

當你選擇後會出現上面圖上的東西，這裡你可以自由選擇用哪些配置，按上下鍵
選擇哪一個，按空格鍵確定，所有的都選擇好後，按enter鍵進行下一步，這裡
演示，我隨便選了幾個
 

下一步之後問詢問你安裝哪一種 CSS 預處理語言，你隨意選擇，我是一直用的less

上面這個是問你選擇哪個自動化程式碼格式化檢測，配合vscode編輯器的
Prettier - Code formatter外掛，我選的隨後一個

這裡第一個選項是問你是否儲存剛才的配置，選擇確定後你下次再建立新專案
就有你以前選擇的配置了，不用重新再配置一遍了

上邊這倆意思問你像，babel,postcss,eslint這些配置檔案放哪？
第一個是：放獨立檔案放置
第二個是：放package.json裡
這裡推薦放單獨配置檔案，選第一個

上邊倒數第二行問你是否將以上這些將此儲存為未來專案的預配置嗎？
最後一個是描述專案，你隨意選擇，點選確定就開始下載模板了
 

下載好後，專案結構就變成這樣了，相比2.0精簡了很多，
然後cd 進專案，啟動服務npm run serve,
這裡發現少了vue.config.js檔案，那以前的配置怎麼搞？

上邊是2.0的目錄結構

這個是3.0的目錄結構,比2.0少了好多，這些都放在@vue/檔案下了，你可以開啟看看

下邊你要做的就是在根目錄下新建一個vue.config.js檔案，進行你的配置，具體配置看文件，我在最下邊簡單羅列了幾個

當然如果你不想用3.0的話，還是可以繼續使用2.0的,官方文件是這樣說的：

這裡簡單羅列vue,config.js一些配置項
當然你配置介面地址時還是通過下邊這個來獲取
在main.js
 
裡或者單獨配置介面地址的檔案裡：
var env = process.env.NODE_ENV
console.log(env)

// vue.config.js 配置說明
// 這裡只列一部分，具體配置慘考文件啊
module.exports = {
    // baseUrl  type:{string} default:'/' 
    // 將部署應用程式的基本URL
    // 將部署應用程式的基本URL。
    // 預設情況下，Vue CLI假設您的應用程式將部署在域的根目錄下。
    // https://www.my-app.com/。如果應用程式部署在子路徑上，則需要使用此選項指定子路徑。例如，如果您的應用程式部署在https://www.foobar.com/my-app/，集baseUrl到'/my-app/'.

    baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',

    // outputDir: 在npm run build時 生成檔案的目錄 type:string, default:'dist'

    // outputDir: 'dist',

    // pages:{ type:Object,Default:undfind } 
/*
  構建多頁面模式的應用程式.每個“頁面”都應該有一個相應的JavaScript條目檔案。該值應該是一
  個物件，其中鍵是條目的名稱，而該值要麼是指定其條目、模板和檔名的物件，要麼是指定其條目
  的字串，
  注意：請保證pages裡配置的路徑和檔名 在你的文件目錄都存在 否則啟動服務會報錯的
*/
    // pages: {
        // index: {
            // entry for the page
            // entry: 'src/index/main.js',
            // the source template
            // template: 'public/index.html',
            // output as dist/index.html
            // filename: 'index.html'
        // },
        // when using the entry-only string format,
        // template is inferred to be `public/subpage.html`
        // and falls back to `public/index.html` if not found.
        // Output filename is inferred to be `subpage.html`.
        // subpage: 'src/subpage/main.js'
    // },

    //   lintOnSave：{ type:Boolean default:true } 問你是否使用eslint
    lintOnSave: true,
    // productionSourceMap：{ type:Bollean,default:true } 生產源對映
    // 如果您不需要生產時的源對映，那麼將此設定為false可以加速生產構建
    productionSourceMap: false,
    // devServer:{type:Object} 3個屬性host,port,https
    // 它支援webPack-dev-server的所有選項

    devServer: {
        port: 8085, // 埠號
        host: 'localhost',
        https: false, // https:{type:Boolean}
        open: true, //配置自動啟動瀏覽器
        // proxy: 'http://localhost:4000' // 配置跨域處理,只有一個代理
        proxy: {
            '/api': {
                target: '<url>',
                ws: true,
                changeOrigin: true
            },
            '/foo': {
                target: '<other_url>'
            }
        },  // 配置多個代理
    }
}