vue.js 代码中用于自动完成的语法错误答案

【问题标题】：Syntax errors in vue.js code for autocompletevue.js 代码中用于自动完成的语法错误
【发布时间】：2019-05-19 00:13:51
【问题描述】：

嗨，我正在尝试autocomplete/typeahead component for Vue 2 and Bootstrap 4 这是我的代码。

<html>
    <head>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://unpkg.com/vue-bootstrap-typeahead/dist/VueBootstrapTypeahead.css" rel="stylesheet">
    </head>
    <body>

        <div id="container">
            <vue-bootstrap-typeahead 
                v-model="query"
                :data="['Canada', 'USA', 'Mexico']" />
        </div>

        <script
            src="https://code.jquery.com/jquery-3.3.1.js"
            integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
        crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.11.10/vue.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
        <script src="https://unpkg.com/vue-bootstrap-typeahead"></script>
        <script>
            import VueBootstrapTypeahead from 'vue-bootstrap-typeahead';
            Vue.component('vue-bootstrap-typeahead', VueBootstrapTypeahead);

            new Vue({
                el: '#container',
                data: {
                    value: '',
                },
            });
        </script>

    </body>
</html>

很遗憾，由于以下错误，这不起作用。

语法错误：导入声明只能出现在模块的顶层

源映射错误：请求失败，状态为 404 资源 URL： https://unpkg.com/vue-bootstrap-typeahead 源地图网址： VueBootstrapTypeahead.umd.min.js.map

如果有人可以帮助我，那就太好了。

【问题讨论】：

请将此添加到您文档的<head> <link> 标签之前：<meta charset="UTF-8">
谢谢老哥我加了
没问题。这是一个有根据的猜测。由于它正在工作，因此我将其发布为答案。
当然，但我需要 SyntaxError: import 声明可能只出现在要删除的模块的顶层:(

标签： vue.js vuejs2 vue-component

【解决方案1】：

代码<script src="https://unpkg.com/vue-bootstrap-typeahead"></script>已经导入VueBootstrapTypeahead，成为window的属性。你不需要import了。当我们谈论import 时，通常module 音乐会也来找我们。 import 声明经常用于需要通过工具转换的应用程序中，例如babel、webpack 或rollup。

【讨论】：

非常感谢我做到了，所有错误都消失了，但自动完成元素没有出现:'(

【解决方案2】：

请将此添加到您文档的<head><link> 标签之前：

<meta charset="UTF-8">

【讨论】：