引入外部模塊

默認(rèn)已經(jīng)內(nèi)置了許多模塊，在一些業(yè)務(wù)中，可能還需要引入第三方的模塊，以vue-grid-layout為例。

安裝依賴(lài)

在終端安裝vue-grid-layout：

$ npm install vue-grid-layout --save

使用

全局注冊(cè)

在src/main.js中注冊(cè)并使用組件：

// src/main.js
// 導(dǎo)入組件
import { GridLayout, GridItem } from 'vue-grid-layout';
// 使用組件
Vue.component('i-grid-layout', GridLayout);
Vue.component('i-grid-item', GridItem);

全局注冊(cè)后，任何地方都可以使用<i-grid-layout>和<i-grid-item>兩個(gè)組件了。

局部注冊(cè)

只在需要的頁(yè)面或組件中注冊(cè)：

<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目錄內(nèi)，使用方法不變。