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

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

https://nodejs.org/en/

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

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

3.進入安裝目錄創建兩個文件夾: 在nodejs安裝路徑下,新建node_global和node_cache兩個文件夾

目錄樹爲:

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

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

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

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

2、修改系統變量PATH

 

     新增系統變量NODE_PATH

 

 

7、安裝Vue

cnpm install vue -g

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

cnpm install vue-cli -g

 9、新項目的創建

1.打開存放新建項目的文件夾

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

根據模版創建新項目

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

vue init webpack-simple mytest

 

創建後目錄結構爲:

 

安裝工程依賴模塊

定位到mytest的工程目錄下,安裝該工程依賴的模塊,這些模塊將被安裝在:mytest\node_module目錄下,node_module文件夾會被新建,而且根據package.json的配置下載該項目的modules

cd mytest
cnpm install

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

cnpm run dev

 

至此, 哈哈哈  看看瀏覽器輸出吧。

是不是跑起來了。哈哈

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章