Skip to content

后台前端引入组件

liaofei edited this page Jan 20, 2021 · 1 revision

引入外部模块

默认已经内置了许多模块,在一些业务中,可能还需要引入第三方的模块,以vue-grid-layout为例。

1、安装依赖

在终端安装vue-grid-layout

$ npm install vue-grid-layout --save  或者  $ cnpm install vue-grid-layout --save

2、使用

全局注册

src/main.js中注册并使用组件:

// 导入组件
import { GridLayout} from 'vue-grid-layout';

// 使用组件
Vue.component('i-grid-layout', GridLayout);

全局注册后,任何地方都可以使用组件了,无需在页面中注册。

局部注册

只在需要的页面或组件中注册:

<template>
  <i-grid-layout></i-grid-layout>
</template>
<script>
import { GridLayout} from 'vue-grid-layout';
export default {
  components: { GridLayout},
  data () {
    return {

    }
  }
}
</script>

自己封装组件

自己封装的组件,可以放置在src/components目录下,使用方法不变。

Clone this wiki locally