我已经制作了一个Vue CLI项目,然后开始制作我的项目。
我制作了以下名为Navigation.vue
的组件:
<template>
<nav>
<div class="nav_container">
<a href="https://www.metrici.ro/" target="_blank" class="logo"></a>
<ul>
<li><router-link to="/home">Home</router-link></li>
<li class="dropdown">
<a class="touch"
>Network Settings <i class="fas fa-angle-down"></i
><i class="fas fa-angle-up"></i
></a>
<div class="dropdown-content">
<router-link to="/dhcpIP">DHCP IP</router-link>
<router-link to="/staticIP">Static IP</router-link>
</div>
</li>
<!-- <li><router-link to="/files">Import/Export Files</router-link></li> -->
<li><router-link to="/update">Update</router-link></li>
</ul>
</div>
</nav>
</template>
<script>
export default {
name: 'Navigation',
}
</script>
<style scoped>
/* Some style */
</style>
然后我将其导入App.vue
:
<template>
<div id="app">
<Navigation />
<router-view />
</div>
</template>
<script>
import Navigation from "./components/Navigation.vue";
</script>
<style scoped>
/* Some style */
</style>
最后,我有main.js
未被修改:
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
,我收到以下错误消息:
ERROR Failed to compile with 1 errors 8:10:25 PM
error in ./src/App.vue
Module Error (from ./node_modules/eslint-loader/index.js):
\App.vue
9:8 error 'Navigation' is defined but never used no-unused-vars
该组件已明确使用,但我收到该错误。我不明白为什么。
答案 0 :(得分:4)
您正在导入Navigation
,但切勿在脚本中使用它,将其声明为组件:
<template>
<div id="app">
<Navigation />
<router-view />
</div>
</template>
<script>
import Navigation from "./components/Navigation.vue";
export default {
components: {
Navigation
},
}
</script>
<style scoped>
/* Some style */
</style>