Vue.js 컴파일 오류: no-used-vars 및 no-define

Vue.js 컴파일 오류: no-used-vars 및 no-define

현재 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>

네비게이션 드로어표시하다

---

<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

이것들은 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가 해당 라인을 무시하고 보풀이 발생하지 않도록 지시합니다.

CLI는 다음과 같은 파일을 생성해야 합니다.main.js이 화면에는 다음과 같은 새로운 Vue 인스턴스가 생성됩니다.

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

를 사용할 수 있습니다.el호출 대신 속성mount그리고 그것은 언급할 수 있다.store또는router프로젝트 생성 시 포함하도록 선택한 경우.중요한 것은 여기서 루트 Vue 인스턴스가 생성된다는 것입니다.비정형 애플리케이션을 작성하지 않는 한 사용할 필요가 없습니다.new Vue다시 한 번요. 확실히 실내에서 사용하시면 안 됩니다..vue파일.

그App위에서 기술한 코드에서 참조된 컴포넌트는App.vue의 앞부분에서 Import해야 합니다.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일반적으로는 내부에서 액세스할 수 있도록 하려면 Import해야 합니다..vue파일.

그러나 보풀 에러는 위에서 설명한 보다 심각한 문제의 부작용에 불과합니다.

언급URL : https://stackoverflow.com/questions/60259422/vue-js-compile-error-no-unused-vars-no-undef