安裝nodejs並搭建vue項目


第一步:先下載nodejs

1 網址在此:nodejs下載網址

2 等待下載完成,雙擊安裝,一直下一步即可,不用改任何東西。

3 安裝

1 Win+r打開cmd,輸入node -v查看是否安裝成功,出現版本號代表成功,

node -v

因為下載node會自帶下載npm,輸入npm -v查看

npm -v

 2 然后打開下載的nodejs文件夾,在里面新建2個文件夾
node_global 和 node_cache,說明一下node_global是用來放下載的全局包的,日志什么的會放在node_cache文件夾下

3 接下來進到Win+r的cmd窗口

npm config set prefix "C:\nodejs\node_global"
npm config set cache "C:\nodejs\node_cache"

注意:這是我自己的文件夾路徑,然后設置環境變量,
將用戶變量的PATH原本node 的路徑換成 你自己的node_global路徑,因為我的PATH大多設置在系統變量里了,所以用戶的只有node路徑

 在系統變量中新建變量名為NODE_PATH,變量值為C:\nodejs\node_global\node_modules就是上面的變量值后面加\node_modules

到此環境變量配置完畢。

3 之后輸入以下命令安裝淘寶鏡像,因為在國內,官方的鏡像實在太慢

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

這時輸入以下命令查看npm默認的鏡像還是官方的

npm config list

所以我們要設置一下,將淘寶鏡像設置成默認的

npm config set registry https://registry.npm.taobao.org

 這時再查看默認鏡像就是會是淘寶的了
4 然后安裝webpack,在cmd中輸入以下代碼

npm install webpack -g

注意,如果webpack是4.0版本以上的,官方將webpack -cli從webpack分離了出來,所以是會提醒讓你安裝webpack -cli,這時輸入no 之后按回車 因為我們要安裝全局的包,也就是上面的-g指令(對應上面的global文件夾) ,之后輸入 npm install webpack-cli -g 等待安裝

之后輸入 webpack -v 測試安裝是否成功

5 接下來安裝vue腳手架,

npm install @vue/cli -g

這是3.0新版的 舊版的如果已經安裝了,需要卸載一下,如果不確定可以輸入vue --version 如果出現版本號並且低於3.0,需要卸載重裝
輸入 npm uninstall -g vue -cli 或者 yarn global remove vue -cli卸載 ,然后輸入npm install -g @vue -cli 重裝 ,或者yarn global add @vue/cli 如果沒有版本號安裝新版即可

 輸入vue --version 查看是否安裝成功

4 搭建vue項目
首先在電腦上創建一個文件夾用來放vue項目 cd 文件夾路徑
輸入vue create 項目名字 這還可以使用vue init webpack 項目名創建項目,我這用的是vue create 項目名字,用vue init webpack 項目名創建的參考這個鏈接https://www.cnblogs.com/ylboke/p/8393216.html
會彈出下面窗口,借大神的圖一用,我忘截圖了~~~

default這行代表自動配置,下面的代表手動配置,這里使用向下方向鍵調節,選中按回車會出現下面窗口,借大神的圖一用,我忘截圖了~~~

 

 在這里應上下方向鍵控制,選中則按空格鍵,借大神的圖一用,我忘截圖了~~~
選完之后按回車繼續,都選Y即可,繼續下一步,最后會出現此窗口,選擇less按回車,借大神的圖一用,我忘截圖了~~~

出現此窗口,選擇Jess,借大神的圖一用,我忘截圖了~~~

 

 出現此窗口,選第一個,按回車,借大神的圖一用,我忘截圖了~~~

 這個選Y代表保存當前設置給到將來的項目,n代表不保存,借大神的圖一用,我忘截圖了~~~

 最終終於出現此窗口了

 這時輸入 cd 項目名,按回車,然后輸入 npm run serve 或者 npm run dev啟動項目,小黑框會給出你的訪問地址:

 

 這時打開你的瀏覽器訪問即可出現畫面了哈~~

 

 




免責聲明!

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



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