{{userInfo.nickname}}
用户设置 退出登录

{{wikiTitle}}

前端引用组件

引入外部模块

默认已经内置了许多模块,在一些业务中,可能还需要引入第三方的模块,以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目录内,使用方法不变。

{{cateWiki.like_num}}人点赞
0人点赞
评论({{cateWiki.comment_num}}) {{commentWhere.order ? '评论从旧到新':'评论从新到旧'}} {{cateWiki.page_view_num}}人看过该文档
评论(0) {{commentWhere.order ? '评论从旧到新':'评论从新到旧'}} 103人看过该文档
评论
{{item.user ? item.user.nickname : ''}} (自评)
{{item.content}}
{{item.create_time}} 删除
{{item.like ? item.like.like_num : 0}} {{replyIndex == index ? '取消回复' : '回复'}}
评论
{{items.user ? items.user.nickname : '暂无昵称'}} (自评)
{{items.content}}
{{items.create_time}} 删除
{{items.like ? items.like.like_num : 0}} {{replyIndexJ == (index+'|'+indexJ) ? '取消回复' : '回复'}}
评论
目录
  • {{item}}