如何将Vue代码放入vue中的<code>标签中

Question

这是我第一次制作 npm 包，我正在制作包的演示，我想放一个组件使用的示例。

当我将组件用法放入 pre 和 code 标记中时，如下所示

它显示这个错误

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <style>, as they will not be parsed.

这是我的代码（App.vue）：

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <style>, as they will not be parsed.

我希望它像 HTML 中的普通标签一样工作。我已经尝试下载一些代码块 npm 包，它仍然不起作用，我需要你们的帮助和建议，感谢您的帮助

Answer 1

v-pre指令应该告诉 Vue 不要编译模板的该部分，但如果其内容包含（例如）标签，Vue 似乎仍然会抛出相同的警告<script>。无论如何，它不会将其内容显示为原始 HTML。您需要将其提取到数据变量中，而不是在此处使用v-html（这与您想要的相反）：

new Vue({
  el: '#app',
  data() {
    return {
      codeSample: `
<template>
    <vlider
    :id="'first'"
    :vlider-data="slider"
    :theme="'theme-dark'"
    v-model="inputRange"
    @click="vliderClick()"
    >
        <template> slot="bullet" slot-scope="bullet"
            <label>{{ bullet.data.label }}</label>
            <i
            class="em"
            :class="['em-\${bullet.data.extras.icon}']"
            ></i> 
            <a target="_blank" :href="bullet.data.extras.learnMore">Learn more ?</a>
        </template>
    </vlider>
</template>
<script>
    import Vlider from "vlider";
    export default {
        name: "app",
        components: {
            Vlider
        },
        data() {
            return {
                inputRange: null,
                slider: [
                    {label: "Angry", color: "#ffc300", extras: { icon: 'angry', learnMore: 'http://localhost/'}},
                    {label: "Expressionless", color: "#ffb0fe", extras: { icon: 'expressionless', learnMore: 'http://localhost/'}},
                    {label: "Astonished", color: "#ff6bd6", extras: { icon: 'astonished', learnMore: 'http://localhost/'}},
                    {label: "Confounded", color: "#ff9d76", extras: { icon: 'confounded', learnMore: 'http://localhost/'}},
                    {label: "Okay?", color: "#51eaea", extras: { icon: 'face_with_raised_eyebrow', learnMore: 'http://localhost/'}},
                    {label: "Blush", color: "#fb3569", extras: { icon: 'blush', learnMore: 'http://localhost/'}}
                ]
            };
        },
        watch: {
            inputRange() {
                console.log(this.inputRange)
            }
        },
        methods: {
            vliderClick() {
                console.log('clicked')
            }
        }
    };
</\script>
<style>
    import "vlider/src/sass/vlider.scss"
</style>
        `
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <pre><code>{{codeSample}}</code></pre>
</div>

当然，在数据变量中嵌入大块 HTML 有点笨拙，并且需要对各种位和片段进行一些转义（例如示例中的include${...}和标签）。如果您通过 ajax 导入 HTML 字符串或作为webpack 导入导入，而不是像我在这里所做的那样直接将其嵌入到内部</script>，那么维护可能会更容易。data()

（如果您想要代码示例的语法着色，您可能还需要查看vue-highlightjs ；它也取决于将源代码放在组件数据变量中而不是内联在模板内。）

或者简单的方法

如果您愿意提前转义 html，则可以将其直接放入模板中，并使用v-pre告诉 Vue 忽略嵌入 html 中的任何胡子符号：

new Vue({
  el: '#app'
});

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">

  <pre><code v-pre>&lt;script&gt;... {{foo}} &lt;/script&gt;</code></pre>

</div>