使用IDEA工具配置和運(yùn)行vue項(xiàng)目及遇到的坑
剛來公司實(shí)習(xí)發(fā)現(xiàn)公司的前端使用的是vue，之前根本就沒有聽說過。然后一上來就需要看代碼，but but 就是沒有文檔什么的東西，就需要自己去研讀，我就想去運(yùn)行其中的前端和后端聯(lián)調(diào)起來方便理解，結(jié)果在配置和運(yùn)行中出現(xiàn)了很多挫折，我就想寫一下方便
大家不去采坑，直接運(yùn)行好
一、在IDEA中配置vue插件
點(diǎn)擊File-->Settings-->Plugins-->搜索vue.js插件進(jìn)行安裝，下面的圖中我已經(jīng)安裝好了。
二、搭建node.js環(huán)境
安裝node.js 可以去官網(wǎng)下載：安裝過程就很簡單，直接下一步就行
測試是否安裝成功：要使用管理員方式打開命令行cmd
安裝完成之后，打開命令行工具,輸入node -v如果出現(xiàn)版本號，則說明安裝成功，npm包管理器是集成在node中的，所以，直接
輸入npm -v 就會顯示npm版本信息
好了，node環(huán)境已經(jīng)安裝成功，由于有些npm有些資源被屏蔽或者是國外資源的原因，經(jīng)常會導(dǎo)致用npm安裝依賴包的時(shí)候失敗，
所以還需要安裝npm的國內(nèi)鏡像----cnpm
三、安裝cnpm（注意都是管理員方式運(yùn)行）
在命令行中輸入npm install -g cnpm --registry=http://registry.npm.taobao.org然后等待安裝，安裝完成之后，我們就可以用cnpm代替npm來安裝
依賴包了。
四、安裝vue-cli腳手架構(gòu)建工具（注意都是管理員方式運(yùn)行）
在命令行中運(yùn)行命令cnpm install -g vue-cli,然后等待安裝完成，通過以上三步，我們的環(huán)境和工具都準(zhǔn)備好了，接下來就開始使用
vue-cli來構(gòu)建項(xiàng)目
五、構(gòu)建運(yùn)行項(xiàng)目
1.我這里是已經(jīng)有項(xiàng)目了，需要在命名行中，cd 到項(xiàng)目目錄中去
然后需要輸入命令：vue init webpack frontend (這里命令的意思是初始化一個項(xiàng)目，項(xiàng)目名稱是frontend，其中webpack是構(gòu)建工具，
也就是整個項(xiàng)目時(shí)基于webpack的)
運(yùn)行命令初始化的時(shí)候會讓用戶輸入幾個基本的選項(xiàng)，如項(xiàng)目名稱、描述、作者等信息，可以直接回車默認(rèn)就可以了。
六、安裝項(xiàng)目依賴資源
在項(xiàng)目的根目錄下面會有一個package.json的文件
這里列出了項(xiàng)目依賴資源需要安裝
首先需要cd到項(xiàng)目目錄中去，然后輸入cnpm install 等待安裝，安裝中會出現(xiàn)警告信息，有的會出現(xiàn)棧溢出等錯誤，我就是在這里遇到了，一般
第一次安裝沒事，如果安裝過的，可以卸載了在重新安裝
七、運(yùn)行項(xiàng)目
運(yùn)行命令npm run dev會用熱加載的方式運(yùn)行我們的應(yīng)用，熱加載可以讓我們在修改完代碼后不用手動刷新，瀏覽器就能實(shí)時(shí)看到修改后的效果
我們也可以在IDEA中配置運(yùn)行
點(diǎn)擊edit configurations配置，添加一個npm
然后就可以在IDEA中運(yùn)行了。
總結(jié)
以上所述是小編給大家介紹的使用IDEA工具配置和運(yùn)行vue項(xiàng)目及遇到的坑，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了關(guān)于Springboot中JSCH的使用及說明，具有很好的參考價(jià)值，希望對大家有所幫助。2022-09-09
這篇文章主要介紹了Java?String之contains方法的使用詳解，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-12-12
Java并發(fā)編程學(xué)習(xí)之ThreadLocal源碼詳析
這篇文章主要給大家介紹了關(guān)于Java并發(fā)編程學(xué)習(xí)之源碼分析ThreadLocal的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-06-06
Java定時(shí)器通信協(xié)議管理模塊Timer詳解
這篇文章主要介紹了Java定時(shí)器通信協(xié)議管理模塊Timer，?Timer一般指定時(shí)器（通信協(xié)議管理模塊）人類最早使用的定時(shí)工具是沙漏或水漏，但在鐘表誕生發(fā)展成熟之后，人們開始嘗試使用這種全新的計(jì)時(shí)工具來改進(jìn)定時(shí)器，達(dá)到準(zhǔn)確控制時(shí)間的目的2022-08-08
使用Springboot實(shí)現(xiàn)健身房管理系統(tǒng)
這篇文章主要介紹了使用Springboot如何實(shí)現(xiàn)健身房管理系統(tǒng)，希望對你有所幫助2021-07-07
這篇文章主要介紹了怎么用Java來創(chuàng)建和使用Swing中的幾種常用按鈕，按鈕是我們經(jīng)常要用的工具，但是你有想過自己怎么去實(shí)現(xiàn)它嗎，感興趣的朋友跟隨文章往下看看吧2022-04-04
Tomcat Cannot assign requested address: JVM_Bind 非端口占用沖突
這篇文章主要介紹了 Tomcat Cannot assign requested address: JVM_Bind 非端口占用沖突的相關(guān)資料,需要的朋友可以參考下2017-01-01
我們在學(xué)習(xí) Java 基礎(chǔ)時(shí)就知道可以生成隨機(jī)數(shù),可以為我們枯燥的學(xué)習(xí)增加那么一丟丟的樂趣,本文就來和大家介紹Java生成隨機(jī)數(shù)的常用方法,需要的可以參考下2023-08-08
Spring事務(wù)事件監(jiān)控的實(shí)現(xiàn)
這篇文章主要介紹了Spring事務(wù)事件監(jiān)控的實(shí)現(xiàn)。本文首先會使用實(shí)例進(jìn)行講解Spring事務(wù)事件是如何使用的，然后會講解這種使用方式的實(shí)現(xiàn)原理。感興趣的小伙伴們可以參考一下2018-10-10
Spring中的ThreadPoolTaskExecutor線程池使用詳解
這篇文章主要介紹了Spring中的ThreadPoolTaskExecutor線程池使用詳解,ThreadPoolTaskExecutor 是 Spring框架提供的一個線程池實(shí)現(xiàn),用于管理和執(zhí)行多線程任務(wù),它是TaskExecutor接口的實(shí)現(xiàn),提供了在 Spring 應(yīng)用程序中創(chuàng)建和配置線程池的便捷方式,需要的朋友可以參考下2024-01-01