隐藏

用vue手脚架生成的项目直接修改时.vue文件后,保存编译就报一大堆的错,这是咋回事呢?

发布:2019/4/17 22:32:26作者:管理员 来源:本站 浏览次数:1213

用vue手脚架生成的项目直接修改时.vue文件后,保存编译就报一大堆的错,这是咋回事呢?


app.vue代码如下:

<template> <div id="app"> <h1 v-text="title"></h1> <input v-model="newItem" @keyup.enter="addNew" /> <ul> <li v-for="item in items" v-bind:class="{finished:item.isFinished}" v-on:click="toggleFinish(item)"> {{ item.label }} </li> </ul> </div> </template> <script> export default {
  data () { return { title: 'vue to do list', items: [{ label: 'aaa', isFinished: true },
       { label: 'bbb', isFinished: false }
      ], newItem: '' }
  }, methods: { toggleFinish: function(item){
          item.isFinished=!item.isFinished
      }, addNew: function(){ console.log(this.newItem); }
  }
} </script> <style> .finished{ color:#eee;
} </style> 

报错:

client.js?7955:105 [HMR] bundle has errors: client.js?7955:107 [HMR] ./src/App.vue
  ✘ http://eslint.org/docs/rules/indent                       Expected indentation of 8 space characters but found 6  /Users/apple/Desktop/VUEJS/vuePro/myvueProject01/src/App.vue:19:7  label: 'aaa',
         ^
  ✘ http://eslint.org/docs/rules/indent                       Expected indentation of 8 space characters but found 6  /Users/apple/Desktop/VUEJS/vuePro/myvueProject01/src/App.vue:20:7  isFinished: true ^
  ✘ http://eslint.org/docs/rules/indent                       Expected indentation of 6 space characters but found 7  /Users/apple/Desktop/VUEJS/vuePro/myvueProject01/src/App.vue:22:8 {
          ^

  ✘ http://eslint.org/docs/rules/indent                       Expected indentation of 8 space characters but found 6  /Users/apple/Desktop/VUEJS/vuePro/myvueProject01/src/App.vue:23:7  label: 'bbb',
         ^

  ✘ http://eslint.org/docs/rules/indent                       Expected indentation of 8 space characters but found 6  /Users/apple/Desktop/VUEJS/vuePro/myvueProject01/src/App.vue:24:7  isFinished: false ^

  ✘ http://eslint.org/docs/rules/no-mixed-spaces-and-tabs     Mixed spaces and tabs  /Users/apple/Desktop/VUEJS/vuePro/myvueProject01/src/App.vue:31:2  toggleFinish: function(item){
       ^

  ✘ http://eslint.org/docs/rules/indent                       Expected indentation of 4 space characters but found 1  /Users/apple/Desktop/VUEJS/vuePro/myvueProject01/src/App.vue:31:6  toggleFinish: function(item){
                    ^

  ✘ http://eslint.org/docs/rules/space-before-function-paren  Missing space before function parentheses  /Users/apple/Desktop/VUEJS/vuePro/myvueProject01/src/App.vue:31:28  toggleFinish: function(item){
                                          ^

  ✘ http://eslint.org/docs/rules/space-before-blocks          Missing space before opening brace  /Users/apple/Desktop/VUEJS/vuePro/myvueProject01/src/App.vue:31:34  toggleFinish: function(item){
                                                ^

  ✘ http://eslint.org/docs/rules/no-mixed-spaces-and-tabs     Mixed spaces and tabs  /Users/apple/Desktop/VUEJS/vuePro/myvueProject01/src/App.vue:32:2 item.isFinished=!item.isFinished
    ^

  ✘ http://eslint.org/docs/rules/indent                       Expected indentation of 3 space characters but found 2  /Users/apple/Desktop/VUEJS/vuePro/myvueProject01/src/App.vue:32:5 item.isFinished=!item.isFinished
             ^

  ✘ http://eslint.org/docs/rules/space-infix-ops              Infix operators must be spaced  /Users/apple/Desktop/VUEJS/vuePro/myvueProject01/src/App.vue:32:20 item.isFinished=!item.isFinished
                            ^

  ✘ http://eslint.org/docs/rules/no-mixed-spaces-and-tabs     Mixed spaces and tabs  /Users/apple/Desktop/VUEJS/vuePro/myvueProject01/src/App.vue:33:2 },
    ^

  ✘ http://eslint.org/docs/rules/indent                       Expected indentation of 1 space character but found 2  /Users/apple/Desktop/VUEJS/vuePro/myvueProject01/src/App.vue:33:4 },
         ^

  ✘ http://eslint.org/docs/rules/no-mixed-spaces-and-tabs     Mixed spaces and tabs  /Users/apple/Desktop/VUEJS/vuePro/myvueProject01/src/App.vue:34:2  addNew: function(){
    ^

  ✘ http://eslint.org/docs/rules/indent                       Expected indentation of 4 space characters but found 2  /Users/apple/Desktop/VUEJS/vuePro/myvueProject01/src/App.vue:34:4  addNew: function(){
         ^

  ✘ http://eslint.org/docs/rules/space-before-function-paren  Missing space before function parentheses  /Users/apple/Desktop/VUEJS/vuePro/myvueProject01/src/App.vue:34:20  addNew: function(){
                         ^

  ✘ http://eslint.org/docs/rules/space-before-blocks          Missing space before opening brace  /Users/apple/Desktop/VUEJS/vuePro/myvueProject01/src/App.vue:34:22  addNew: function(){
                           ^

  ✘ http://eslint.org/docs/rules/no-mixed-spaces-and-tabs     Mixed spaces and tabs  /Users/apple/Desktop/VUEJS/vuePro/myvueProject01/src/App.vue:35:2 console.log(this.newItem); }
    ^

  ✘ http://eslint.org/docs/rules/brace-style                  Closing curly brace should be on the same line as opening curly brace or on the line after the previous block  /Users/apple/Desktop/VUEJS/vuePro/myvueProject01/src/App.vue:35:5 console.log(this.newItem); }
             ^

  ✘ http://eslint.org/docs/rules/indent                       Expected indentation of 4 space characters but found 2  /Users/apple/Desktop/VUEJS/vuePro/myvueProject01/src/App.vue:35:5 console.log(this.newItem); }
             ^

  ✘ http://eslint.org/docs/rules/semi                         Extra semicolon  /Users/apple/Desktop/VUEJS/vuePro/myvueProject01/src/App.vue:35:30 console.log(this.newItem); }
                                      ^


✘ 22 problems (22 errors, 0 warnings)  Errors: 10 http://eslint.org/docs/rules/indent 5 http://eslint.org/docs/rules/no-mixed-spaces-and-tabs 2 http://eslint.org/docs/rules/space-before-blocks 2 http://eslint.org/docs/rules/space-before-function-paren 1 http://eslint.org/docs/rules/semi 1 http://eslint.org/docs/rules/brace-style 1 http://eslint.org/docs/rules/space-infix-ops 

因为你设置了eslint,如果你不想有规范的js代码,可以重新初始化关掉eslint。
Use ESLint to lint your code? (Y/n) 这一步选no

如果你想有良好的规范,其实错误已经很清晰,大多数就是缩进不规范,分号不需要等原因,很容易解决的。写多了就成习惯了。

在bulid/webpack.base.conf.js里面有配置如下:
module: {
rules: [

...(config.dev.useEslint ? [createLintingRule()] : []),

点进config.dev.useEslint,发现在config/index.js里配置
useEslint: true, // 改为false即可。