这篇文章主要介绍了vueinstall注册全局组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue install注册全局组件
项目中的某些构件使用频繁。这时候就可以注册全局组件了，这样就不用每次使用的时候都要反复导入组件了。
具体步骤如下
一般来说，这个常用的组件会被注册在main.js文件中。
1.首先先建立一个公用的组件// Cmponent.vue 公用的组件lt;templategt;? ? lt;divgt;? ? ? ? 我是组件? ? lt;/divgt;lt;/templategt;lt;scriptgt;? ? export default {?? ? }lt;/scriptgt;lt;style scopedgt;? ? div{? ? ? ? font-size:40px;? ? ? ? color:#fbb;? ? ? ? text-align:center;?? ?}lt;/stylegt;
2.新建一个install.js文件import component from './Cmponent.vue'const component = {? ? install:function(Vue){? ? ? ? Vue测试数据ponent('component-name',component)? ? } ?//'component-name'这就是后面可以使用的组件的名字，install是默认的一个方法 component-name 是自定义的，我们可以按照具体的需求自己定义名字}// 导出该组件export default component
3.在main.js文件中注册// 引入组件import install from '@plugins/install';?// 全局挂载utilsVue.use(install);
4.在页面中使用lt;templategt;? ?lt;divgt;? ? ? lt;component-namegt;lt;/component-namegt;? ?lt;/divgt; ? ?lt;/templategt;
vue插件的install方法MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = function () { // 逻辑... } // 2. 添加全局资源 Vue.directive('my-directive', { bind (el, binding, vnode, oldVnode) { // 逻辑... } ... }) // 3. 注入组件 Vue.mixin({ created: function () { // 逻辑... } ... }) // 4. 添加实例方法 Vue.prototype.$myMethod = function (methodOptions) { // 逻辑... }}import Vue from 'vue'import VueI18n from 'vue-i18n'Vue.use(VueI18n)
下面是vue插件的使用方法。通过全局方法Vue.use()使用插件。
插件通常为Vue添加全局功能。插件的范围没有限制；；一般有以下几种:添加全局方法或属性；添加全局资源:指令/过滤器/转换等。通过全局mixin方法添加一些组件选项；添加Vue实例方法，通过将它们添加到Vue.prototype来实现
了解vue插件的安装方法，对我们写大型项目很有帮助。
以上个人经验，希望能给你一个参考，也希望你能支持一下搜源网。
查看更多关于vueinstall注册全局组件的方式的详细内容...