Vue 组件之间的引入

来源：互联网发布：韩国看视频软件编辑：程序博客网时间：2024/06/05 18:13

index.html：

<div id="app"></div>

运行完index.html之后自动寻找运行main.js文件

main.js：import Vue from 'vue'import App from './App'import router from './router'Vue.config.productionTip = falsenew Vue({  el: '#app',  router,  template: '<App/>',  components: { App }})

然后进入app.vue

app.vue：<template>  <div id="app">    <top></top>    <router-view></router-view>    <footerbottom>    </footerbottom>  </div></template><script>import Top from './top'import Footerbottom from './footerbottom'export default {  name: 'app',  components: {    Top,    Footerbottom  }}</script>

根据标签的结构走，放top.vue的内容

top.vue：<template><h2>top</h2></template><script>export default({  name: 'top'})</script>

放footerbottom.vue的内容footerbottom.vue：

<template><h2>bottom</h2></template><script>export default({  name: 'footerbottom'})</script>

默认指向router文件夹下的index.js文件，

index.js：import Vue from 'vue'import Router from 'vue-router'import Hello from '@/components/hello'Vue.use(Router)export default new Router({  routes: [    { path: '/', component: Hello }  ]})

路由指向/components/hello.vue文件

hello.vue：

<template><p>Hello world！</p></template><script>export default {  name: 'hello'}</script>

最后运行出来的效果如图：

转载自：http://blog.csdn.net/web_xiaolei/article/details/68943074
（感谢这篇文章在我接触Vue时遇到的问题遇到）

阅读全文

0 0