vue no-parsing-error x-invalid-end-tag 报错

3月 7, 2020

分类:vue

问题

vue + iview + eslint环境下开发,写一个<Input></Input>时报了错,提示如下:

Parsing error: x-invalid-end-tag.

原因

iView在标签渲染为原生html标签时候，因为这些标签是自闭合的，所以有end标签会报错

解决

vue cli2:

在根目录下找到.eslintrc.js – rules文件
在rules中添加一行，内容为：
‘vue/no-parsing-error’: [2, { ‘x-invalid-end-tag’: false }] // 关闭对iview end-tag 检查
重启启动服务 npm run serve / npm run dev。

vue cli3:

进入vue ui运行的http://localhost:8000管理界面
找到:配置-ESLint configuration-规则-vue/no-parsing-error, 改为关闭并保存修改
重新启动server

nuxt sass全局引入不起作用bug

11月 10, 2019

分类:vue

问题

nuxt 全局引入sass时,官方例子有bug, github上已经有各种讨论,有很多方法是旧版本的解决方案,无法使用

解决方案

基于 nuxt 2.0.0版本的解决方案

步骤一

安装npm包

npm i -D @nuxtjs/style-resources sass-loader node-sass

步骤二

配置nuxt.config.js

module.exports = {
    // Other nuxt.config.js

    modules: ['@nuxtjs/style-resources'],
    styleResources: {
        scss: [
            'assets/css/global.scss',
            'assets/css/main.scss'
        ]
    }
}

扩展

附上2.0.0之前的旧版本的配置,可能有用,未尝试,但是 2.0.0 版本没有用

步骤一

安装npm包

npm i nuxt-sass-resources-loader

步骤二

配置nuxt.config.js

module.exports = {
    // Other nuxt.config.js

    modules: [
        [
            'nuxt-sass-resources-loader', 
            [
                'assets/css/global.scss',
                'assets/css/main.scss'
            ]åç
        ]
    ]
}

v-for id重复问题

9月 27, 2019

分类:vue

vue中v-for 使用i 指定了唯一key,且v-for的组件内部又嵌套了v-for的组件,id会有重复的问题,

这里分享个小技巧,加前缀防止相同的id

<div v-for="(item, i) in items" :key="i"></div>

<div v-for="(item, i) in items2" :key="`A-${i}`"></div>

<div v-for="(item, i) in items3" :key="`B-${i}`"></div>