## 引入外部模塊 默認已經內置了許多模塊，在一些業務中，可能還需要引入第三方的模塊，以`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`目錄內，使用方法不變。