标签：flex vue 项目 content header 构建 import font

5.构建项目

5.1 构建项目的基本结构

 

安装重置样式表

yarn add normalize.css -S

// src/main.js 引入重置样式表
import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
// 引入重置样式表 yarn add normalize.css -S
import 'normalize.css/normalize.css'
​
Vue.config.productionTip = false
​
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
​

调整 src/App.vue ---- 主界面

按照上图布局

<template>
  <!-- div.container>div.box>header.header+div.content -->
  <div class="container">
    <div class="box">
      <header class="header">header</header>
      <div class="content">content</div>
    </div>
    <footer class="footer">footer</footer>
  </div>
</template>
<script>
export default {
​
}
</script>
​
<style lang="stylus">
html, body, .container
  height 100%
​
// 设置rem的基准值
html
  font-size 100px // 1rem = 100px
​
// 重置页面中的字体大小
body
  font-size 12px // 取决于设计稿中的最小的使用最多的字体的大小
// 移动端布局主要使用弹性盒布局
.container
  // 竖直方向弹性盒
  display flex
  flex-direction column
  .box
    flex 1
    display flex
    flex-direction column
    .header
      height 0.44rem
      background-color #ff6666
    .content
      flex 1
      overflow  auto // 内容高度大于目前屏幕的高度产生滚动条
  .footer
    height 0.5rem
    background-color #efefef
</style>
​

构建css - 预处理器 - stylus。---- 不要忘记审查元素

弹性盒布局：主流 - 默认 水平方向，可以调整为垂直方向

媒体查询：确定 横屏 还是 竖屏

<template>
<!-- div.container>div.box>header.header+div.content -->
<div class="container">
 <div class="box">
   <header class="header">header</header>
   <div class="content">content</div>
 </div>
 <footer class="footer">footer</footer>
 <div class="tip">请将屏幕竖向浏览</div>
</div>
</template>
<script>
export default {
​
}
</script>
​
<style lang="stylus">
html, body, .container
height 100%
​
// 设置rem的基准值
html
font-size 100px // 1rem = 100px
​
// 重置页面中的字体大小
body
font-size 12px // 取决于设计稿中的最小的使用最多的字体的大小
// 移动端布局主要使用弹性盒布局
.container
// 竖直方向弹性盒
display flex
flex-direction column
// 设置两边留白 ++++++++++++++++++++++++++++++++++++++++++++++++++++
max-width 1080px
margin 0 auto
.box
 flex 1
 display flex
 flex-direction column
 .header
   height 0.44rem
   background-color #ff6666
 .content
   flex 1
   overflow  auto // 内容高度大于目前屏幕的高度产生滚动条
.footer
 height 0.5rem
 background-color #efefef
.tip //  ++++++++++++++++++++++++++++++++++++++++++++++++++++
position fixed
top 0
left  0
right 0
bottom  0
background rgba(0, 0, 0, 0.5)
color #ffffff
font-size 30px
font-weight bold
display none // 默认不显示
justify-content center
align-items center
​
@media all and (orientation landscape) //  ++++++++++++++++++++++++++++++++++++++++++++++++++++
.tip
 display flex // 显示
</style>
​

rem布局：自适应

rem布局根据页面html根节点的字体的大小的改变而改变，比如设置html根节点的字体大小 为100px，那么以后你就可以理解为1rem=100px
rem布局根据页面当前节点的父节点的字体的大小的改变而改变，比如设置当前节点的父节点的字体大小 为100px，那么以后你就可以理解为1em=100px ---- 一般不推荐使用
​
**字体的大小具有继承性父元素的字体大小会继承到子元素，所以设置了html的字体大小后，一定要在body元素上修正字体大小**
​
引入布局方案中的 vw布局

<template>
<!-- div.container>div.box>header.header+div.content -->
<div class="container">
 <div class="box">
   <header class="header">header</header>
   <div class="content">content</div>
 </div>
 <footer class="footer">footer</footer>
 <div class="tip">请将屏幕竖向浏览</div>
