您的位置：首页 > Web前端 > Vue.js

vue中在页面中由多个组件显示

2018-07-27 15:58 106 查看

Vue.js 目录结构

目录解析

目录/文件 说明
build 最终发布的代码存放位置。
config 配置目录，包括端口号等。我们初学可以使用默认的。
node_modules npm 加载的项目依赖模块
src

这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

  • assets: 放置一些图片，如logo等。
  • commponents: 目录里面放了一个组件文件，可以不用。
  • App.vue: 项目入口文件，我们也可以直接将组建写这里，而不使用 commponents 目录。
  • main.js: 项目的核心文件。
static 静态资源目录，如图片、字体等。
test 初始测试目录，可删除
.xxxx文件 这些是一些配置文件，包括语法配置，git配置等。
index.html 首页入口文件，你可以添加一些 meta 信息或同统计代码啥的。
package.json 项目配置文件。
README.md 项目的说明文档，markdown 格式

  功能：首页展示多个页面组件
   第一步：在App.vue中引入组件

   例如： import hi1 from '@/components/hi1'

   第二步:在js中写入组件的名字
   components:{
      hi2,
      hi3
     }
    第三步：展示模板，一直以名字写在template
    例如：<hi1></hi1>

[code]<template>
<div id="app">
<img src="./assets/logo.png">
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
<hi3></hi3>
<hi2></hi2>
<p>
导航：
<!--<router-link :to="'/hi/'+'judy'">hi页面</router-link>-->
<router-link to="/hi">hi页面</router-link>
<!--<router-link :to="{name:'hi2',params:{username:'judy22'}}">hi2页面</router-link>-->
<router-link to="/">首页</router-link>
<router-link to="/hi2/88/新闻">hi2页面</router-link>
<router-link to="/hi2/88">hi2页面2</router-link>
<router-link to="/hi3/2018/新闻3">hi3页面</router-link>
</p>
<!--点击哪个页面下面就为哪个页面的名字-->
<p>{{ $route.name}}</p>
</div>
</template>

<script type="text/ecmascript-6">
/*
* 1.首页展示多个页面组件
*   第一步：在App.vue中引入组件
*   第二步:在js中写入引入组件的名字
*     components:{
*       hi2,
*       hi3
*     }
*     第三步：展示模板，一直以名字写在template
*       例如：<hi2></hi2>
* */
import hi3 from '@/components/hi3'
import hi2 from '@/components/hi2'
export default {
name: 'App',
components:{
hi3,
hi2
}
}
</script>

<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

 

阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航