nuxt 使用 markdown组件

简单介绍一下,在nuxt里 引用 vue-markdown 组件。
组件Git 地址:https://github.com/miaolz123/...
1,安装
NPM

$ npm install --save vue-markdown

【nuxt 使用 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,在需要的页面调用

效果如下图所示:
nuxt 使用 markdown组件
文章图片

在文本域里编写 markdown 格式的文本,组件就会自动解析并进行展示。
如果,想要修改其中的样式,需要定位具体的位置。
我是采用 /deep/ 的方式进行定位。
#markdown /deep/ p { color: rgb(17, 180, 139) }

    推荐阅读