</div>
</template>
<script>
export default {
​
}
</script>
​
<style lang="stylus">
html, body, .container
height 100%
​
// 设置rem的基准值
html
// font-size 100px // 1rem = 100px
// 如果设计稿是以 iphone6 为基础设计的，那么 设置为  100 / 375 * 100 = 26.6666666vw
// 如果设计稿是以 iphone5 为基础设计的，那么 设置为  100 / 320 * 100 = 31.25vw
font-size 26.6666666vw // +++++++++++++++++++++++++++++++++++++++++
​
@media all and (min-width 960px) // +++++++++++++++++++++++++++++++++++++++++
html
 font-size 100px
​
// 重置页面中的字体大小
body
font-size 12px // 取决于设计稿中的最小的使用最多的字体的大小
// 移动端布局主要使用弹性盒布局
.container
// 竖直方向弹性盒
display flex
flex-direction column
// 设置两边留白
max-width 1080px
margin 0 auto
.box
 flex 1
 display flex
 flex-direction column
 .header
   height 0.44rem
   background-color #ff6666
 .content
   flex 1
   overflow  auto // 内容高度大于目前屏幕的高度产生滚动条
.footer
 height 0.5rem
 background-color #efefef
.tip
position fixed
top 0
left  0
right 0
bottom  0
background rgba(0, 0, 0, 0.5)
color #ffffff
font-size 30px
font-weight bold
display none // 默认不显示
justify-content center
align-items center
​
@media all and (orientation landscape)
.tip
 display flex // 显示
</style>
​

5.2 构建项目的基本页面

创建首页，分类，购物车，我的 四个基本页面 --- 文件最后一行要添加空行

 

5.3 配置 基本路由

如果多次使用的组件，推荐 先引入后调用

如果只使用一次，推荐使用懒加载

如果需要分割代码，/* webpackChunkName: "about" */ yarn build 体验

// src/router/index.js
import Home from '../views/Home.vue'
// path name component 。。。。。
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home // 先引入，然后再调用
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    // 路由的懒加载 --- 需要的时候再加载 /* webpackChunkName: "about" */
    // /* webpackChunkName: "about" */ 可以通过  运行 yarn build 之后 dist/js 观察变化
    component: () => import(/* webpackChunkName: "about" */'../views/About.vue')
  }
]

转换为如下代码

import Vue from 'vue'
import VueRouter from 'vue-router'
​
import Home from '../views/home/index.vue'
import Kind from '../views/kind/index.vue'
import Cart from '../views/cart/index.vue'
import User from '../views/user/index.vue'
​
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch((err) => err)
}
​
Vue.use(VueRouter)
​
const routes = [
  {
    path: '/home',
    name: 'home',
    component: Home
  },
  {
    path: '/kind',
    name: 'kind',
    component: Kind
  },
  {
    path: '/cart',
    name: 'cart',
    component: Cart
  },
  {
    path: '/user',
    name: 'user',
    component: User
  }
]
​
const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})
​
export default router
​

5.4 添加路由组件渲染容器到对应组件中

<template>
  <!-- div.container>div.box>header.header+div.content -->
  <div class="container">
    <!-- <div class="box">
      <header class="header">header</header>
      <div class="content">content</div>
    </div> -->
    <router-view></router-view>
    <footer class="footer">footer</footer>
    <div class="tip">请将屏幕竖向浏览</div>
  </div>
</template>

浏览器访问。/home /kind /cart /user 分别查看效果

发现当用户什么也不输入的时候，显示不正常 ----- 什么都不输入，来一个默认的跳转地址

5.5 路由的重定向 以及 404页面

路由的匹配时从上到下匹配

// views/error/notFound.vue
<template>
  <div class="box">
    <header class="header">404 header</header>
    <div class="content">404 content</div>
  </div>
</template>
​

