Vue. js Ошибка компиляции: no-unused-vars & no-undef

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>

Навигационный ящик. 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 закомментирована. Это скажет эслинту игнорировать эту строку, а не задерживать ее.

Answer 2

CLI должен был создать файл с именем main.js. Там у вас будет что-то вроде этого, создающее новый экземпляр Vue:

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

Он может использовать свойство el вместо вызова mount и может упоминать store или router, если вы решили включить их при создании проекта. Это не имеет значения, главное, что именно здесь создается экземпляр root 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" в шаблоне, который просто не должен присутствовать и может вызвать проблемы.

Для реализации onclick="openNav()" в Vue вместо этого вы должны написать @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>

Надеюсь, этого будет достаточно, чтобы все это заработало.

Первоначальные ошибки линтинга были вызваны тем, что:

1. Вы создавали переменную с именем app, но никогда ее не использовали.
2. Вы пытались позвонить new Vue, но не импортировали Vue. В общем, вам нужно импортировать вещи, если вы хотите иметь доступ к ним из файла .vue.

Однако ошибки слипания были лишь побочными эффектами более серьезных проблем, с которыми я столкнулся ». Выше изложено.