我在运行vue项目时使用了ly-tab组件,由于代码是从官网直接CV过来的所以在运行时报如下错误:
ERROR Failed to compile with 1 error 19:58:19
[eslint]
C:\Users\微微一笑\Desktop\html\vue-shop\src\views\Home.vue
3:22 error Delete `␍` prettier/prettier
4:1 error Replace `↹<ly-tabs·␍⏎↹↹v-model="value"␍⏎↹↹activeColor='#b0352f'␍⏎↹↹>␍` with `····<ly-tabs·v-model="value"·activeColor="#b0352f">` prettier/prettier
8:1 error Replace `↹··<ly-tab-item·name="1"·title="选项卡1"·/>␍` with `······<ly-tab-item·name="1"·title="选项卡1"·/>` prettier/prettier
9:1 error Replace `↹··<ly-tab-item·name="2"·title="选项卡2"·/>␍` with `······<ly-tab-item·name="2"·title="选项卡2"·/>` prettier/prettier
10:1 error Replace `↹··<ly-tab-item·name="3"·title="选项卡3"·/>␍` with `······<ly-tab-item·name="3"·title="选项卡3"·/>` prettier/prettier
11:1 error Replace `↹··<ly-tab-item·name="4"·title="选项卡4"·/>␍` with `······<ly-tab-item·name="4"·title="选项卡4"·/>` prettier/prettier
12:1 error Replace `↹··<ly-tab-item·name="5"·title="选项卡5"·/>␍` with `······<ly-tab-item·name="5"·title="选项卡5"·/>` prettier/prettier
13:1 error Replace `↹··<ly-tab-item·name="6"·title="选项卡6"·/>␍` with `······<ly-tab-item·name="6"·title="选项卡6"·/>` prettier/prettier
14:1 error Replace `↹··<ly-tab-item·name="7"·title="选项卡7"·/>␍` with `······<ly-tab-item·name="7"·title="选项卡7"·/>` prettier/prettier
15:1 error Replace `↹` with `····` prettier/prettier
25:16 error Delete `␍` prettier/prettier
26:11 error Delete `␍` prettier/prettier
27:1 error Replace `······return··{␍` with `····return·{` prettier/prettier
28:1 error Replace `········value:·'1'␍⏎↹↹}␍` with `······value:·"1",` prettier/prettier
30:6 error Insert `;⏎··}` prettier/prettier
33:11 error Insert `,` prettier/prettier
37:1 error Delete `␍⏎␍` prettier/prettier
39:15 error Delete `␍` prettier/prettier
40:1 error Replace `↹.ly-tabs{␍` with `.ly-tabs·{` prettier/prettier
41:1 error Replace `↹↹position:·fixed;␍` with `··position:·fixed;` prettier/prettier
42:1 error Replace `↹↹top:·1.6rem;␍` with `··top:·1.6rem;` prettier/prettier
43:1 error Replace `↹↹left:·0;␍` with `··left:·0;` prettier/prettier
44:1 error Replace `↹}␍` with `}` prettier/prettier
45:9 error Insert `⏎` prettier/prettier
✖ 24 problems (24 errors, 0 warnings)
24 errors and 0 warnings potentially fixable with the `--fix` option.
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
ERROR in [eslint]
C:\Users\微微一笑\Desktop\html\vue-shop\src\views\Home.vue
3:22 error Delete `␍` prettier/prettier
4:1 error Replace `↹<ly-tabs·␍⏎↹↹v-model="value"␍⏎↹↹activeColor='#b0352f'␍⏎↹↹>␍` with `····<ly-tabs·v-model="value"·activeColor="#b0352f">` prettier/prettier
8:1 error Replace `↹··<ly-tab-item·name="1"·title="选项卡1"·/>␍` with `······<ly-tab-item·name="1"·title="选项卡1"·/>` prettier/prettier
9:1 error Replace `↹··<ly-tab-item·name="2"·title="选项卡2"·/>␍` with `······<ly-tab-item·name="2"·title="选项卡2"·/>` prettier/prettier
10:1 error Replace `↹··<ly-tab-item·name="3"·title="选项卡3"·/>␍` with `······<ly-tab-item·name="3"·title="选项卡3"·/>` prettier/prettier
11:1 error Replace `↹··<ly-tab-item·name="4"·title="选项卡4"·/>␍` with `······<ly-tab-item·name="4"·title="选项卡4"·/>` prettier/prettier
12:1 error Replace `↹··<ly-tab-item·name="5"·title="选项卡5"·/>␍` with `······<ly-tab-item·name="5"·title="选项卡5"·/>` prettier/prettier
13:1 error Replace `↹··<ly-tab-item·name="6"·title="选项卡6"·/>␍` with `······<ly-tab-item·name="6"·title="选项卡6"·/>` prettier/prettier
14:1 error Replace `↹··<ly-tab-item·name="7"·title="选项卡7"·/>␍` with `······<ly-tab-item·name="7"·title="选项卡7"·/>` prettier/prettier
15:1 error Replace `↹` with `····` prettier/prettier
25:16 error Delete `␍` prettier/prettier
26:11 error Delete `␍` prettier/prettier
27:1 error Replace `······return··{␍` with `····return·{` prettier/prettier
28:1 error Replace `········value:·'1'␍⏎↹↹}␍` with `······value:·"1",` prettier/prettier
30:6 error Insert `;⏎··}` prettier/prettier
33:11 error Insert `,` prettier/prettier
37:1 error Delete `␍⏎␍` prettier/prettier
39:15 error Delete `␍` prettier/prettier
40:1 error Replace `↹.ly-tabs{␍` with `.ly-tabs·{` prettier/prettier
41:1 error Replace `↹↹position:·fixed;␍` with `··position:·fixed;` prettier/prettier
42:1 error Replace `↹↹top:·1.6rem;␍` with `··top:·1.6rem;` prettier/prettier
43:1 error Replace `↹↹left:·0;␍` with `··left:·0;` prettier/prettier
44:1 error Replace `↹}␍` with `}` prettier/prettier
45:9 error Insert `⏎` prettier/prettier
✖ 24 problems (24 errors, 0 warnings)
24 errors and 0 warnings potentially fixable with the `--fix` option.
webpack compiled with 1 error
研究了半天发现是由于vue对于html的语法格式要求严格
<ly-tabs v-model="value" activeColor='#b0352f'>
<ly-tab-item name="1" title="选项卡1" />
<ly-tab-item name="2" title="选项卡2" />
<ly-tab-item name="3" title="选项卡3" />
<ly-tab-item name="4" title="选项卡4" />
<ly-tab-item name="5" title="选项卡5" />
<ly-tab-item name="6" title="选项卡6" />
<ly-tab-item name="7" title="选项卡7" />
</ly-tabs>
在标签中的换行符和Tab是原因之一,<ly-tab-item/>标签应该写成双向的<ly-tab-item></ly-tab-item>
最终将这段代码改成这样错误消失
<ly-tabs
v-model="value"
activeColor="#b0352f"
>
<ly-tab-item name="1" title="选项卡1"></ly-tab-item>
<ly-tab-item name="2" title="选项卡2"></ly-tab-item>
<ly-tab-item name="3" title="选项卡3"></ly-tab-item>
<ly-tab-item name="4" title="选项卡4"></ly-tab-item>
<ly-tab-item name="5" title="选项卡5"></ly-tab-item>
<ly-tab-item name="6" title="选项卡6"></ly-tab-item>
<ly-tab-item name="7" title="选项卡7"></ly-tab-item>
</ly-tabs>
或者还可以运行如下命令,格式化代码,也能解决这个问题
npm run lint
最后
修狗798希望能帮到您!