关于nuxt.js: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)
}