Vue.js如何导入新组件

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"/>

 

完成！