哈囉各位！今天我們要來聊聊 Vue.js 與 Vue Cli 的安裝呦
這兩個都是操作 vue 的必要條件呢，所以將它們放在一起跟各位介紹：

安裝前的準備

首先呢，在安裝 Vue.js 跟 Vue Cli 之前我們需要先安裝好 node.js 與 npm

那相信看到這裡的各位都有安裝好 node.js 了吧，沒看過的話，要打屁股喔 ╰(‵□′)╯
趕快去複習啦，來！傳送門都幫你們準備好了 -----> node.js 安裝教學。

好的 ~ 看來都安裝好 node.js 了吧，接下來我們就要來安裝 Vue.js 囉

Vue.js 安裝

那第一步呢，就是要打開我們的終端機 (命令提示字元)。

再來，創一個我們的專案資料夾：mkdir NewVue，並進入該目錄：cd NewVue。

進來後，直接在此目錄安裝我們 Vue.js 即可。指令：npm install vue

像這樣，就是我們安裝成功啦，接下來就是要進入對於 Vue 來說很重要的 Vue Cli 安裝

那在這之前我們需要先跟各位介紹一下 Vue Cli 是甚麼吧！

Vue Cli 簡介

Vue CLI的全名是「Vue.js Command-Line Interface」，是用來提供給開發者快速建置Vue.js 專案並整合相關工具的一套command line工具。

而 Vue Cli 是由 Vue 的核心團隊所建構的工具，可以讓我們在建立 Vue 專案時更加快速有效率。而 Vue Cli 除了有完整的 Vue 結構外，也已經將 webpack 等這種前端常用的套件安裝完成。

且 Vue Cli 不僅可安裝多種第三方套件，也能運行 Sass、Bebal 等編輯工具。還包含了獨立的 .Vue 檔案，包含 <template>、<script>、<style>。且開發者也能在開發時使用本地伺服器，這樣的功能讓我們能在開發時隨時預覽開發後的成果，且能在我們將開發完成的程式發布為正式版本前，幫我們將程式最小化，進而提高效能。

那我們就總結一下使用 Vue Cli 的好處：

1. 如開發環境較為複雜，可透過 Vue Cli 去整合，並且提高效率
2. 套件使用多，可以方便管理
3. 將前後端分離，更符合開發者去開發

而在 Vue Cli 中 webpack 是一個很重要的一環，這邊我們就稍微介紹一下他

webpack

Webpack 可以去整合各式工具並運行各種環境，以下就來看看它的功能吧！

Webpack 整合的工具：

Sass ( CSS預處理器 )、BABEL ( JavaScript編譯器 )、ESlint ( 程式碼檢視工具 )，開發過程中產生的 Sass 檔案、JavaScript 檔案、Vue 檔案，再由 Webpack 產生出能運行的 HTML、CSS、Js 檔案。

Webpack 整合的開發環境：

1. 編譯各種語言，編譯後可以在各種瀏覽器運行
   ( 例如：ES6、ES7、TypeScipt、Sass... 等 )
2. 檢視程式碼品質，確保一致性。
3. Vue 檔案，開發 Vue 元件更為方便。

那接下來就正式進入 Vue Cli 的安裝囉

Vue Cli 安裝

看到這裡的各位，相信對於 Vue Cli 已經有初步的了解了吧
再說一次，還沒安裝好 nodejs 的趕快去安裝，這是一定要的呦!!! 很重要 !!!

好的，那我們就開始吧 ~ 首先呢一樣開啟我們的命令提示字元 (終端機)，
輸入指令：npm install -g @vue/cli，這樣我們就可以下載　Vue Cli　了

像這樣就可以了！
如果不確定有沒有下載成功的話，可以輸入指令：vue -V 查看版本號
如果有出現版本號就是有成喔！

接下來我們就可以來新增專案了

新增專案

首先可以創一個屬於 Vue Cli 的專案資料夾：mkdir [資料夾名稱]
並進入該目錄：cd [資料夾名稱]。
( 如果要直接放本機目錄的，可以跳過此步驟 )

再來，在該資料夾中創建 Vue Cli 的專案，指令：vue create [專案名稱]

接下來，就是要回答他一系列的問題，去幫助我們建立專案需要的元件，準備好就開始

首先，Vue Cli 會詢問我們此專案是要安裝哪種 Vue？
( 可以透過上下方向鍵去選擇，接著 Enter 即可 )

而我們可以選擇的是：
預設的 Vue2.x Default([Vue 2] babel, eslint)
預設的 Vue3.x Default (Vue 3) ([Vue 3] babel, eslint)
手動自訂選擇版本與相關套件設定 Manually select features

我選擇的是 Manually select features ( 手動自訂選擇版本與相關套件設定 )。

再來，Vue Cli 會提供你各種想安裝的的選項，可以透過上下方向鍵移動、空白鍵選定。
(如果希望安裝的是 Vue 3.x 的版本，就一定要勾選 Choose Vue version 的選項)

選定後 Enter 即可

我選擇的是 Babel、 TypeScript、 Vuex、Linter 。

接著，選擇我們想要啟動項目的 Vue.js 版本

有第三版和第二版可以選擇

我選擇的是 3.x ( 第三版 )。

如有選擇 Babel 的話，Vue Cli 將會循問希望把相關套件的設定放在哪裡？

通常我們會放在 package.json 裡統一管理
如果想各自獨立的話請選擇 In dedicated config files，選擇完 Enter 即可。

我選擇的是 In package.json。

接著，我們可以選擇是否使用類風格的組件語法？
可以輸入『 y 』( 是 )，或輸入『 N 』( 否 )。

我選擇的是 y ( 是 )。

最後，Vue Cli 會詢問我們是否要儲存先前的設定，以便於下次專案使用？

可以輸入『 y 』儲存，或輸入『 N 』不儲存，之後按下 Enter 後即可。
接著就要等一下囉，我們的 Vue Cli 就會開始安裝了~

像這樣就是安裝成功了！可以看到畫面上，系統提示了我們：

1. 先進入專案目錄
2. 接著指令執行：『 cd vuecli-project』來啟動專案。

只要照做就可以囉，首先我們先進入我們的專案，指令：cd [專案名稱]

接著啟動我們的新專案，指令：npm run serve

出現這樣的畫面，就代表我們成功啦！啟動後，可以看到畫面上有兩串網址
打開我們的瀏覽器，並輸入網址： http://localhost:8080/

可以看到我們的網頁上會出現上圖的畫面，恭喜各位！我們成功建立了一個 Vue Cli 專
這也代表我們已經成功的在目前的主機啟動了一個網頁伺服器。

最後，也要跟各位分享另一個超簡單建立 Vue 專案的方法。

Vue 圖形化的管理介面

真的超簡單！！！只需要一行指令立馬成功喔
首先，一樣打開我們的命令提示字元 (終端機)，毫不猶豫地輸入：vue ui。

接著也不用輸入網址，等待幾秒後瀏覽器就打開了，是不是真的很簡單呢！

登愣，這就是我們的圖形化管理介面，可以依照自己的需求去建立專案喔！

好啦，那我們今天對於 Vue Cli 的介紹與安裝教學就到這裡結束拉 ~
明天再來仔細的跟大家介紹 Vue Cli 的檔案結構與部署專案。
那相信大家也都很累了！要好好休息呦，那我們一樣明天見拉，886