VSCode搭建VUE 開發環境


https://blog.csdn.net/shenwb110/article/details/86137581/

一,下載Node.js,去官網https://nodejs.org/en/download/下載

選擇Windows Installer (.msi)64位版本

 

二、安裝Node.js

雙擊下載文件,選擇安裝路徑,安裝。

安裝完后在cmd中執行 node -v 查看版本

安裝完后在cmd中執行 npm -v

顯示如下即表示Node.js安裝成功。

 

三、配置npm的全局模塊的存放路徑以及緩存的路徑
默認會將模塊安裝到C:\Users\用戶名\AppData\Roaming\npm路徑中。所以可以修改路徑
在node.js的安裝目錄下新建兩個文件夾node-cache和node_global


然后在cmd中分別執行
npm config set prefix "C:\software\Nodejs\node_global"
npm config set cache "C:\software\Nodejs\node_cache"


之后用npm install XXX -g安裝以后模塊就在這兩個文件夾里。

 

四、安裝cnpm

      有些npm有些資源被屏蔽或者是國外資源的原因,經常會導致用npm安裝依賴包的時候失敗,所以還需要npm的國內鏡像—cnpm

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

之后可以用cnpm代替npm來安裝依賴包

五、安裝vue-cli腳手架

npm install -g @vue-cli

cnpm install -g @vue/cli

接下來就可以使用vue-cli來構建項目

六、安裝webpack

cnpm install -g webpack

七、用vue-cli構建項目

方式一:命令行創建

首先選定目錄,並切換到選定目錄

vue init webpack vue001

nit:初始化

webpack:構建工具,即整個項目基於webpack構建

MyVue:整個項目文件夾的名稱

 

方式二:Vue項目管理器圖形化界面創建

首先選定目錄,並切換到選定目錄,執行 vue ui  ,打開Vue項目管理器圖形化界面

 

新建項目,選擇npm包管理器

 

 

 

 

項目現在還只是一個結構框架,整個項目需要的依賴資源都還沒有安裝

八、安裝項目依賴資源

切換到項目文件夾下,執行 cnpm install (前面已經用cnpm代替npm)

現在可以運行項目了

九、運行項目

在項目目錄下,執行 npm run dev ,項目會以熱加載的方式運行。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM