在用vue写demo出现了问题

我在components文件夹里面创建了了First.vue文件,其实就是将Hello.vue复制一份,然后想得到的结果是放在类Hello之后

clipboard.png
在router的index.js里面也import进去和配置了

clipboard.png
但是在index.html中却显示不了,求姐?

clipboard.png

html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vue_test</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- <app></app> -->
    <!-- built files will be auto injected -->
  </body>
</html>

App.vue:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <p>welcome to Vue World!</p>
    <p>Are you Ok?</p>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

First.vue:

<template>
    <div class="news">
      <h1>{{ msg }}</h1>
      <div class="news-list">
        <a href="javascript:void(0)">23</a>
        <a href="javascript:void(0)">456</a>
        <a href="javascript:void(0)">789</a>
        <a href="javascript:void(0)">10JQ</a>
        <a href="javascript:void(0)">KA</a>
        <a href="javascript:void(0)">joker</a>
      </div>
    </div>
</template>

<script>
export default {
  name: 'news',
  data () {
    return {
      msg: 'main news'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
a {
  color: #415161;
}
</style>

main.js: (这个安装完vue-cli后就没改过了)

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

阅读 2.8k
1 个回答

你想把First放在Hello之后的话,可以把first作为一个子组件放进hello里。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题