天天看點

如何從零開發Vue,vue環境安裝。

1. 首先去官網下載下傳 安裝包

​​https://nodejs.org/en/​​

如何從零開發Vue,vue環境安裝。

2. 安裝下載下傳包。直接下一步下一步就行了。

我這裡安裝在了D 盤     D:\Program Files\nodejs 這個目錄

3.進入安裝目錄建立兩個檔案夾: 在nodejs安裝路徑下,建立node_global和node_cache兩個檔案夾

目錄樹為:

如何從零開發Vue,vue環境安裝。

4. 

設定緩存檔案夾

npm config set cache "D:\Program Files\nodejs\node_cache"      

 設定全局子產品存放路徑

npm config set prefix "D:\Program Files\nodejs\node_global"      

設定成功後,之後用指令npm install XXX -g安裝以後子產品就在D:\vueProject\nodejs\node_global裡

5 。基于 Node.js 安裝cnpm(淘寶鏡像)

npm install -g cnpm --registry=https://registry.npm.taobao.org      
如何從零開發Vue,vue環境安裝。

6.設定環境變量(非常重要)

說明:設定環境變量可以使得住任意目錄下都可以使用cnpm、vue等指令,而不需要輸入全路徑

1、滑鼠右鍵"此電腦",選擇“屬性”菜單,在彈出的“系統”對話框中左側選擇“進階系統設定”,彈出“系統屬性”對話框。

2、修改系統變量PATH

     新增系統變量NODE_PATH

如何從零開發Vue,vue環境安裝。
如何從零開發Vue,vue環境安裝。

7、安裝Vue

cnpm install vue -g      

8、安裝vue指令行工具,即vue-cli 腳手架

cnpm install vue-cli -g      
如何從零開發Vue,vue環境安裝。

 9、新項目的建立

1.打開存放建立項目的檔案夾

打開開始菜單,輸入 CMD,或使用快捷鍵 win+R,輸入 CMD,敲回車,彈出指令提示符。打開你将要建立的項目目錄

根據模版建立新項目

在目前目錄下輸入“vue init webpack-simple 項目名稱(使用英文)”。

vue init webpack-simple mytest      
如何從零開發Vue,vue環境安裝。

建立後目錄結構為:

如何從零開發Vue,vue環境安裝。

安裝工程依賴子產品

定位到mytest的工程目錄下,安裝該工程依賴的子產品,這些子產品将被安裝在:mytest\node_module目錄下,node_module檔案夾會被建立,而且根據package.json的配置下載下傳該項目的modules

cd mytest      
cnpm install      

4、運作該項目,測試一下該項目是否能夠正常工作,這種方式是用nodejs來啟動。

cnpm run dev      
如何從零開發Vue,vue環境安裝。