[从入门到入土(前端篇)]四,md插件使用

[从入门到入土(前端篇)]四,md插件使用

markdown的语法,可以让我们快速创建一篇好看的文章.在vue-cli中我们使用的是mavon-editor插件,在vite2中并不兼容,所以项目使用@kangc/v-md-editor来达到同样的效果

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文章中详细说明