尝试使用 CDN 中的 Vue.js 库，但出现 Uncaught SyntaxError: Unexpected identifier答案

【问题标题】：Trying to use Vue.js library from CDN but I get Uncaught SyntaxError: Unexpected identifier尝试使用 CDN 中的 Vue.js 库，但出现 Uncaught SyntaxError: Unexpected identifier
【发布时间】：2019-01-05 23:36:49
【问题描述】：

我使用 Django 作为后端，我想使用 Vue.js 库作为前端。我将它们包含在 CDN 中。问题是脚本的第一行总是得到错误 Uncaught SyntaxError: Unexpected identifier。我怀疑这是因为导入，但我不知道如何使用该库。有任何想法吗？提前致谢。

<!DOCTYPE html>
<html>
    <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">


            <title>title</title>


            <link rel="stylesheet" type="text/css" href="/static/fortykwords/style.css" />

            <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
            <script src="https://unpkg.com/@johmun/vue-tags-input/dist/vue-tags-input.js"></script>

    </head>
    <body>


        <ul class="sidebar-nav">
        <p>sidebar</p> 

            <li><a href="/profile/">pepe14</a></li>
            <li><a href="/accounts/logout/?next=/submit/">Logout</a></li>

        </ul>

<template>
    <div>
      <vue-tags-input
        v-model="tag"
        :tags="tags"
        @tags-changed="newTags => tags = newTags"
      />
    </div>
</template>

<script>
  import VueTagsInput from '@johmun/vue-tags-input';

        export default {
          components: {
            VueTagsInput,
          },
          data() {
            return {
              tag: '',
              tags: [],
            };
          },
        };
</script>



<form action="" method="post">
    <input type='hidden' name='csrfmiddlewaretoken' value='fEEj9YrFOkChjlhrZ7HPgDoiJNcnb0ILUrd143icwaZ58No1Ckl8tTr0p9TxRMi7' />
    <table>
        <tr><th><label for="id_title">Title:</label></th><td><input type="text" name="title" required id="id_title" maxlength="250" /></td></tr>
<tr><th><label for="id_body">Body:</label></th><td><textarea name="body" cols="40" required id="id_body" maxlength="40000" rows="10">
</textarea></td></tr>
<tr><th><label for="id_tags">Tags:</label></th><td><input type="text" name="tags" required id="id_tags" /><br /><span class="helptext">A comma-separated list of tags.</span></td></tr>
    </table>
    <input type="submit" value="Submit" />
</form>

    </body>
</html>

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

由于您同时使用从 CDN 输入的 Vue 和 vue 标签，因此您不能依赖导入/导出。所以，首先你需要从你的代码中删除它们：

 import VueTagsInput from '@johmun/vue-tags-input';

和

export default {}

用于 Vue 组件。

最重要的是，如果 vue 标签输入工作，你的 Vue 组件代码将无法工作：

<template>
<script>
<style>

Vue 单文件组件的语法不能立即在浏览器中使用。此外，您没有从任何 Vue 实例导入/渲染组件，因此，即使组件和 vue 标签输入都有效，html 页面中也不会出现任何内容。

为了使事情正常工作，您需要两件事：

声明一个 Vue 实例并将其安装在一个带有 el 属性的 html 标记中。我选择 #element 作为标签 ID。
将 vue 标签输入 html 代码粘贴到该 HTML 中。

以下修改后的 sn-p 就可以了：

        <title>title</title>


        <link rel="stylesheet" type="text/css" href="/static/fortykwords/style.css" />

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
        <script src="https://unpkg.com/@johmun/vue-tags-input/dist/vue-tags-input.js"></script>

</head>
<body>

  <ul class="sidebar-nav">
    <p>sidebar</p> 

    <li><a href="/profile/">pepe14</a></li>
    <li><a href="/accounts/logout/?next=/submit/">Logout</a></li>

  </ul>
  <div id="element">
      <vue-tags-input
      v-model="tag"
      :tags="tags"
      @tags-changed="newTags => tags = newTags"
    />
  </div>



<form action="" method="post">
    <input type='hidden' name='csrfmiddlewaretoken' value='fEEj9YrFOkChjlhrZ7HPgDoiJNcnb0ILUrd143icwaZ58No1Ckl8tTr0p9TxRMi7' />
    <table>
        <tr><th><label for="id_title">Title:</label></th><td><input type="text" name="title" required id="id_title" maxlength="250" /></td></tr>
        <tr><th><label for="id_body">Body:</label></th><td><textarea name="body" cols="40" required id="id_body" maxlength="40000" rows="10">
        </textarea></td></tr>
        <tr><th><label for="id_tags">Tags:</label></th><td><input type="text" name="tags" required id="id_tags" /><br /><span class="helptext">A comma-separated list of tags.</span></td></tr>
    </table>
    <input type="submit" value="Submit" />
</form>


<script>
    new Vue({
      el: '#element',
      data: {
        tag: '',
        tags: [],
      },

    });
</script>
    </body>
</html>

由于 vue 标签输入自动加载到 window，当您从 cdn 导入它时，您不需要在 Vue 实例中导入/引用该组件。

【讨论】：

谢谢！那解决了它。你知道我怎样才能做到这一点，而不是作为一个单独的表单出现，而是从模板修改现有表单来做到这一点？
我想您应该将表单和 vue 标签相关代码都注册为组件，然后将它们作为标签呈现在您的主 vue 实例中。虽然大多数关于 vue 组件的示例和教程都假设您将使用单文件组件和 babel，但有关 vue 组件的官方文档仍然假设您只是在浏览器中使用 Vue，没有构建步骤，所以它们应该会有很大帮助：vuejs.org/v2/guide/components.html