一、官網下載https://nodejs.org/zh-cn/ nodejs安裝包,安裝到自定義路徑。安裝完成後,打開命令提示符窗口,輸入命令:node -v 或者npm -v 出現如下界面表示安裝成功。另外免安裝版的需要自己設置nodejs環境變量
二、設置global和cache路徑
說明:設置路徑能夠把通過npm安裝的模塊集中在一起,便於管理。
1、在nodejs的安裝目錄下,新建node_global和node_cache兩個文件夾,作者的安裝目錄爲“E:\develop\nodejs”,下面命令要改爲自己的目錄
2、設置global和cache
npm config set prefix "E:\develop\nodejs\node_global"
和
npm config set cache "E:\develop\nodejs\node_cache"
設置成功後,後續用命令npm install XXX -g安裝以後模塊就在E:\develop\nodejs\node_global\node_modules裏
三、安裝cnpm
說明:由於許多npm包都是在國外,我們這裏用到淘寶的鏡像服務器,來對我們依賴的module進行安裝,因此首先安裝“中國的npm”——cnpm
參考網址如下:http://npm.taobao.org/
安裝命令爲:
npm install -g cnpm --registry=https://registry.npm.taobao.org
四、添加cnpm環境變量(非常重要) ,不然cnpm命令不會生效
五、用cnpm安裝vue
cnpm install vue -g
五、安裝vue-cli工具 (注意這裏腳手架工具使用的是2版本,三版本有很大的變更。生成的項目結構完全不一樣)
cnpm install vue-cli@2 -g
六、創建工程
用cd命令進入存放工程的目錄,然後建一個基於 webpack 模板的新工程,工程名爲youniwork
1、執行命令 vue init webpack youniwork
2、進入youniwork 目錄下 cd youniwork
3、安裝該工程依賴的模塊,根據package.json的配置下載該項目的modules,這些模塊將被安裝在:E:\develop\nodejs\node_global\node_modules目錄下
cnpm install
七、啓動工程
cnpm run dev
出現下面界面表示啓動成功,在瀏覽器輸入url訪問即可