[从入门到入土(前端篇)]四,md插件使用
markdown的语法,可以让我们快速创建一篇好看的文章.在vue-cli中我们使用的是mavon-editor插件,在vite2中并不兼容,所以项目使用@kangc/v-md-editor来达到同样的效果
1.安装依赖
npm install @kangc/v-md-editor@next
- 这里要注意,因为我们使用是vue3 后面要加上@next否则会报错
2.引入
我们需要在main.js中引入插件
// Markdown 编辑插件
import VueMarkdownEditor from '@kangc/v-md-editor'
import '@kangc/v-md-editor/lib/style/base-editor.css'
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js'
import '@kangc/v-md-editor/lib/theme/style/vuepress.css'
// markdown 显示插件
import VMdPreview from '@kangc/v-md-editor/lib/preview'
import '@kangc/v-md-editor/lib/style/preview.css'
// 引入你所使用的主题 此处以 github 主题为例
// import githubTheme from '@kangc/v-md-editor/lib/theme/github'
VMdPreview.use(vuepressTheme)
VueMarkdownEditor.use(vuepressTheme)
...
app.use(VueMarkdownEditor) // markDown编辑器
app.use(VMdPreview) // markDown 显示
官网中有许多配置,比如国际化,主题修改等等,我们可以根据项目具体需求进行修改.
3.使用编辑
我们新建mdEditor.vue 并打开
<v-md-editor
v-model="text"
height="600px">
</v-md-editor>
绑定的text值记录着md的文本内容.我们看看效果
关于实际使用中的,图片上传,还有md文档上传功能,会在后续文章中单独呈现.
4.使用预览
我们新建mdShow.vue 并打开
<v-md-preview :text="content"></v-md-preview>
content的值就是md的文档内容,插件会自动渲染到界面
我们本地模拟获取远端的md文件并渲染
在public目录下建立demo.md文件,并输入测试内容
在demo.js api中,输入获取该测试文件的api接口
export const demoMD=()=>{
return http.get("http://localhost:3000/demo.md", {});
}
在mdShow.vue 中调用接口并且获取md文件内容
demoMD({}).then((res)=>{
console.log(res);
this.content = res;
})
运行看效果
结语
运行到这里,md插件的简单使用(编辑md内容和渲染md内容)到这里就结束了.
当实际运用到博客网站的时候,我们还需要有上传图片,上传md文件等等其他操作,这些功能会在上传文件到OSS文章中详细说明
版权声明:本文为qq_38420303原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。