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