工欲善其事必先利其器：Vue 入门工具篇

投稿用户 • 2024年6月11日 pm6:02 • 科研百科 • 阅读 56

Vue.js 是比较流行的一个前端 JS 框架，Github 上有不少基于它的开源脚手架项目。因为工作需要，将 github 的某个个vue 项目导入 IDEA 后，打开工程目录，发现各种标红的代码，但是工程能正确启动。

本文记录去掉这些错误提示的过程，根源是 IDEA 环境配置不识别的问题，IDEA 识别的有问题的文件，它的颜色跟正常文件颜色都不一样，是红色的，普通文件名显示红色，js 直接用红色波浪线标红了。

0、cnpm

模块管理工具 npm ，通常在下载模块时很慢，此时应该用国内的镜像，安装 cnpm 后使用 cnpm 工具：

npm（node package manager）：nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）
cnpm:因为npm安装插件是从国外服务器下载，受网络的影响比较大，可能会出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。
来自官网：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟一次以保证尽量与官方服务同步。”

安装 cnpm 的方法：

npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install moduleName

具体表现如下：

工欲善其事必先利其器：Vue 入门工具篇

1、Vue 文件中属性标签不识别

在一个 div 中有一个事件配置，但是 IDEA 标红，提示错误为：“Attribute @click is not allowed here ”。点击左侧电灯泡，提供了解决该错误的方法。

工欲善其事必先利其器：Vue 入门工具篇

2、复制错误信息

IDEA 的错误信息，不能直接在提示的地方复制，会跑掉。但是可以在底部状态栏那里右键 “copy” 来复制。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20191207070532751.png

3、scss 文件报错

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; }}

解决办法，在定义时设置 rel 属性：

<style lang="scss" rel="stylesheet/scss" scoped>

4、ESLint 校验提示

错误提示是 ESlint 插件的语法问题，比如：ESLint: Extra semicolon. (semi) ，可以用快速解决方法，定位到该错误前面的红色电灯泡那里：

工欲善其事必先利其器：Vue 入门工具篇

点击“Fix current file with ESLint” 可以直接修正这种简单错误。

5、IDEA 版本

本地一直使用 IDEA2016 年的版本，它有一个漏洞，就是将本机时间调到将来某一天后，打开时就能延长试用期限。总感觉 IDEA 的激活码很难找，所以一直没有更换版本，导入 vue 项目才发现低版本对很多技术没有办法兼容了，前面的 scss 语言的支持，在高版本中其实是能识别的。

下载了一个 2019.3 版本，随便搜了一个激活码就好了，工具就弄好了，真的很简单的。被自己的固步自封给坑了好几年！

工欲善其事必先利其器：Vue 入门工具篇

0、cnpm

1、Vue 文件中属性标签不识别

2、复制错误信息

3、scss 文件报错

4、ESLint 校验提示

5、IDEA 版本

相关推荐