Closed fofofofoxier closed 4 years ago
用vue-cli3初始化工程,然后按照文档 yarn add markdown-it-vue 引入依赖 但是在如下代码当中没有任何效果,markdown-it-vue编辑器完全没有渲染出来,页面是空白的
yarn add markdown-it-vue
<template> <div> <markdown-it-vue :content="content" :options="options"/> </div> </template> <script> import MarkdownItVue from 'markdown-it-vue'; import 'markdown-it-vue/dist/markdown-it-vue.css'; export default { components: { MarkdownItVue }, name: 'HelloWorld', props: { msg: String }, data:function () { return { options: { markdownIt: { linkify: true }, linkAttributes: { attrs: { target: '_blank', rel: 'noopener' } } }, content:"hello?" } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>
package.json:
{ "name": "md-test", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.4.3", "markdown-it": "^10.0.0", "markdown-it-vue": "^1.0.11", "vue": "^2.6.10" }, "devDependencies": { "@vue/cli-plugin-babel": "^4.1.0", "@vue/cli-plugin-eslint": "^4.1.0", "@vue/cli-service": "^4.1.0", "babel-eslint": "^10.0.3", "eslint": "^5.16.0", "eslint-plugin-vue": "^5.0.0", "vue-template-compiler": "^2.6.10" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "rules": {}, "parserOptions": { "parser": "babel-eslint" } }, "browserslist": [ "> 1%", "last 2 versions" ] }
经测试是可以显示的,看下具体有没报错?
请问现在解决了吗,我的也是不显示不报错,什么都没有
不是不显示,content是绑定的你要输入的内容,这个组件的作用是对content进行解析。需要自己实现输入区域
楼上正解,这个只是一个现实组件,不是编辑器。为啥大家都理解为编辑器了。
用vue-cli3初始化工程,然后按照文档
yarn add markdown-it-vue
引入依赖 但是在如下代码当中没有任何效果,markdown-it-vue编辑器完全没有渲染出来,页面是空白的package.json: