Question

我使用Vue.js CDN并将所有Vuejs代码放在index.html的脚本标记中。它工作正常。但是，我想使用this组件添加标签功能。

但我收到此错误：

这就是我的代码的样子：

     <script>
      import VTagInput from 'v-tag-input'
      Vue.use(VTagInput)
      var app = new Vue({
        el: '#app',
        delimiters: ["[[", "]]"],
        components: {VTagInput},
        tags: []
        data: {
          errors: [],

我按照github repo。

的说明安装了软件包

这是头标记：

<head>
      <meta charset="utf-8">
      <meta name="author" content="Seif Elmughrabi">
      <!-- Compiled and minified CSS -->
      <link rel="stylesheet" href="(( url_for('static', filename='materialize.css') ))" media="screen, projection">
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">
      <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"> -->
      <!--Google Icons-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <link rel="stylesheet" href="(( url_for('static', filename='style.css') ))">
      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

      <title>Your Insurance Policy Planner</title>
    </head>

Answer 1

你不能使用'import'导入浏览器中的其他文件你需要使用webpack，但是你可以使用这个cdn在加载vue.js文件后加载你的html插件https://unpkg.com/v-tag-input@0.0.3/dist/v-tag-input.js，这是一个工作示例

new Vue({
	el:"#app",
  data: {
    tags: ['foo', 'bar']
  }
})

<script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></script>
<script src="https://unpkg.com/v-tag-input@0.0.3/dist/v-tag-input.js"></script>

<div id="app">
  <v-tag-input v-model="tags"></v-tag-input> {{tags}}
</div>

Answer 2

你应该在Vue之后加载VTagInput所在的脚本。然后无需导入任何内容，VTagInput将可全局访问

如何进口＆＃39; Vuejs组件进入index.html？

2 个答案: