跳到主要内容

Vue踩坑汇总

· 阅读需 2 分钟
Yana Ching
Yana Ching
Front End Engineer

Trailing spaces not allowed​

删除多余空行即可

Newline required at end of file but not found​

文件末尾需要换行符，但找不到

解决：=> 在 js css等后面再加一行(空行)

error Extra semicolon semi​

不使用分号

多次引入 element-ui​

2:24  error  'E:\Develop\Apache\htdocs\econ.com\node_modules\element-ui\lib\element-ui.common.js' imported multiple times  import/no-duplicates
3:32  error  'E:\Develop\Apache\htdocs\econ.com\node_modules\element-ui\lib\element-ui.common.js' imported multiple times  import/no-duplicates
4:23  error  'E:\Develop\Apache\htdocs\econ.com\node_modules\element-ui\lib\element-ui.common.js' imported multiple times  import/no-duplicates
6:1   error  More than 1 blank line not allowed                                                                            no-multiple-empty-lines

解决方法：

使用一次 import 即可

// ========== before ===========
import { Button } from 'element-ui'
import { Form, FormItem } from 'element-ui'
import { Input } from 'element-ui'
// ========== before ===========
import { Button, Form, FormItem, Input } from 'element-ui'

tab四字节导致的错误​

31:1 error Expected indentation of 4 spaces but found 0 indent 33:1 error Expected indentation of 6 spaces but found 4 indent 34:1 error Expected indentation of 8 spaces but found 4 indent 35:1 error Expected indentation of 8 spaces but found 4 indent 36:1 error Expected indentation of 6 spaces but found 4 indent 37:1 error Expected indentation of 4 spaces but found 0 indent 38:1 error Expected indentation of 2 spaces but found 0 indent

修改编辑器tab 键字节数，修改设置settings.json：

"editor.tabSize": 4：指定一个tab等于多少个空格，例如此处指定4就像等于4个空格，2就等于两个空格
"editor.detectIndentation":false ：必须指定！！否则指定的tab大小将不起效果

没必要的返回语句​

Unnecessary return statement no-useless-return

login() {
  // console.log(this)登陆时候的预校验。
  this.$refs.loginFormRef.validate(valid => {
    if (!valid) return
  })
}
// ========= 修改 ============
login() {
  // console.log(this)登陆时候的预校验。
  this.$refs.loginFormRef.validate(valid => {
    if (!valid) return false 
  })
}

vue ui 启动可视化面板一片空白​

删除 C:\Users\Administrator 下的 '.vue-cli-ui' 文件即可