如何將Vuejs組件“導入”到index.html？

Question

我使用Vue.js CDN，並將所有Vuejs代碼放入index.html中的腳本標簽中。 工作正常。 但是，我想使用此組件來添加標簽功能。

但是我收到這個錯誤 ：

這是我的代碼的樣子：

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

我npm安裝了github repo中指定的軟件包。

這是head標簽：

<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

您無法使用需要使用Webpack的“導入”功能在瀏覽器中導入其他文件，但是在加載vue.js文件https://unpkg.com/v-tag-input后，可以使用此CDN在html中加載插件@ 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

如何將Vuejs組件“導入”到index.html？

問題描述

2 個解決方案

解決方案1
4 已采納 2018-02-13 15:03:18

解決方案2
1 2018-02-13 14:59:12

如何將Vuejs組件“導入”到index.html？

問題描述

2 個解決方案

解決方案1 4 已采納 2018-02-13 15:03:18

解決方案2 1 2018-02-13 14:59:12

解決方案1
4 已采納 2018-02-13 15:03:18

解決方案2
1 2018-02-13 14:59:12