简单介绍一下,在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,在需要的页面调用
效果如下图所示:
文章图片
在文本域里编写 markdown 格式的文本,组件就会自动解析并进行展示。
如果,想要修改其中的样式,需要定位具体的位置。
我是采用
/deep/
的方式进行定位。#markdown /deep/ p {
color: rgb(17, 180, 139)
}