我目前正在尝试创建Vue.js组件。当我启动应用程序时,出现错误。错误信息如下图:
<template>
<div class="hello" id="app">
<span style="font-size:30px;cursor:pointer;" onclick="openNav()">☰</span>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">{{name1}}</a>
<a href="#">{{name2}}</a>
<a href="#">{{name3}}</a>
<a href="#">{{name4}}</a>
<div id="bottom">
<input v-model="name1" style="margin-left: 25px;max-width: 50%;">
<input v-model="name2" style="margin-left: 25px;max-width: 50%;">
<input v-model="name3" style="margin-left: 25px;max-width: 50%;">
<input v-model="name4" style="margin-left: 25px;max-width: 50%;">
</div>
</div>
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elit velit, dictum in urna et,
vulputate ornare sapien. Phasellus sed metus sed dolor hendrerit iaculis.
Cras eget libero sit amet massa aliquet dignissim. Vivamus faucibus lorem sit amet semper luctus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In at placerat
felis,
id finibus mauris. Proin maximus orci quis lacus pellentesque, ac dignissim sapien vestibulum. Maecenas
pharetra
vulputate semper.
Suspendisse potenti. Donec nisi nisi, aliquam eget felis euismod, semper dictum ligula.
Aenean mauris enim, iaculis vel malesuada vel, pulvinar et risus. Fusce sit amet orci eget diam commodo
ultricies sed vel elit.
Curabitur quis scelerisque est.</p>
</div>
</template>
<script>
//Vue App
var app = new Vue({
el: '#app',
data: {
/*
navlink: [
{id: 1, link: "https://www.tfbern.ch"},
{id: 2, link: "https://www.tfbern.ch"},
{id: 3, link: "https://www.tfbern.ch"},
{id: 4, link: "https://www.tfbern.ch"}
]
*/
name1: 'name 1',
name2: 'name 2',
name3: 'name 3',
name4: 'name 4'
}
})
export default {
name: 'NavigationDrawer',
props: {
msg: String
}
}
//Navbar Animation
/*
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0"; -->
}
*/
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
Navigation-Drawer.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<App msg="test">
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import App from './components/Navigation-Drawer.vue'
export default {
name: 'App',
components: {
HelloWorld,
App
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
查看应用
这些是eslint的错误。有关详细信息,请参见https://eslint.org/docs/rules/no-unused-vars和https://eslint.org/docs/rules/no-undef。
为了消除这些错误,请在初始化应用程序的行之前添加此行
// eslint-disable-next-line
var app = new Vue({
// rest of the code
确保带有的行eslint-disable-next-line
已注释。这将告诉eslint忽略该行而不是掉毛它。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句