一、项目中的自定义组件
二、为了方便使用,并进行统一管理,首先可以在components中创建 index.ts 文件。
三、index.ts 文件中的内容如下:
// 引入项目中的全局组件
import SvgIcon from './SvgIcon/index.vue' // 引入自定义的svg组件
import CardCom from './CardCom/index.vue' // 引入自定义的卡片组件
const allGloablCom ={ SvgIcon,CardCom } // 将自定义组件放入对象中
// 对外暴露插件对象
export default{
// 只能叫做 install 方法
install( app ){
// 循环遍历,注册 allGloablCom 中全部组件
Object.keys( allGloablCom ).forEach( key =>{
// 注册为全局组件
app.component( key,allGloablCom[key] )
} )
}
}
四、将封装好的全局组件在 main.ts 中引入。