vue搭建環(huán)境之windows

一、安裝node.js(https://nodejs.org/en/)


下載完畢后,可以安裝node,建議安裝到D:\vueProject\nodejs

二、設置nodejs prefix(全局)和cache(緩存)路徑

nodejs安裝好之后,通過npm下載全局模塊默認安裝到{%USERDATA%}C:\Users\username\AppData\下的Roaming\npm下,這當然是不太對的默認。

分別設置路徑能夠把npm安裝的模塊集中在一起,便于管理。

1、在nodejs安裝路徑下,新建node_global和node_cache兩個文件夾


2、設置緩存文件夾

npm config set cache "D:\vueProject\nodejs\node_ cache"

 設置全局模塊存放路徑

npm config set prefix "D:\vueProject\nodejs\node_global"

設置成功后,之后用命令npm install XXX -g安裝以后模塊就在D:\vueProject\nodejs\node_global里


三、基于 Node.js 安裝cnpm(淘寶鏡像)

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

四、設置環(huán)境變量(非常重要)

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

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

2、修改系統(tǒng)變量PATH

3、新增系統(tǒng)變量NODE_PATH

五、安裝Vue

nmp install vue -g

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

cnpm install vue-cli -g

?七、新項目的創(chuàng)建

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

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

2.根據(jù)模版創(chuàng)建新項目

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

vue init webpack-simple?mytest

初始化完成后的項目目錄結(jié)構(gòu)如下:

3、安裝工程依賴模塊

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

cd mytest

cnpm install

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

cnpm run dev

至此vue已經(jīng)可以在你電腦上運行,接下來就是運行網(wǎng)上下載下來的項目

1.首先cd到項目目錄,比如我的項目目錄為cd desktop/vue-manage-system


2.安裝依賴


npm install?


安裝成功后你會發(fā)現(xiàn)項目里多了個


然后

npm run dev


自動啟動瀏覽器就會打開項目了

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容