Vue2.x學習筆記：第2章 搭建Vue2.x開發環境的高級方式：基於Vue CLI 3.x的創建

Vue CLI3 編譯速度快，性能好，建議使用。

1、版本區別

關於 Vue CLI3 和 和 Vue CLI2 以及 Vue2.x Vue3.x的區別

注意：Vue CLI 3 是 Vue CLI 2 的升級版本，並不是 Vue3.0 。 Vue3.0 目前還沒有正式發佈。Vue CLI 3 和老版本的 Vue ClI 創建的項目方式是不一樣的， 創建項目的用法是一樣的。Vue CLI 3在項目編譯速度上面做了一些優化。無論你用哪個版 本的 ClI，Vue3.0 發佈之前寫代碼的方式都是一樣的。目前 Vue3.0在去年開放了源碼，並且今年將發出真正的可用於開發的版本

2、舊版本的安裝以及創建項目

Vue2.x學習筆記：第一章 搭建開發環境的兩種方式

3、Vue CLI 3 版本的安裝以及創建項目（推薦 ）

Node 版本要求：Vue CLI 3 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)

3.1 安裝 Vue Cli3腳手架工具：官方命令行工具

npm install -g @vue/cli
或者：cnpm install -g @vue/cli
或者：yarn global add @vue/cli

我們使用：cnpm install -g @vue/cli 進行安裝。

3.2 創建項目

首先cd D:\work\learn 目錄，創建 vue-demo03 工程

vue create vue-demo03

我們cd vue-demo03 目錄運行：npm run serve 看看是否可以運行成功。

小技巧：npm run serve 和 npm run dev的區別：

---

Vue Cli3 採用 npm run serve

Vue Cli2 採用 npm run dev

可以通過修改package.json 即可：

訪問：http://localhost:8080/

成功了。

4 Vue CLI 3 圖形化界面創建項目

4.1 打開界面

運行vue ui 命令，按照提示打開網址：http://localhost:8000，出現如下界面：

4.2 創建項目

點擊創建：

出現如下界面：


選擇手動，下一步

下一步

創建項目，完成創建。

保存預設模板，方便後續創建是直接選擇使用。

這個創建非常慢，默認使用的是npm國外鏡像，不建議使用。