Vue使用NPM方式搭建項(xiàng)目
一、安裝前說明
環(huán)境依賴： node.js ；
vue官方腳手架 ： vue-cli ；
包管理工具： npm
模塊化打包工具： webpack
安裝 node.js會(huì)默認(rèn)安裝npm，vue-cli依賴npm來(lái)安裝 。
二、 安裝 node.js
安裝 node.js 可以直接從官網(wǎng)下載安裝，基本是一直點(diǎn)下一步即可。
安裝完成后查看 node 版本： node -v
安裝完成后查看 npm 版本： npm -v
三、創(chuàng)建項(xiàng)目
選擇 webpack作為打包工具，初始化項(xiàng)目，項(xiàng)目名是front-project。安裝過程按照提示填寫相關(guān)配置（默認(rèn)按Enter鍵即可）， 這些配置最終會(huì)寫到項(xiàng)目的 package.json 并且安裝相關(guān)模塊。
E:\Tool>vue init webpack front-project
創(chuàng)建好的項(xiàng)目的結(jié)構(gòu)：
項(xiàng)目結(jié)構(gòu)說明可以參考菜鳥教程：
http://www.runoob.com/vue2/vue-directory-structure.html
四、運(yùn)行項(xiàng)目
進(jìn)入到項(xiàng)目里面，然后運(yùn)行命令：
npm run dev
或者進(jìn)入到項(xiàng)目里面，然后運(yùn)行命令（指定端口）：
PORT=8090 npm run dev
總結(jié)
以上所述是小編給大家介紹的Vue使用NPM方式搭建項(xiàng)目，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vue3的沙箱機(jī)制的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
Element-UI結(jié)合遞歸組件實(shí)現(xiàn)后臺(tái)管理系統(tǒng)左側(cè)菜單
在Vue.js中使用遞歸組件可以方便地構(gòu)建多層級(jí)的菜單結(jié)構(gòu),遞歸組件適用于處理具有嵌套關(guān)系的數(shù)據(jù),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-09-09
今天小編就為大家分享一篇Vue動(dòng)態(tài)獲取width的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)二級(jí)彈框案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了Vue 修改網(wǎng)站圖標(biāo)的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
vue3的setup語(yǔ)法如何自定義v-model為公用hooks
這篇文章主要介紹了vue3的setup語(yǔ)法如何自定義v-model為公用hooks，文章分為兩個(gè)部分介紹，簡(jiǎn)單介紹vue3的setup語(yǔ)法如何自定義v-model和如何提取v-model語(yǔ)法作為一個(gè)公用hooks2022-07-07
這篇文章主要介紹了在vue中如何封裝G2圖表，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue使用elementui的el-menu的折疊菜單collapse示例詳解
這篇文章主要介紹了vue使用elementui的el-menu的折疊菜單collapse示例詳解,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-12-12
vue使用formData時(shí)候傳遞參數(shù)是個(gè)空值的情況處理
這篇文章主要介紹了vue使用formData時(shí)候傳遞參數(shù)是個(gè)空值的情況處理，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
v-for是vue的循環(huán)指令,作用是遍歷數(shù)組(對(duì)象)的每一個(gè)值,這篇文章主要給大家介紹了關(guān)于Vue中v-for的9種使用案例的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12