vue插件（自定义组件或js文件使用），vue.extend()，vue.component()注册组件

一、vue.use()自定义组件或者引用第三方组件（即vue文档中的插件）？

参考：https://cn.vuejs.org/v2/guide/plugins.html

1.1、使用第三方组件

通常我们在vue里面使用别人开发的组件，第一步就是install,第二步在main.js里面引入，第三步Vue.use这个组件。例如：引入element-ui组件。

1.2、自定义组件或js文件

1.2.1、自定义组件

使用自定义的组件今天我简单的也来use一个自己的组件。例如： 自定义loading组件。
这里我用的webpack-simple这个简单版本的脚手架为例，安装，直接进入正题首先看下目前的项目结构： webpack首先会加载main.js，所以我们在main的js里面引入。我以element ui来做对比说明

import Vue from 'vue'
import App from './App.vue'

// 引入element-ui组件
import ElementUi from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

// 引入自定义组件。index.js是组件的默认入口
import Loading from '../components/loading'
Vue.use(Loading);

Vue.use(ElementUi);
new Vue({
el: '#app',
render: h => h(App)
})

然后在Loading.vue里面定义自己的组件模板

<!-- 这里和普通组件的书写一样 -->
<template>
<div class="loading">
loading...
</div>
</template>

在index.js文件里面添加install方法

import MyLoading from './Loading.vue'
// 这里是重点
const Loading = {
install: function(Vue){
Vue.component('Loading',MyLoading)
}
}

// 导出组件
export default Loading

接下来就是在App.Vue里面使用组件了，这个组件已经在main.js定义加载了

<template>
<div id="app">
<!-- 使用element ui的组件 -->
<el-button>默认按钮</el-button>

<!-- 使用自定义组件 -->
<Loading></Loading>
</div>
</template>

下面是效果图

1.2.2.1、自定义js文件一

main.js文件中引用

import config from './common/config.js'
Vue.use(config)

config.js文件，添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。

export default {
install: function (Vue) {
Vue.prototype.config = {
defaultImgSize: '_0x0',
}
}
}

组件中直接使用：config.dafaultSize获取到对象值

1.2.2.2、自定义js文件二

base.js文件：

export default {
created () {
window.vm = this;
let title = this.docTitle;
if(title == ""){
title = this.defaultTitle
}else{
if((this.defaultTitle).indexOf('-') == -1){
title = title + " - " + this.defaultTitle
}else{
let arr = this.defaultTitle.split(' - ');
title = title + " - " + arr[arr.length - 1]
}

}
document.title = title;
},
data () {
return {
defaultTitle: document.title,
docTitle: ""
}
},
filters: {
getResourceUrl (resourceCode) {
let url = "about:blank";
if(resourceCode){
url = Site.api.upfileBaseUrl + resourceCode;
}
return url;
},

//传入日期或者日期对象返回格式化的日期
getDate (d) {
let date,
dateObj;

if(_.isString(d)){
dateObj =new Date(d);
}
if(_.isDate(dateObj) && "Invalid Date" != dateObj.toString()){
date = Site.globalize.format(dateObj,"yyyy年MM月dd日");
}else{
date = "----年--月--日"
}
return date;
},

//传入数字返回格式化的价格
getPrice (number) {
let price = number - 0; //转成数字
if(isNaN(price)){
price = 0;
}
price.toFixed(2);
return "￥" + price.toFixed(2);
},

//传入数字返回格式化的重量
getWeight (number) {
let weight = number - 0; //转成数字
if(isNaN(weight)){
weight = 0;
}
return "约 " + weight + "g";
}
},
methods: {
getProductSpec (data, name) {
let list = [];
if(_.isArray(data)){
_.each(data, item => {
if(item.DataName == name){
list = item.DataList || [];
return false;
}
});
}
return list;
}
}
}

组件中引入：

import base from '../mixins/base'
methods中使用：
getPrice (price) {
return base.filters.getPrice(price);
},

二、vue.extend()创建一个组件构造器？vue.component()注册组件？

参考：https://blog.csdn.net/qq_25371579/article/details/78476990
流程：创建组件------->注册组件---->使用组件

2.1、注册为全局组件

例如：在main.js中，初始化根实例之前，将menu组件注册到全局

import menu from './components/menu/index'
Vue.component('shopMenu',menu)

根实例中所有组件都可以直接引用此组件

<shopMenu></shopMenu>

2.2、注册局部组件

阅读更多