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