S01 安裝node(內含npm)

首先，到官網下載長期支持版，截止目前，最新的長期支持版本號是10.16.3

https://nodejs.org/zh-cn/download/

下載完畢后，安裝該文件

這里注明了安裝位置，並且，除了node，默認還會安裝npm

node安裝位置:

/user/local/bin/node

npm安裝位置:

/user/local/bin/npm

在第四步你可以自定義安裝內容

這里選擇你要安裝的內容

安裝完畢

S02 安裝cnpm

npm相當於node的應用商店，但是npm對國內網速不太友好，所以這里需要安裝cnpm換成國內的。

安裝cnpm命令如下：

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm安裝完畢

S03 安裝vue項目腳手架

vue安裝命令如下：

sudo cnpm install -g @vue/cli

這里安裝完畢

需要說明的是，截止目前，這里默認安裝的版本是3.11.0
建議安裝3.x的版本，不太建議使用2.x的版本

注

如果安裝失敗，可以使用以下命令清空 npm緩存

npm cache clean --force

如果你想卸載node以及卸載npm 可以使用以下命令

sudo npm uninstall npm -g
sudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/db/receipts/org.nodejs.*
sudo rm -rf /usr/local/include/node /Users/$USER/.npm
sudo rm /usr/local/bin/node
sudo rm /usr/local/share/man/man1/node.1
sudo rm /usr/local/lib/dtrace/node.d

如果你不放心，可以關機，重啟啟動以下

分別輸入執行node和npm，如果卸載成功，會顯示command not found

Vue項目創建

1) 進入存放項目的目錄
>: cd ***

2) 創建項目
>: vue create 項目名

然后就會顯示如下界面:

首先，按↓ 然后↩︎Enter ，選擇手動配置。

( 🔼 🔽 切換 ) ( 空格選中 ) ( ↩︎Enter 繼續 )

Windows中的界面如下:

Mac中的界面如下：

按照下面

3) 項目初始化
1.選擇 Manually select features
2.選擇 Babel,Router,Vuex,Linter
3.選擇 Y 
4.選擇 ESLint with error prevention only  (不用嚴格代碼規范)
5.選擇 Lint on save
6.選擇 In dedicated config files
7.選擇 N.  (不保留)

注意 : 如果 4.你選擇嚴格模式，項目能運行，但是會飄紅，甚至都不能寫注釋。

項目創建成功后 :

vue項目目錄結構分析

├── v-proj
|	├── node_modules  	// 當前項目所有依賴，一般不可以移植給其他電腦環境
|	├── public			
|	|	├── favicon.ico	// 標簽圖標
|	|	└── index.html	// 當前項目唯一的頁面
|	├── src
|	|	├── assets		// 靜態資源img、css、js
|	|	├── components	// 小組件
|	|	├── views		// 頁面組件
|	|	├── App.vue		// 根組件
|	|	├── main.js		// 全局腳本文件（項目的入口）
|	|	├── router.js	// 路由腳本文件（配置路由 url鏈接 與 頁面組件的映射關系）
|	|	└── store.js	// 倉庫腳本文件（vuex插件的配置文件，數據倉庫）
|	├── README.md
└	└── **配置文件

項目創建之后，可以通過pycharm打開改文件根目錄。
為了能夠正確識別.vue文件需要安裝插件Vue.js，安裝之后，按鈕變成重新啟動IDE，點擊后會重新啟動pycharm。