1.新建组件:
TopNav.vue
<template>
<div class="hello">
<div class="nav">
<a href="http://localhost:9527/static/index.html">首页</a>
<a href="http://localhost:9527/static/music.html">音乐</a>
<a href="http://localhost:9527/static/questionBank.html">题库</a>
<a href="http://localhost:9527/static/imageLibrary.html">图片</a>
<a href="http://localhost:9527/static/i.html">个人中心</a>
<a href="http://localhost:9527/static/login.html">登录</a>
</div>
</div>
</template>
<script>
export default {
name: 'TopNav',
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.nav a {
color: #42b983;
margin: 0 10px;
}
</style>
2.编辑主组件App.vue的script标签里面:
1.导入需要的组件:
import TopNav from './components/TopNav.vue'
2.写入组件名称:
components: {
TopNav,
}
3.在App.vue的<template>标签里使用组件:
<TopNav msg="Welcome to Your Vue.js App"/>
完成!