什麼是 Vue Cli?

它是基於 Webpack 所建置的開發工具
透過 Vue Cli 我們就可以輕鬆的使用各種第三方元件(像是BS4, Vue Router…)
可以運行 Sass, Babel 等編譯工具
便於開發 SPA 的網頁工具
靠簡單設定，就能搭建開發時常用環境

什麼是SPA?

它是由前端所模擬的路由

在SPA的概念下，頁面跟頁面之間的切換，只會更動部分元件，並不會造成整個頁面的重整，
所以，可以讓使用者有更好的體驗。

在SPA的概念底下，也就意味著前端網頁和後端的Web Server是分開的。
後端會提供API的接口，接著，前端會用Ajax來做串接。
當前端透過 Ajax 接受到資料之後，再透過 JavaScript 來變換頁面上的內容。

Vue Cli 的限制

它不便於開發非SPA的網頁，
若你需要開發非SPA的網頁的話，你就直接手動將Vue.js載入你的專案就可以解決這個問題。

如何使用 Vue Cli

Step1. 你要先為你的電腦安裝Node.js的軟件。
Step2. 安裝gulp環境
gulp環境有分為全域和 local
而local就是專屬該專案的環境。

我們先用命令提示字元這個工具，來移動到目標專案的目錄底下
接著，我們要在這個專案底下，安裝global的gulp，
此時，我們要輸入npm install gulp -g
而以上這段指令結尾接-g代表是安裝在全域環境下，
若沒有接這個-g的話，就代表只安裝在這個專案內。

此時，安裝完成後，你的專案資料夾中應該不會出現任何檔案，因為，你是用全域的方式在安裝。
若你是用local的方式安裝的話，你的專案資料夾裡面就會出現一個叫node_modules的資料夾。

經過以上的步驟，就完成在你的電腦中，安裝node.js以及安裝gulp的環境囉。

step3. 在你的Vue的專案檔目錄中，接著輸入node -v指令，先確認你的node的版本是否有高過 Vue 官方文件限定的node版本，若有就可以繼續往下下面的步驟。

step4. 接著，在命令提示字元中輸入 npm install -g vue-cli
然後，它就會開始安裝vue-cli的套件。

step5. 安裝完成之後，你就輸入vue，接著，它就會跳出來，你可以用哪些vue的指令。
你就輸入vue list，
此時，會跳出來vue提供的幾種樣板可以使用，那課堂上是使用webpack這個樣板。

step6. 你就輸入vue init webpack vuewebpack的指令
在以上的指令最後一個vuewebpack是你想為專案資料夾取的名稱，你就自取吧。
接下來，會跳出幾個選項要你選擇，
其中，比較重要的是
Use ESLint to lint your code?
這個選項是表示，要在ESLint環境下，寫code嗎?
如果，你對 ES6 的規範還不熟的話，可以先選 no，不安裝 ESLint，不然，當你撰寫的內容不符合 ESLint 的規則時，你會不知道怎麼修改，在開發上會比較礙手礙腳。
最後，它有說要不要自動執行npm install，這邊課堂上是直接建議用第三個選項，也就是自己安裝囉。

npm install 安裝錯誤小插曲

有關於一直無法成功運行vue環境的問題，
我直接先將全部專案刪掉，按照課堂上的步驟安裝。
但是，唯一不同的部分是選擇npm install的步驟，是要自己安裝還是要編譯器自動安裝，
我改用讓編譯器自動安裝之後，就可以運行vue了。

會發生不能運行vue的主要原因，都是因為發生"Cannot find module webpack-cli/bin/config-yargs"錯誤，
這個發生原因主要是因為webpack的版本太高造成它跟 webpack-dev-server 互相衝突，
但是，我把它刪掉在安裝比較舊的版本還是會出錯，乾~~~~~~~~~~`
所以，
最後我就讓編譯器自己執行npm install安裝環境，就Ok了。

step7. 接下來你就依序輸入它上面的提示指令

第一步，移動到你的 Vue 專案資料夾中，
那這邊 cd vuewebpack 指令中的 vuewebpack 是我的資料夾名稱喔，
第二步，npm install 它會安裝，相關的套件。
最後，安裝完成後，你就輸入npm run dev，它就會開始運行了，
接著，你的命令提示字元會跳到以下的畫面，跳出http://localhost:8080
接著，你就去你的瀏覽器輸入http://localhost:8080 ，就會跳出以下畫面，

就代表你的vue cli套件安裝成功囉~~

當你離開Vue的專案的時候，下一次，要怎麼重新回去回到http:\localhost:8080?

首先，你用cmd進到你那個有安裝vue cli 的專案檔中，
接著，直接輸入npm run dev，此時，就又會跳出http:\\localhost:8080的提示訊息，接著，你在瀏覽器中輸入http:\\localhost:8080之後，就可以再瀏覽器上看到你的專案畫面囉。

Landy Blog

Vue_Cli_課程筆記