饿了么项目步骤

第5章项目实战-页面骨架开发2.5
5.1组件拆分
5.1.1
引入mate标签:使得高宽都等于设备的高宽，不放缩，用户无法缩放。
引入css样式：预处理样式；兼容所有浏览器的自带样式。
在这里插入图片描述
详解：具体代码如下
HTML中设置网页自适应的MATE标签

<meta name="viewport" content="width=device-width,height=device-height,
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, 
user-scalable=no">

1.name=“viewport” //设置视口（网页可绘制的区域）
2.width=device-width //应用程序的宽度和设备的宽度是一样的
3.height=device-height //应用程序的高度和设备的高是一样的
4.initial-scale=1.0 //应用程序启动时候的缩放尺度（1.0表示不缩放）
5.minimum-scale=1.0 //用户可以缩放到的最小尺度（1.0表示不缩放）
6.maximum-scale=1.0 //用户可以放大到的最大尺度（1.0表示不缩放）
7.user-scalable=no //用户是否可以通过他的手势来缩放整个应用程序，使应用程序的尺度发生一个改变（yes/no）

创建的新项目app.vue里面有默认内容
将app.vue内容删除，留个模板就行了。
如图所示：
在这里插入图片描述

/* eslint-disable no-new */有了这行代码，创建Vue实例就可以不需要赋值给具体实力了。了解下就OK

5-2 组件拆分（中）
自定义组件

App.vue

<template>
  <div id="app">
    <!-- 使用子组件 -->
     <v-header></v-header>
     <div class="contain">contain</div>
     <div class="footer">footer</div>
  </div>
</template>
<script>
// 引入子组件代码
import header from './components/sub/header/header.vue'
export default{
  // 注册子组件
  components :{
    'v-header':header
  }
}
</script>
<style>
</style>

header.vue

<template>
   <div class="header">
    我是子组建header
   </div>
</template>
<script>
export default {
}
</script>
<style>
</style>

5.3中间
在这里插入图片描述
这边引入的是sass

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

vue-router用法
1.安装
npm install vue-router
2.导入文件如图所示
在这里插入图片描述
3.运用vue-router可以实现的效果
点击商品对应http://localhost:8081/#/goods
点击评论对应http://localhost:8081/#/ratings
点击商家对应http://localhost:8081/#/seller

在这里插入图片描述
4.代码实现如下：

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/view/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
       path: '/goods',
       name: 'goods',
       component: () =>import('@/components/sub/goods/goods'),
     },
     {
         path: '/ratings',
         name: 'ratings',
         component: () =>import('@/components/sub/ratings/ratings'),
       },
  {
           path: '/seller',
           name: 'seller',
           component: () =>import('@/components/sub/seller/seller'),
         },

  ]
})

App.js

<template>
  <div id="app">
    <!-- 使用子组件 -->
     <v-header></v-header>
     <div class="tab">
       <router-link  class="tab-iteam" to="/goods">商品</router-link>
        <router-link  class="tab-iteam" to="/ratings">评论</router-link>
         <router-link  class="tab-iteam" to="/seller">商家</router-link>

     </div>
      <router-view></router-view>
     <div class="footer">footer</div>
  </div>
</template>
<script>
// 引入子组件代码
import header from './components/sub/header/header.vue'
export default{
  // 注册子组件
  components :{
    'v-header':header
  }
}
</script>
<style lang="scss">
 $primary-color: red;
   #app {
        color: $primary-color;
        .tab{
          display: flex;
          width: 100%;
          height: 40px;
          line-height: 40px;
          .tab-iteam{
            flex:1;
            text-align: center;
          }
        }
       }
</style>

猜你喜欢