封装插件:在 src/componets/index.js
里定义插件
在 src/main.js
里使用插件
src/componets/index.js
// 扩展vue原有的功能:全局组件,自定义指令,挂载原型方法,注意:没有全局过滤器。
// 这就是插件
// vue2.0插件写法要素:导出一个对象,有install函数,默认传入了Vue构造函数,Vue基础之上扩展
// vue3.0插件写法要素:导出一个对象,有install函数,默认传入了app应用实例,app基础之上扩展
import XtxSkeleton from './xtx-skeleton.vue'
export default {
install (app) {
// 在app上进行扩展,app提供 component directive 函数
// 如果要挂载原型 app.config.globalProperties 方式
app.component(XtxSkeleton.name, XtxSkeleton)
}
}
src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './mock'
+import XtxUI from './components/index.js'
import 'normalize.css'
import '@/assets/styles/common.less'
+// 插件的使用,在main.js使用app.use(插件)
+createApp(App).use(store).use(router).use(XtxUI).mount('#app')