nuxt 使用 markdown组件

简单介绍一下，在nuxt里 引用 vue-markdown 组件。
组件Git 地址：https://github.com/miaolz123/...

1，安装

NPM

$ npm install --save vue-markdown

Yarn

$ yarn add vue-markdown --save

2，使用

2.1，新建 vue-markdown 文件
在 plugins 下，新建 vueMarkdown 文件，引入安装的组件

import Vue from 'vue';
import VueMarkdown from 'vue-markdown';
Vue.component("VueMarkdown", VueMarkdown);

2.2， 在nuxt.config.js 里调用 vueMarkdown 文件

plugins: [
    '~/plugins/vueMarkdown'
  ],

2.3，在需要的页面调用

<template>
  <div>
    <el-input v-model="source" type="textarea"></el-input>
    <vue-markdown id="markdown" :source="source"></vue-markdown>
  </div>
</template>

效果如下图所示：

在文本域里编写 markdown 格式的文本，组件就会自动解析并进行展示。
如果，想要修改其中的样式，需要定位具体的位置。
我是采用 /deep/ 的方式进行定位。

#markdown /deep/ p {
  color: rgb(17, 180, 139)
}