import Vue from 'vue'
import VueRouter from 'vue-router'
​
import Home from '../views/home/index.vue'
import Kind from '../views/kind/index.vue'
import Cart from '../views/cart/index.vue'
import User from '../views/user/index.vue'
​
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch((err) => err)
}
​
Vue.use(VueRouter)
​
const routes = [
  {// ++++++++++++++++++++++++++
    path: '/', // 路由的重定向 
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'home',
    component: Home
  },
  {
    path: '/kind',
    name: 'kind',
    component: Kind
  },
  {
    path: '/cart',
    name: 'cart',
    component: Cart
  },
  {
    path: '/user',
    name: 'user',
    component: User
  },
  {// ++++++++++++++++++++++++++
    path: '*', // 404   ----   路由懒加载  ---- 一般用不到
    component: () => import(/* webpackChunkName: 'error' */'../views/error/notFound.vue')
  }
]
​
const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})
​
export default router
​

5.6 设计页面底部的导航并且跳转路由

打开 图标库 -> 选择图标-> 加入购物车->点击购物车-> 添加至项目-> font-class

打开public/index.html ---- iconfont 官网目前搞事情 --- 字体的协议改成 https

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_3120366_9utchxxpyz.css">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
​

App.vue

<template>
  <!-- div.container>div.box>header.header+div.content -->
  <div class="container">
    <!-- <div class="box">
      <header class="header">header</header>
      <div class="content">content</div>
    </div> -->
    <router-view></router-view>
    <footer class="footer">
      <ul>
        <router-link to="/home" tag="li">
          <span class="iconfont icon-shouye"></span>
          <p>首页</p>
        </router-link>
        <router-link to="/kind" tag="li">
          <span class="iconfont icon-fenlei"></span>
          <p>分类</p>
        </router-link>
        <router-link to="/cart" tag="li">
          <span class="iconfont icon-gouwuche"></span>
          <p>购物车</p>
        </router-link>
        <router-link to="/user" tag="li">
          <span class="iconfont icon-My"></span>
          <p>我的</p>
        </router-link>
      </ul>
    </footer>
    <div class="tip">请将屏幕竖向浏览</div>
  </div>
</template>
<script>
export default {
​
}
</script>
​
<style lang="stylus">
html, body, .container
  height 100%
​
// 设置rem的基准值
html
  // font-size 100px // 1rem = 100px
  // 如果设计稿是以 iphone6 为基础设计的，那么 设置为  100 / 375 * 100 = 26.6666666vw
  // 如果设计稿是以 iphone5 为基础设计的，那么 设置为  100 / 320 * 100 = 31.25vw
  font-size 26.6666666vw
​
@media all and (min-width 960px)
  html
    font-size 100px
​
// 重置页面中的字体大小
body
  font-size 12px // 取决于设计稿中的最小的使用最多的字体的大小
// 移动端布局主要使用弹性盒布局
.container
  // 竖直方向弹性盒
  display flex
  flex-direction column
  // 设置两边留白
  max-width 1080px
  margin 0 auto
  .box
    flex 1
    display flex
    flex-direction column
    .header
      height 0.44rem
      background-color #ff6666
    .content
      flex 1
      overflow  auto // 内容高度大于目前屏幕的高度产生滚动条
  .footer
    height 0.5rem
    background-color #efefef
    ul
      list-style none
      height 100%
      display flex
      margin 0
      padding 0
      li
        flex 1
        height 100%
        display flex
        flex-direction column
        justify-content center
        align-items center
​
        &.router-link-active
          color #f66
        span
          font-size 0.20rem
        p
          font-size 12px
          margin 0
          margin-top  5px
.tip
  position fixed
  top 0
  left  0
  right 0
  bottom  0
  background rgba(0, 0, 0, 0.5)
  color #ffffff
  font-size 30px
  font-weight bold
  display none // 默认不显示
  justify-content center
  align-items center
​
@media all and (orientation landscape)
  .tip
    display flex // 显示
</style>
​

标签：flex,vue,项目,content,header,构建,import,font
来源： https://blog.csdn.net/a9874561328/article/details/122825581

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。