如何将Vuejs组件“导入”到index.html？
[英]How to 'import' Vuejs component into index.html?
问题描述
I use Vue.js CDN and I put all the Vuejs code inside a script tag in index.html. 
我使用Vue.js CDN，并将所有Vuejs代码放入index.html中的脚本标签中。 It works fine. 工作正常。 However, I'd like to use this component to add tags functionality. 但是，我想使用此组件来添加标签功能。
But I receive this error 但是我收到这个错误 :
：
This is how my code looks like: 这是我的代码的样子：
<script>
import VTagInput from 'v-tag-input'
Vue.use(VTagInput)
var app = new Vue({
el: '#app',
delimiters: ["[[", "]]"],
components: {VTagInput},
tags: []
data: {
errors: [],
I npm installed the package as specified in the github repo. 我npm安装了github repo中指定的软件包。
This is the head tag: 这是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>
2 个解决方案
解决方案1
4 已采纳 2018-02-13 15:03:18
You cant import another files in browser using 'import' you need to use webpack, however you can use this cdn to load the plugin in your html after loading vue.js file, https://unpkg.com/v-tag-input@0.0.3/dist/v-tag-input.js , here is a working example 您无法使用需要使用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>
解决方案2
1 2018-02-13 14:59:12
You should load the script where VTagInput is located in your head, right after Vue. 您应该在Vue之后VTagInput位于您头中的脚本。 Then no need to import anything, VTagInput will be accessible globally 然后，无需导入任何内容，即可全局访问VTagInput
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.