一、下載安裝node.js
1、Node.js 官方網站下載:https://nodejs.org/en/
2、傻瓜式安裝
雙加安裝包,除了根據自己的需要選擇安裝位置外,都默認下一步。
3、驗證安裝
打開cmd,分別輸入node –v和 npm –v 都有相應的版本輸出,說明安裝成功。
二、配置npm
1、配置npm的全局模塊安裝路徑和cache路徑
(1)在node.js安裝目錄下新建兩個文件夾 node_global和node_cache,然后在cmd命令下執行如下兩個命令:
npm config set prefix "D:\MyProgram\nodejs\node_global"
npm config set cache "D:\MyProgram\nodejs\node_cache"
注:"D:\MyProgram\nodejs\"是我的nodejs的安裝目錄,根據自己的安裝目錄設置。
(2)編輯用戶變量里的path,將相應npm的路徑改為:D:\MyProgram \nodejs\node_global,如下圖所示:
(3)在cmd命令下執行 npm install webpack -g ,安裝成功后可以看到webpack已經安裝到自己設置的node_global目錄下。
2、切換淘寶npm鏡像源
國內直接使用npm 的官方鏡像是非常慢的,網上很多使用cnpm來代替npm的方法,但是這樣很多時候需要使用cnpm命令。我們可以設置把npm的鏡像源設置為淘寶的,以后就可以直接使用npm命令了,其實本質上是一樣的。
在cmd中執行命令:npm config set registry https://registry.npm.taobao .org
輸入命令:npm config get registry 來檢測是否設置成功。
3、全局安裝vue-cli工具
cmd中執行命令:npm install vue-cli –g
三、創建Vue項目
1、使用vue初始化基於webpack的新項目:vue init webpack vue_demo,初始化過程中會有一些選項,可以按照自己的需求進行選擇。
2、創建完成后進入Vue項目目錄:cd vue_demo
3、執行命令:npm install
4、啟動:npm run dev
5、瀏覽器中訪問: http://localhost:8080/ 可以看到效果。