[英]How to 'import' Vuejs component into index.html?
我使用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>
您无法使用需要使用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>
您应该在Vue之后VTagInput
位于您头中的脚本。 然后,无需导入任何内容,即可全局访问VTagInput
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.