Question

我目前正在尝试创建Vue.js组件。当我启动应用程序时，出现错误。错误信息如下图所示：

<template>
    <div class="hello" id="app">
         <span style="font-size:30px;cursor:pointer;" onclick="openNav()">&#9776;</span>

        <div id="mySidenav" class="sidenav">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</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>

App.vue

Answer 1

这些是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忽略该行而不是掉毛。

Answer 2

CLI应该已经创建了一个名为main.js的文件。在其中，您将拥有类似这样的内容，可以创建一个新的Vue实例：

new Vue({
  render: h => h(App)
}).mount('#app')

它可能使用el属性而不是调用mount，并且如果您在创建项目时选择包括那些属性，则可能会提到store或router。没关系，关键是这是创建根Vue实例的地方。除非您正在编写非典型应用程序，否则无需再次使用new Vue。当然，您不应该在.vue文件中使用它。

我在上面编写的代码中引用的App应该是App.vue中的组件，应该早些时候在main.js中导入。

然后是您的App.vue。这行有点奇怪：

import App from './components/Navigation-Drawer.vue'

从技术上讲这没错，但确实令人困惑。将App重命名为更明智的名称，例如NavigationDrawer。您需要在所有使用的地方（包括模板）进行更新。

接下来，Navigation-Drawer.vue。这里有几个问题。

首先，摆脱模板上的id="app"，这是不应该存在的，并且可能会引起问题。

要在Vue中实现onclick="openNav()"，您可以编写@click="openNav"，然后在组件的openNav部分中定义methods。

脚本部分应如下所示：

<script>
    export default {
        name: 'NavigationDrawer',

        props: {
            msg: String
        },

        // Note that this is a function when used on a component
        data () {
            return {
                name1: 'name 1',
                name2: 'name 2',
                name3: 'name 3',
                name4: 'name 4'
            }
        },

        methods: {
            openNav() {
                console.log('openNav called')
            },

            closeNav() {
                console.log('closeNav')
            }
        }
    }
</script>

希望这足以使其正常工作。

最初的棉绒错误是由于以下原因引起的：

您正在创建一个名为app的变量，但从未使用过。
您正尝试致电new Vue，但没有导入Vue。通常，如果您希望能够从.vue文件内部访问它们，则需要导入它们。

但是，掉毛错误只是我上面概述的更严重问题的副作用。

Vue.js编译错误：no-unused-vars＆no-undef

2 个答案: