Node.js+Vue腳手架環(huán)境搭建的方法步驟
Node.js的下載
node下載地址:https://nodejs.org/zh-cn/download/
下載后安裝即可。新版Node.js自帶npm包管理器
# 查看node的版本 node -v # v12.16.1 # 查看npm版本 npm -v #6.13.4
第一個(gè)Node.js程序,新建helloworld.js文件,內(nèi)容如下
console.log("Hello World") console.log("第一個(gè)Node.js程序!")
進(jìn)入終端 node helloworld.js
注意:
node安裝路徑默認(rèn)為/usr/local/bin/node
npm路徑為/usr/local/bin/npm
搭建Vue CLI腳手架
Vue CLI是一個(gè)基于Vue.js進(jìn)行快速開發(fā)的完整系統(tǒng)
Vue CLI 的包名稱由 vue-cli 改成了 @vue/cli。 如果你已經(jīng)全局安裝了舊版本的 vue-cli (1.x 或 2.x),你需要先通過 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸載它。
Vue CLI 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)
設(shè)置淘寶鏡像
npm config set registry https://registry.npm.taobao.org # 查看是否設(shè)置成功 npm get registry
安裝
# -g表示全局安裝 sudo npm install -g @vue/cli # 或則 sudo yarn global add @vue/cli
安裝好后就可以在終端終端中訪問vue命令
vue -V
安裝全局插件,詳情見官網(wǎng)
sudo npm install -g @vue/cli-service-global # 安裝成功提示 + @vue/cli-service-global@4.2.3 added 1216 packages from 866 contributors in 83.013s
創(chuàng)建第一個(gè)應(yīng)用程序
# 通過圖形化界面方式創(chuàng)建項(xiàng)目(新手推薦) vue ui


下一步->預(yù)設(shè)(選擇默認(rèn)) -> 下一步


在瀏覽器中輸入地址

可能遇到的坑
1.輸入npm install -g @vue/cli后,停留在此界面

解決:
設(shè)置淘寶鏡像: npm config set registry https://registry.npm.taobao.org
2.提示權(quán)限不足!

再npm命令前加sudo如 sudo npm install -g @vue/cli
到此這篇關(guān)于Node.js+Vue腳手架環(huán)境搭建的方法步驟的文章就介紹到這了,更多相關(guān)Node.js Vue腳手架搭建內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue3.x的版本中build后dist文件中出現(xiàn)legacy的js文件問題
這篇文章主要介紹了Vue3.x的版本中build后dist文件中出現(xiàn)legacy的js文件問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07
vue模態(tài)框?qū)崿F(xiàn)動(dòng)態(tài)錨點(diǎn)
這篇文章主要為大家詳細(xì)介紹了vue模態(tài)框?qū)崿F(xiàn)動(dòng)態(tài)錨點(diǎn),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07
vue-devtools 打開源碼位置實(shí)現(xiàn)過程
這篇文章主要為大家介紹了vue-devtools 打開源碼位置實(shí)現(xiàn)過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09
vue/cli安裝報(bào)錯(cuò)及解決問題的方法圖文詳解
這篇文章主要給大家介紹了關(guān)于vue/cli安裝報(bào)錯(cuò)及解決問題的方法,如果在安裝@vue/cli時(shí)遇到錯(cuò)誤,大家可以嘗試以下步驟解決,需要的朋友可以參考下2023-07-07
vue中style設(shè)置scoped后部分樣式不生效的解決
這篇文章主要介紹了vue中style設(shè)置scoped后部分樣式不生效的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-09-09
Vue中失去焦點(diǎn)時(shí)所觸發(fā)的事件問題
這篇文章主要介紹了Vue中失去焦點(diǎn)時(shí)所觸發(fā)的事件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06
Vue+Jwt+SpringBoot+Ldap完成登錄認(rèn)證的示例代碼
本篇文章主要介紹了Vue+Jwt+SpringBoot+Ldap完成登錄認(rèn)證的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
Ant Design Vue Pro動(dòng)態(tài)路由加載,服務(wù)器重啟首頁白屏問題
這篇文章主要介紹了Ant Design Vue Pro動(dòng)態(tài)路由加載,服務(wù)器重啟首頁白屏問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10

