Vue-CLI 2 => Vue-CLI 3 升級囉~~

之前是從Vue-CLI 2開始接觸網頁這一塊的，最近不久Vue-CLI 3推出之後一直考慮是否要升級，希望能無痛轉移哈哈，考慮了一陣子還是該踩踩坑啦!!順便剛好手邊有機會來著手碰碰Vue-CLI 3直接支援的PWA(目前頭痛不願面對阿~~~)。

安裝:

---

Vue CLI v3 要求 Node.js V8 或更高版本(建議版本 8.10.0+ )。

能使用npm或yarn進行安裝，我自己是用npm~

npm install -g @vue/cli

or

 yarn global add @vue/cli

安裝完後可透過

 vue -V

來確認版本是否為3.0

建立新專案:

---

以前是透過

vue init my-project

來建置新專案，而Vue CLI 3則改成使用

vue create my-project

來代替原本舊的寫法。

接下來開始安裝畫面:詢問安裝套件(我選擇自選)

然後開始選擇想要的套件(我有選擇pwa剛好可以練練，其他router、vuex我習慣手動裝)

詢問配置文件要獨立還是放package.json

是否記住這些選項

過來就等待安裝啦~~接下來要開專案囉。

cd my-project
npm run serve

不再是以前的

npm run dev

我們執行指令之後，Vue-CLI會啟動一個http服務，可以從localhost打開。然後我們打開網頁。

而和之前一樣若要把程式碼打包，丟server讓網頁上架一樣的指令，把程式碼build到dist資料夾。

npm run build

vue.config.js 設定:

---

會發現以前的webpack.config.js不見了!!沒錯被隱藏起來了，假如有要改配置的話要手動新增
vue.config.js放在根目錄中(假如沒有要改就不用手動就用預設)。
相關配置請查詢官方設定請按這裡。(底下為示範)

module.exports = {
baseUrl: '/',
outputDir: 'dist',
compiler: false,
chainWebpack: () => {},
configureWebpack: () => {},
vueLoader: {},
devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: null, // string | Object
    before: app => {
    }
  },
}

以上大概就是新版CLI3的建立過程，雖然還有很多東西~~不過基本從這裡開始，剩下的大家一起努力挖掘吧!!!!!!!!!(歡迎討論與教導我這越級打怪的菜鳥)。