如何在MkDocs中使用VueJS？已尝试实现但未生效

完全可以在MkDocs中使用VueJS，你的代码没生效主要是存在语法错误和MkDocs模板解析冲突的问题，以下是具体解决方法：

一、你的代码存在的问题 #

1. 第二个<script>标签语法错误：开头写成了script"，缺少左尖括号，导致脚本无法执行
2. Vue挂载元素时语法错误：.mount(#div1)应该是.mount('#div1')，元素选择器需要加引号
3. MkDocs默认使用Jinja2模板引擎，会解析{{}}语法，和Vue的插值语法冲突，导致Vue代码无法正常识别
4. 资源路径可能存在问题：./test.json的路径在MkDocs构建后可能和预期不符

二、修复后的完整代码示例 #

在你的Markdown文件中使用以下代码，注意用{% raw %}和{% endraw %}包裹Vue相关的HTML和脚本，避免Jinja2解析冲突：

{% raw %}
<script src="https://unpkg.com/vue@next"></script>

# Welcome to MkDocs

<h1 id="h1">Hallo</h1>
<div id="div1">
    <button id="btn1" v-on:click="readData">Klick hier</button>
    <!-- 给v-for添加key属性，符合Vue规范 -->
    <ul id="ul1" v-for="item in test" :key="item.number">
        <li>Name: {{item.name}}, Nummer: {{item.number}}</li>
    </ul>
    <p>{{test1}}</p>
</div>

<script>
Vue.createApp({
    data:function(){
        return{
            test: null,
            test1: "Guten Tag"
        }
    },
    methods: {
        readData: function(){
            // 确保test.json和当前Markdown文件在同一目录下
            fetch("./test.json")
                .then(res => res.json())
                .then(data => {
                    console.log(data);
                    this.test = data;
                })
        }
    }
}).mount('#div1')
</script>
{% endraw %}

三、额外注意事项 #

1. 资源路径配置：把test.json放在和你的Markdown文件相同的目录下（即docs目录内），如果需要放在单独的静态资源目录，可在mkdocs.yml中添加static_dirs配置：

static_dirs:
  - static

然后把test.json放在docs/static目录下，fetch路径改为/static/test.json

2. DOM加载时机：如果遇到Vue找不到挂载元素的情况，可以把脚本放在DOMContentLoaded事件中，确保DOM加载完成后再初始化Vue：

document.addEventListener('DOMContentLoaded', function() {
    Vue.createApp({
        // ... 你的Vue配置
    }).mount('#div1')
})

内容的提问来源于stack exchange，提问作者BBA