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

Vue.js 目录结构目录解析目录/文件说明build最终发布的代码存放位置。config配置目录，包括端口号等。我们初学可以使用默认的。node_modulesnpm 加载的项目依赖模块src这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：assets: 放置一些图片，...

Judy1623

19706人浏览 · 2018-07-27 15:58:24

Judy1623 · 2018-07-27 15:58:24 发布

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>

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

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^