剛來(lái)公司實(shí)習(xí)發(fā)現(xiàn)公司的前端使用的是vue，之前根本就沒(méi)有聽(tīng)說(shuō)過(guò)。然后一上來(lái)就需要看代碼，but but 就是沒(méi)有文檔什么的東西，就需要自己去研讀，我就想去運(yùn)行其中的前端和后端聯(lián)調(diào)起來(lái)方便理解，結(jié)果在配置和運(yùn)行中出現(xiàn)了很多挫折，我就想寫(xiě)一下方便

目前創(chuàng)新互聯(lián)已為成百上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁(yè)空間、網(wǎng)站改版維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、林芝網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

大家不去采坑，直接運(yùn)行好

一、在IDEA中配置vue插件

點(diǎn)擊File-->Settings-->Plugins-->搜索vue.js插件進(jìn)行安裝，下面的圖中我已經(jīng)安裝好了。

二、搭建node.js環(huán)境

安裝node.js 可以去官網(wǎng)下載：安裝過(guò)程就很簡(jiǎn)單，直接下一步就行

測(cè)試是否安裝成功：要使用管理員方式打開(kāi)命令行cmd

安裝完成之后，打開(kāi)命令行工具,輸入node -v如果出現(xiàn)版本號(hào)，則說(shuō)明安裝成功，npm包管理器是集成在node中的，所以，直接

輸入npm -v 就會(huì)顯示npm版本信息

好了，node環(huán)境已經(jīng)安裝成功，由于有些npm有些資源被屏蔽或者是國(guó)外資源的原因，經(jīng)常會(huì)導(dǎo)致用npm安裝依賴包的時(shí)候失敗，

所以還需要安裝npm的國(guó)內(nèi)鏡像----cnpm

三、安裝cnpm（注意都是管理員方式運(yùn)行）

在命令行中輸入npm install -g cnpm --registry=http://registry.npm.taobao.org然后等待安裝，安裝完成之后，我們就可以用cnpm代替npm來(lái)安裝

依賴包了。

四、安裝vue-cli腳手架構(gòu)建工具（注意都是管理員方式運(yùn)行）

在命令行中運(yùn)行命令cnpm install -g vue-cli,然后等待安裝完成，通過(guò)以上三步，我們的環(huán)境和工具都準(zhǔn)備好了，接下來(lái)就開(kāi)始使用

vue-cli來(lái)構(gòu)建項(xiàng)目

五、構(gòu)建運(yùn)行項(xiàng)目

1.我這里是已經(jīng)有項(xiàng)目了，需要在命名行中，cd 到項(xiàng)目目錄中去

然后需要輸入命令：vue init webpack frontend (這里命令的意思是初始化一個(gè)項(xiàng)目，項(xiàng)目名稱是frontend，其中webpack是構(gòu)建工具，

也就是整個(gè)項(xiàng)目時(shí)基于webpack的)

運(yùn)行命令初始化的時(shí)候會(huì)讓用戶輸入幾個(gè)基本的選項(xiàng)，如項(xiàng)目名稱、描述、作者等信息，可以直接回車(chē)默認(rèn)就可以了。

六、安裝項(xiàng)目依賴資源

在項(xiàng)目的根目錄下面會(huì)有一個(gè)package.json的文件

這里列出了項(xiàng)目依賴資源需要安裝

首先需要cd到項(xiàng)目目錄中去，然后輸入cnpm install 等待安裝，安裝中會(huì)出現(xiàn)警告信息，有的會(huì)出現(xiàn)棧溢出等錯(cuò)誤，我就是在這里遇到了，一般

第一次安裝沒(méi)事，如果安裝過(guò)的，可以卸載了在重新安裝

七、運(yùn)行項(xiàng)目

運(yùn)行命令npm run dev會(huì)用熱加載的方式運(yùn)行我們的應(yīng)用，熱加載可以讓我們?cè)谛薷耐甏a后不用手動(dòng)刷新，瀏覽器就能實(shí)時(shí)看到修改后的效果

我們也可以在IDEA中配置運(yùn)行

點(diǎn)擊edit configurations配置，添加一個(gè)npm

然后就可以在IDEA中運(yùn)行了。

總結(jié)

以上所述是小編給大家介紹的使用IDEA工具配置和運(yùn)行vue項(xiàng)目及遇到的坑，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！

本文標(biāo)題：使用IDEA工具配置和運(yùn)行vue項(xiàng)目及遇到的坑-創(chuàng)新互聯(lián)
轉(zhuǎn)載來(lái)源：http://jinyejixie.com/article28/ddsdjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、云服務(wù)器、外貿(mào)建站、定制網(wǎng)站、關(guān)鍵詞優(yōu)化、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)