## 引入外部模塊
默認已經內置了許多模塊，在一些業務中，可能還需要引入第三方的模塊，以`vue-grid-layout`為例。
### 安裝依賴
在終端安裝`vue-grid-layout`：
~~~
$ npm install vue-grid-layout --save
~~~
### 使用
#### 全局注冊
在`src/main.js`中注冊并使用組件：
~~~
// src/main.js
// 導入組件
import { GridLayout, GridItem } from 'vue-grid-layout';
// 使用組件
Vue.component('i-grid-layout', GridLayout);
Vue.component('i-grid-item', GridItem);
~~~
全局注冊后，任何地方都可以使用`<i-grid-layout>`和`<i-grid-item>`兩個組件了。
#### 局部注冊
只在需要的頁面或組件中注冊：
~~~
<template>
<i-grid-layout>
<i-grid-item />
</i-grid-layout>
</template>
<script>
import { GridLayout, GridItem } from 'vue-grid-layout';
export default {
components: { GridLayout, GridItem },
data () {
return {
}
}
}
</script>
~~~
### 自己封裝組件
如果是自己封裝的組件，可以放置在`src/components`目錄內，使用方法不變。
