我目前正在尝试创建一个 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>
抽屉导航.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>
应用程序.vue
最佳答案
这些是来自 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 忽略该行而不是 lint 它。
关于javascript - Vue.js编译错误: no-unused-vars & no-undef,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60259422/