vue-cli bug

Vue 引入路径正确的，但一直报错： Already included file name ‘××ב differs from file name ‘××ב only in casing.

引入的文件名和地址都是正确的，但是还是报错误
Already included file name ‘×××’ differs from file name ‘×××’ only in casing.

这时候我们只要把文件名的后缀vue去掉就好了
解决方案

解决方式一：把文件名的后缀vue去掉就好了

解决方式二：把路径前面的点改成@

路径 作用
. / 当前文件同级目录
. . / 当前文件上一级目录
@ 在引入模块时，可以使用 @ 代替 /src 目录，指相对路径

slot内样式不生效

vue项目中通常会给style标签加上scope属性，以此来实现样式的私有化，避免全局污染。但有的时候这个属性又会带来麻烦：当引入第三方组件且需要修改其样式时，通常出现没有修改成功的情况

由此可以看出：
1、添加scoped属性之后，DOM节点添加了一个不重复的data属性来表示其唯一性
2、添加scoped属性之后，DOM节点的css选择器末尾添加了data属性选择器来私有化该元素的样式
3、添加scoped属性之后，会给组件的最外部添加data属性，如果组件里面还有包含其他组件，那么其他组件是作用不到的

解决引入第三方组件并修改其样式不生效的问题

1、解决方案一：因为vue文件中可以出现多个style，所以可以使用两个style，一个style加上scoped属性，一个style不加scoped属性，
且将第三方组件中嵌套的元素样式放置在不带scoped的style元素内，这样子第三方组件中的嵌套元素中样式就可以生效了
2.解决方案二：使用深度选择器： <<< 或者 /deep/
穿透性的改变第三方组件的样式需要加上deep,如果是stylus使用 >>> ,如果是less 或者sass就使用 /deep/

使用slot后样式丢失

去掉template外面默认的div即可

DOMException: Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node.at VueComponent.handleDom

1.因为组件的根标签的类名与组件名重复了，应该换一个类名

Cannot read property ‘0’ of undefined

我们发现这里的info是vuex中state管理加载的数据，异步调用显示，然后vue渲染机制中：

异步数据先显示初始数据，再显示带数据的数据，

所以上来加载info时候还是一个空对象如下
所以在渲染时，出现的三层表达式在info中取support[0]数组中的小标为0的对象还不存在，再在这个对象中取其他值自然会报错，但是渲染完成后，info中的值加载好了，自然可以取到，这也就解释了为什么界面正常显示，但开发者工具会报错的原因。

【解决方案】：

在上面一个div中添加v-if判断条件，如果info.supports取不到，则不加载该div即可解决。（注意，不能用v-show，v-show的机制是加载后，根据条件判断是否显示）

或者给根标签v-if="Object.keys(数据).length!==0

vue中’. native’修饰符的使用

通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加’. native’事件是无法触 发的,就是给子组件绑定事件

项目中报错： NavigationDuplicated: Avoided redundant navigation to current location:

（NavigationDuplicated: 避免了对当前位置的冗余导航）

解决方法：

这个报错的关键是this.$router.push(…).catch(err => err)要有后面的catch。因为跳转方法返回了一个promise对象，要有处理拒绝的方法。

首先检查，路由跳转的时候是不是调用的push方法，还是用的replace？

打开 router 文件夹下的 index.js（路由文件）文件中添加如下代码：

//     push方法

const routerRePush = VueRouter.prototype.push
VueRouter.prototype.push = function (location) {
  return routerRePush.call(this, location).catch(error => error)
}

//     replace 方法
const routerReplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function (location) {
  return routerReplace.call(this, location).catch(error => error)
}

然后重新运行项目，问题解决

element-ui的css样式不生效

在main.js引入import ‘element-ui/lib/theme-chalk/index.css’

get请求参数拼接在url中

是get(‘categories/’+id);
不是 get(‘categories/: ${id}’);

例子

1.6.4. 编辑提交分类

• 请求路径：categories/:id
• 请求方法：put
• 请求参数

参数名	参数说明	备注
:id	分类 ID	不能为空携带在url中
cat_name	分类名称	不能为空【此参数，放到请求体中】

 const { data: res } = await this.$http.put(
        "categories/" + this.editcartform.cat_id,
        {
          cat_name: this.editcartform.cat_name,
        }
      );