用的技术站是 vue + vuecli + webpack + vue-router + Element-UI

自定义了个Home组件:

Home组件的功能: 轮播图

Vue用element-ui不渲染自己的组件问题_html页面

将Home组件在vue-router声明:

Vue用element-ui不渲染自己的组件问题_自定义_02

在App.vue中:

Vue用element-ui不渲染自己的组件问题_全局设置_03

在这里要说一下Header组件声明了  router-link 标签(Home的),并且用了element-ui的容器模板

问题

发现在html页面中router-view标签不渲染 

而且Vue也不报错

Vue用element-ui不渲染自己的组件问题_自定义_04

 

 

解决问题

不渲染的原因是因为我在全局设置了css样式 :

Vue用element-ui不渲染自己的组件问题_css样式_05

并且在main.js中导入了:

Vue用element-ui不渲染自己的组件问题_html页面_06

 

总结

在用第三方的组件框架时:

尽量不要在全局的css的这个样式:

<style>
    *{
        margin:0;
        padding:0;
    }
    
</style>

不然会影响第三方的页面布局,引起不必要的麻烦