Vue.js 是比較流行的一個(gè)前端 JS 框架,Github 上有不少基于它的開源腳手架項(xiàng)目。因?yàn)楣ぷ餍枰瑢?github 的某個(gè)個(gè)vue 項(xiàng)目導(dǎo)入 IDEA 后,打開工程目錄,發(fā)現(xiàn)各種標(biāo)紅的代碼,但是工程能正確啟動。
本文記錄去掉這些錯(cuò)誤提示的過程,根源是 IDEA 環(huán)境配置不識別的問題,IDEA 識別的有問題的文件,它的顏色跟正常文件顏色都不一樣,是紅色的,普通文件名顯示紅色,js 直接用紅色波浪線標(biāo)紅了。
0、cnpm
模塊管理工具 npm ,通常在下載模塊時(shí)很慢,此時(shí)應(yīng)該用國內(nèi)的鏡像,安裝 cnpm 后使用 cnpm 工具:
npm(node package manager):nodejs的包管理器,用于node插件管理(包括安裝、卸載、管理依賴等)
cnpm:因?yàn)閚pm安裝插件是從國外服務(wù)器下載,受網(wǎng)絡(luò)的影響比較大,可能會出現(xiàn)異常,如果npm的服務(wù)器在中國就好了,所以我們樂于分享的淘寶團(tuán)隊(duì)干了這事。
來自官網(wǎng):“這是一個(gè)完整 npmjs.org 鏡像,你可以用此代替官方版本(只讀),同步頻率目前為 10分鐘 一次以保證盡量與官方服務(wù)同步?!?/span>
安裝 cnpm 的方法:
npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install moduleName
具體表現(xiàn)如下:
1、Vue 文件中屬性標(biāo)簽不識別
在一個(gè) div 中有一個(gè)事件配置,但是 IDEA 標(biāo)紅,提示錯(cuò)誤為:“Attribute @click is not allowed here ”。點(diǎn)擊左側(cè)電燈泡,提供了解決該錯(cuò)誤的方法。
2、復(fù)制錯(cuò)誤信息
IDEA 的錯(cuò)誤信息,不能直接在提示的地方復(fù)制,會跑掉。但是可以在底部狀態(tài)欄那里右鍵 “copy” 來復(fù)制。
![在這里插入圖片描述](https://img-blog.csdnimg.cn/20191207070532751.png
3、scss 文件報(bào)錯(cuò)
scss 文件的嵌套樣式定義語句,會被 IDEA 提示 ‘{’ expected :
<style lang="scss" scoped>.app-breadcrumb.el-breadcrumb { display: inline-block; font-size: 14px; line-height: 50px; margin-left: 8px; .no-redirect { color: #97a8be; cursor: text; }}
解決辦法,在定義時(shí)設(shè)置 rel 屬性:
<style lang="scss" rel="stylesheet/scss" scoped>
4、ESLint 校驗(yàn)提示
錯(cuò)誤提示是 ESlint 插件的語法問題,比如:ESLint: Extra semicolon. (semi) ,可以用快速解決方法,定位到該錯(cuò)誤前面的紅色電燈泡那里:
點(diǎn)擊“Fix current file with ESLint” 可以直接修正這種簡單錯(cuò)誤。
5、IDEA 版本
本地一直使用 IDEA2016 年的版本,它有一個(gè)漏洞,就是將本機(jī)時(shí)間調(diào)到將來某一天后,打開時(shí)就能延長試用期限??偢杏X IDEA 的激活碼很難找,所以一直沒有更換版本,導(dǎo)入 vue 項(xiàng)目才發(fā)現(xiàn)低版本對很多技術(shù)沒有辦法兼容了,前面的 scss 語言的支持,在高版本中其實(shí)是能識別的。
下載了一個(gè) 2019.3 版本,隨便搜了一個(gè)激活碼就好了,工具就弄好了,真的很 簡單的。被自己的固步自封給坑了好幾年!
版權(quán)聲明:本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn),該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容, 請發(fā)送郵件至 舉報(bào),一經(jīng)查實(shí),本站將立刻刪除。