vue整合markdown

• 初始化项目

npm init @vitejs/app
cd md-demo01
npm install
npm run dev

• 参考

# 安装依赖
npm i @kangc/v-md-editor@next -S
 
# main.js
import { creatApp } from 'vue';
import VMdEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';
VMdEditor.use(githubTheme);
const app = creatApp(/*...*/);
app.use(VMdEditor);
 
# 基本使用
<template>
  <v-md-editor v-model="text" height="400px"></v-md-editor>
</template>
 
<script>
import { ref } from 'vue';
export default {
  setup () {
    const text = ref('');
    
    return {
      text
    }
  }
}
</script>

• 渲染md

<template>
  <v-md-editor v-model="markdown" mode="preview"></v-md-editor>
</template>
 
<script>
import { ref } from 'vue';
export default {
  setup () {
    const markdown = ref('');
    return {
      markdown
    }
  },
  data() {
        return {
        }
  },
  methods: {
        dddd() {
            console.log("asfas")
            this.markdown = "adsfasd"
        }
    },
    created(){
        this.dddd();
    }
}
</script>