win11搭建vue開發環境

一、官網下載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訪問即可

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