一、vue.use()自定義元件或者引用第三方元件（即vue文件中的外掛）？

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',
		}
	}
}

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()註冊元件？

2.1、註冊為全域性元件

例如：在main.js中，初始化根例項之前，將menu元件註冊到全域性

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

<shopMenu></shopMenu>

2.2、註冊區域性元件