1、myPlugin.js文件

let MyPlugin = {};
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
// 逻辑...
console.log('myGlobalMethod')
} // 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
}) // 3. 注入组件
Vue.mixin({
created: function () {
// 逻辑...
}
}) // 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
console.log('myMethod')
}
}
export default MyPlugin

2、APP.vue文件

<template>

</template>
<script>
import Vue from 'vue'
import MyPlugin from './myPlugin'
Vue.use(MyPlugin) export default {
data() {
return {
}
},
methods: {
},
mounted: function(){
this.$myMethod();
Vue.myGlobalMethod();
}
}
</script>

说明:以上两个文件位于同一目录

组件注册完成,输出:

vue install 注册组件的更多相关文章

  1. vue统一注册组件

    文件夹下面组件数量较多,如果每一个组件先import然后在 components,虽然灭有问题,但是会导致代码量大,而且不直观 解决办法: 将图元组件进行统一注册 新建一个pixels文件,文件里面的 ...

  2. Vue.js 注册组件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 手把手教你实现一个 Vue 进度条组件!

    最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录. 来看下 npm 搜索组件时候的效果: so 下面咱们一起动手 ...

  4. vue.js之组件(上篇)

    本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...

  5. VueJs(8)---组件(注册组件)

    组件(注册组件) 一.介绍 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树 那么什么是组件呢? 组 ...

  6. vue.js之组件篇

    Vue.js 组件 模块化:是从代码逻辑的角度进行划分的: 组件化:是从UI界面的角度进行划分的. 组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重 ...

  7. Vue 入门之组件化开发

    Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...

  8. 详解Vue大护法——组件

    1.什么是组件化 人面对复杂问题的处理方式: 任何一个人处理信息的逻辑能力都是有限的 所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容. 但是,我们人有一种天生的能力,就是将问题进 ...

  9. vue 自动注册全局组件

    vue 自动注册全局组件 vue 注册全局组件的方式 const plugins = { install(Vue) { const requireComponent = require.context ...

随机推荐

  1. BZOJ 1452:[JSOI2009]Count(二维树状数组)

    [JSOI2009]Count 描述 输入 输出 1 2 分析: 裸二维bit,对每个颜色建一颗bit. program count; var bit:..,..,..]of longint; a:. ...

  2. BZOJ 1096: [ZJOI2007]仓库建设(DP+斜率优化)

    [ZJOI2007]仓库建设 Description L公司有N个工厂,由高到底分布在一座山上.如图所示,工厂1在山顶,工厂N在山脚.由于这座山处于高原内陆地区(干燥少雨),L公司一般把产品直接堆放在 ...

  3. htmilunit-- 针对抓取js生成的数据

    public static String  getHtml(String html){        // 模拟一个浏览器          @SuppressWarnings("resou ...

  4. UVA 12633 Super Rooks on Chessboard ——FFT

    发现对角线上的和是一个定值. 然后就不考虑斜着,可以处理出那些行和列是可以放置的. 然后FFT,统计出每一个可行的项的系数和就可以了. #include <map> #include &l ...

  5. 0-Broadcast机制原理简要介绍

    Broadcast机制简要介绍 来源: http://blog.csdn.net/luoshengyang/article/details/6730748 导语 广播机制在Android系统中,也不算 ...

  6. Java简明教程 12.多线程(multithreading)

    单线程和多线程 关于它们的区别,zhihu上有一个回答,我认为十分不错,如下: . 单进程单线程:一个人在一个桌子上吃菜. . 单进程多线程:多个人在同一个桌子上一起吃菜. . 多进程单线程:多个人每 ...

  7. nodejs安装教程

    http://www.runoob.com/nodejs/nodejs-install-setup.html nodejs官方下载,之后配置环境path,npm随着nodejs安装,自动安装 查看no ...

  8. HTML表格嵌套、合并表格

    一.表格元素< table> table常用属性 border:边框像素 width,height:表格宽度/高度 bordercolor:表格边框颜色 bgcolor:表格背景颜色 二. ...

  9. nodeJS(2)深了解: nodeJS 项目架构详解(app.js + Express + Http)

    简略了解:nodeJS 深了解(1): Node.js + Express 构建网站预备知识 环境: 环境: win7 + nodeJS 版本(node): 新建 nodeJS 项目: 名称为: te ...

  10. 【11】 Express安装入门与模版引擎ejs

    前言 Express简介和安装 运行第一个基于express框架的Web 模版引擎 ejs express项目结构 express项目分析 app.set(name,value) app.use([p ...