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>