浅谈vue中插件的使用方法Vue.use(xxx),原理及实现
2023-09-11 14:22:30 时间
使用vue的过程中,可能会把某个组件封装起来,供其他页面有相同的需求时可以直接导入使用,不需要再重写一遍,提高效率,避免代码冗余
平时我们会如何使用ui组件库的呢?
以ElementUI为例:
1。安装
npm i element-ui -S
2.导入,app.use()注册
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
那 Vue.use(xxx),背后到底为我们做了些什么工作呢?
回忆一下组件的封装过程:
这里以封装button组件为例
1.在components下新建一个button.vue文件
<template>
<div>
我是button
</div>
</template>
<script>
export default {
name:"xx-button"
}
</script>
<style>
</style>
2.main.js中导入并注册组件
import Vue from 'vue'
import App from './App.vue'
import Button from './components/button.vue'
Vue.component(Button.name,Button)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
这样就可以在全局中使用组件了
<template>
<div>
<xx-button> </xx-button>
</div>
</template>
app.use()实现
同理想要使用ElementUI的组件,我们也需要注册,而调用app.use(xxx)方法的时候,也是内部调用install方法注册组件的时候
例子如下:
可以新建一个install.js文件,写入如下代码
// 统一导出
// 导入颜色选择器组件
//假设这些都是ElementUI封装好的组件
import Button from './button'
import Dialog from './dialog'
import Input from './input'
import Checkbox from './checkbox'
import Radio from './radio'
import RadioGroup from './radio-group'
import Switch from './switch'
import CheckboxGroup from './checkbox-group'
import Form from './form'
import FormItem from './form-item'
import './fonts/font.scss'
// 存储组件列表
const components = [
Button,
Dialog,
Input,
Checkbox,
Radio,
RadioGroup,
Switch,
CheckboxGroup,
Form,
FormItem
]
// 定义 install 方法,接收 Vue 作为参数。如果使用 use 注册插件,则所有的组件都将被注册
const install = function (Vue) {
// 遍历注册全局组件
components.forEach(component => {
Vue.component(component.name, component)
})
}
// 判断是否是直接引入文件,如果是,就不用调用 Vue.use()
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
// 导出的对象必须具有 install,才能被 Vue.use() 方法安装
export default {
install
}
在main.js中进行导入
调用use,会调用install.js中的install方法,逐个遍历组件进行全局注册
import Vue from 'vue'
import App from './App.vue'
import TestUI from '../packages'
//调用use,会调用install.js中的install方法,逐个遍历组件进行全局注册
Vue.use(TestUI)
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')
这样也就完成了对插件导入后,使用app.use()方法进行安装的封装了,
相关文章
- (尚019)Vue基于脚手架编写项目
- Vue 异步请求
- VSCode调试Html中的脚本 vscode前端常用插件推荐,搭建JQuery、Vue等开发环境 vsCode 添加浏览器调试和js调试的方法总结 VS Code - Debugger for Chrome调试js
- 2 Vue 中的mounted()方法用 setInterval
- 【Vue】错误 : 无法加载文件 C:UsersAdministratorAppDataRoamingnpmvue.ps1,因为在此系统上禁止运行脚本的解决方法
- 【Vue】组件template中提示“TypeScript intellisense is disabled on template. To enable, configure `“jsx“: ”错误
- 【Vue】Vue中“插件”的调用方法
- 【Vue】通过watchmethodscomputed三种方法实现列表的筛选查找(图文+完整代码)
- vue + echarts
- Vue - 判断访问网页客户端设备是手机移动端还是 PC 电脑端(判断设备类型是否是移动端手机)
- vue项目中定义全局变量、函数的几种方法
- Vue2.0 搭建Vue脚手架(vue-cli)
- Vue-cli / webpack 加载静态js文件的方法
- vue项目中router路由配置
- vue动态路由
- Vue 数据双向绑定
- Vue评论案例--数据存放本地---联系子组件调用父组件方法(子组件点击发表-调用父组件更新评论列表)
- VUE-015-解决 vue install 引发的 failed Error: not found: python2 问题
- VUE-004-禁止修改页面显示项,设置el-input,textarea只读方法
- VUE图片懒加载-vue lazyload插件的简单使用
- 【Vue】vue基础语法——computed计算、watch监听、class和style,最后回顾JavaScript里面的常用方法(vue学习day03)
- vue学习笔记八:Jquery VS Vue之全局属性对照
- 在vue中引入layer弹框的简易方法
- Vue脚手架(vue-cli)搭建和目录结构详解
- Vue之mitt事务总线使用方法
- 如何使用vue-table-with-tree-grid树形表格组件
- Vue中computed和watch使用场景和方法
- Vue 之 插件 轮播组件 vue-awesome-swiper 的简单使用整理
- Vue学习第19天——vue脚手架配置代理
- Vue学习第14天——vue自定义事件及详细代码演示
- Vue学习第13天——vue中使用自定义插件
- [转]vue Element UI走马灯组件重写