vue中npm包全局安裝和局部安裝過(guò)程
全局安裝是將npm包安裝在你的node安裝目錄下的node_modules文件夾中。在windows和mac中,全局安裝的默認(rèn)路徑是不同的。在mac中默認(rèn)是安裝到 /usr/locla/lib
中。在windows默認(rèn)安裝目錄是 C:\Program Files\nodejs
,當(dāng)然你也可以通過(guò)一下命令來(lái)查看全局安裝路徑。
// 查看全局安裝路徑 npm root -g // 查看npm的基礎(chǔ)設(shè)置 npm config ls // 查看安裝目錄路徑 npm config get prefix
全局命令
npm包在全局安裝之后,這個(gè)包的命令就會(huì)被注冊(cè)到全局,你就可以直接在命令行中執(zhí)行這個(gè)命令了。其實(shí)當(dāng)你全局安裝一個(gè)npm包之后,這個(gè)包被存放在 /usr/locla/lib/node_modules
或者 C:\Program Files\nodejs\node_modules
目錄下。而在這個(gè)包的 package.json
文件中,在 bin
屬性下配置的執(zhí)行命令,會(huì)放在 /usr/locla/bin
或者 C:\Program Files\nodejs
文件中。當(dāng)你在命令行執(zhí)行這個(gè)命令,系統(tǒng)就會(huì)執(zhí)行 /usr/locla/bin
目錄下對(duì)應(yīng)的文件。
安裝過(guò)程
以全局安裝vue-cli為例,為大家簡(jiǎn)述一下安裝過(guò)程。
npm install -g @vue/cli
安裝vue包到 /usr/locla/lib/node_modules
。
查找node_modules
目錄下的vue包的package.json中的bin屬性。
在目錄 /usr/locla/bin
或者 C:\Program Files\nodejs
查看vue命令的執(zhí)行文件
在命令行中執(zhí)行 vue create vue-test
本地安裝
安裝位置
在特定項(xiàng)目中執(zhí)行 npm install xxx
,那么這個(gè)包會(huì)被安裝在這個(gè)項(xiàng)目的 node_moduels
目錄下。但是如果你在這個(gè)項(xiàng)目中直接執(zhí)行包中的命令,就會(huì)發(fā)現(xiàn)控制臺(tái)報(bào)錯(cuò),告訴你這個(gè)命令找不到。這時(shí)候有兩個(gè)解決方法:
npx 包命令
"scripts": { "包命令": "包命令",}
原理: 在本地安裝一個(gè)包之后,這個(gè)包的命令會(huì)被添加到項(xiàng)目的 node_modules/.bin
文件中。執(zhí)行 npm run 命令
,package.json中的scripts會(huì)按照一定順序?qū)ふ覍?duì)應(yīng)命令的位置,本地的 node_modules/.bin
也在尋找的清單中。所以本地安裝的包的命令可以執(zhí)行。
總結(jié)
以上所述是小編給大家介紹的vue中npm包全局安裝和局部安裝過(guò)程,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
- vue中Npm run build 根據(jù)環(huán)境傳遞參數(shù)方法來(lái)打包不同域名
- vue打包npm run build時(shí)候界面報(bào)錯(cuò)的解決
- 詳解如何制作并發(fā)布一個(gè)vue的組件的npm包
- 自定義Vue組件打包、發(fā)布到npm及使用教程
- 基于vue如何發(fā)布一個(gè)npm包的方法步驟
- Vue.js構(gòu)建你的第一個(gè)包并在NPM上發(fā)布的方法步驟
- 如何構(gòu)建一個(gè)Vue插件并生成npm包
- vue組件打包并發(fā)布到npm的全過(guò)程
- vue使用npm發(fā)布自己的公網(wǎng)包
相關(guān)文章
微信小程序列表時(shí)間戳轉(zhuǎn)換實(shí)現(xiàn)過(guò)程解析
這篇文章主要介紹了微信小程序列表時(shí)間戳轉(zhuǎn)換實(shí)現(xiàn)過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10基于JavaScript實(shí)現(xiàn)大文件上傳后端代碼實(shí)例
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)大文件上傳后端代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08JS實(shí)現(xiàn)鍵值對(duì)遍歷json數(shù)組功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)鍵值對(duì)遍歷json數(shù)組功能,結(jié)合實(shí)例形式分析了javascript遍歷json數(shù)組相關(guān)操作技巧,需要的朋友可以參考下2018-05-05微信小程序?qū)崿F(xiàn)左側(cè)滑動(dòng)導(dǎo)航欄
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)左側(cè)滑動(dòng)導(dǎo)航欄,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10JS實(shí)現(xiàn)點(diǎn)擊下拉菜單把選擇的內(nèi)容同步到input輸入框內(nèi)的實(shí)例
下面小編就為大家分享一篇JS實(shí)現(xiàn)點(diǎn)擊下拉菜單把選擇的內(nèi)容同步到input輸入框內(nèi)的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01JavaScript實(shí)現(xiàn)雙向鏈表過(guò)程解析
這篇文章主要介紹了利用JavaScript實(shí)現(xiàn)雙向鏈表以及它的封裝和常用操作,文中的示例代碼講解詳細(xì),對(duì)日常的學(xué)習(xí)和工作都有一定的價(jià)值,快來(lái)和小編一起學(xué)習(xí)吧2021-12-12