迪丽热-BUG

关于VUE的疑难杂症(持续更新)

在学习的路上不断遇到问题解决并记录下来～～

图片路径引入问题

在data中引入请使用require引入

img: require("../assets/images/ice.png")
1

在export default外面引入使用import

import jklogo from "@/assets/images/jklogo.png";
1

使用相对路径或在路径前加～

<img src="～@/img/img1.png"/>
1

使用:style背景图引用

:style="{background: 'url('+item.image+')',height:'100%','background-position':'center'}"
1

Vue-cli全局注册组件问题

在components中创建components.js

//引入文件
import CardLong from "@/components/CardLong.vue";

const components = {
  install(Vue) {
    //注册
    Vue.component("v-card-long", CardLong);
  }
};
//导出
export default components;
1
2
3
4
5
6
7
8
9
10
11

在main.js使用

import components from "./components/components";

Vue.use(components);
1
2
3

Layout布局问题

子会继承父的模版

routes:[
	{
		path:"/",
		name:"root",
		component:Layout,
		children:[
			{
				path:"/home",
        name:"Home",
        component:Home,
			}
		]
	}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14

关于组件自动注册如何解决

在src中创建auth.js放置以下代码

import Vue from "vue";
//其组件目录的相对路径 是否查询其子目录 匹配基础组件文件名的正则表达式
const componentsContext = require.context(
  "./components/_global",
  true,
  /.vue$/
);
componentsContext.keys().forEach(component => {
  // 获取组件配置
  const componentConfig = componentsContext(component).default;
  Vue.component(componentConfig.name, componentConfig);
});
1
2
3
4
5
6
7
8
9
10
11
12
13

注册的组件export default中必须有name属性作为标签名使用

main.js中引入auth.js

import '@/auth'
1

双v-for循环实例

 <div class="container">
  <dl class="catalog-list" v-for="item in category" :key="item.id">
    <dt class="catalog-list-title">{{ item.name }}</dt>
    <dd
      class="catalog-list-item"
      v-for="index in item.contents"
      :key="index.id"
      :style="{ color: index.color }">
      {{ index.name }}
    </dd>
  </dl>
</div>
1
2
3
4
5
6
7
8
9
10
11
12

实际操作于获取到的数组中还存在数组

跨域配置

如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。>>详情

module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}
1
2
3
4
5

模版继承问题
1

Vue.js是什么? →