Vue CLI 3問世後，因為公司專案緊張，一直沒有機會學習。在專案上線後，本人終於抽出時間來自學一下。下面記錄本人從解除安裝Vue CLI 2更新Vue CLI 3開始，一步步搭建VUE專案，並同時能用Vue CLI 2 啟動Vue CLI 2搭建的專案。

注：本人電腦MAC。

一、解除安裝Vue CLI 2，安裝Vue CLI 3：

1.關於舊版本：

Vue CLI 的包名稱由 vue-cli 改成了 @vue/cli。 如果你已經全域性安裝了舊版本的 vue-cli (1.x 或 2.x)，你需要先通過 npm uninstall vue-cli -g

 或 yarn global remove vue-cli 解除安裝它。

2.Node 版本要求

Vue CLI 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一臺電腦中管理多個 Node 版本。

3.解除安裝安裝

先解除安裝舊版本（npm uninstall vue-cli -g），本人執行後許可權不夠，所以前面加了 sudo；解除安裝後，檢視vue的版本，顯示無此檔案，表示解除安裝成功：

解除安裝成功後，安裝Vue CLI 3（npm install -g @vue/cli）:

安裝成功後，可用下邊命令列檢視版本，我的版本是3.1.0：

vue --version 或 vue -V 

也可用命令：vue，檢視vue相關命令：

 OK，目前為止，Vue CLI 2解除安裝完成，Vue CLI 3也已經安裝成功。

4.想繼續使用Vue CLI2

官網上介紹：

Vue CLI 3 和舊版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆蓋了。如果你仍然需要使用舊版本的 vue init 功能，你可以全域性安裝一個橋接工具：

npm install -g @vue/cli-init
 

 

 安裝成功後，啟動了自己的cli 2專案，結果成功：

到此為止，Vue CLI 3安裝升級完成，併成功啟動了Vue CLI 2。

二、搭建Vue CLI 3專案

1.快速原型開發

官網上寫的清楚明白：

你可以使用 vue serve 和 vue build 命令對單個 *.vue 檔案進行快速原型開發，不過這需要先額外安裝一個全域性的擴充套件：

npm install -g @vue/cli-service-global

vue serve 的缺點就是它需要安裝全域性依賴，這使得它在不同機器上的一致性不能得到保證。因此這隻適用於快速原型開發。

按照官網上的命令，安裝完成@vue/cli-service-global，下邊開始快速原型開發：

1>.僅需建立一個vue檔案：

2>.在app.vue檔案所在的目錄下執行：

vue serve

但是本人執行的時候報錯：

 然後在專案的GitHub中找到了答案【點選檢視】，原來自己的專案中沒有安裝eslint，安裝（我把專案移動到myTest下的serve目錄下了）：

3>.安裝完成後，執行：

大功告成，可看到專案目錄：

開啟網址：

官網上也說的明白：

vue serve 使用了和 vue create 建立的專案相同的預設設定 (webpack、Babel、PostCSS 和 ESLint)。它會在當前目錄自動推匯入口檔案——入口可以是 main.js、index.js、App.vue 或 app.vue 中的一個。你也可以顯式地指定入口檔案：vue serve App.vue。

如果需要，你還可以提供一個 index.html、package.json、安裝並使用本地依賴、甚至通過相應的配置檔案配置 Babel、PostCSS 和 ESLint。

4>.build專案：

成功，目錄中build後生成的檔案：

到此為止，對快速原型開發不做過深探究，完成。

2.建立專案【點選檢視官網教程】

1>.命令列建立

執行（這裡不做手動配置，按照預設配置走）：

vue create hello-world

建立成功：

2>.使用圖形化介面建立管理專案

執行命令：

vue ui

上述命令會開啟一個瀏覽器視窗，並以圖形化介面將你引導至專案建立的流程。

執行：

npm run serve

至此，Vue CLI 3專案算是搭建起來了。完。