vue-cli3.0项目自定义一个全局组件

 在我们的项目中,总会有一些相同的东西要展示,比如说图标啊...,这个时候我们就可以把这些写成一个全局组件,哪里需要就直接用就可以了。

第一步:创建所需页面

vue-cli3.0项目自定义一个全局组件

1)创建你要全局的一个组件页面,如下svgIcon.vue

vue-cli3.0项目自定义一个全局组件

 2)在刚才创建的index.js页面引入你想要全局的组件

vue-cli3.0项目自定义一个全局组件

2,在main.js引入

vue-cli3.0项目自定义一个全局组件

3,在vue.config.js中配置vue路径

vue-cli3.0项目自定义一个全局组件

这里要注意了,在vue.config.js文件修改后要重新启动项目

4,在你需要的地方直接应用就可以了

vue-cli3.0项目自定义一个全局组件

vue-cli3.0项目自定义一个全局组件

5,效果图,这里就显示出你刚才在<svg-icon/>组件里面所写的内容了

vue-cli3.0项目自定义一个全局组件