本文基于工作项目开发，做的整理笔记
前段时间公司有的小伙伴刚开始学习vue，就直接着手用在新项目上，以项目实战步步为营，不断推进vue的学习和使用。时间短，需求多，又是刚刚上手，遇到的坑和困难也真不少，感觉每天都在疯狂地解决问题。说真的，每种技术的学习和使用，在实际项目的开发上得到了充分检验，个人能力也在快速的成长。
前一段时间，写过文章“Vue教程--使用官方脚手架构建实例”，主要是针对PC端，架构而写。当初的目的，也是想做为一个入门的教程，但是根据反馈和自己后面的感受，发现并不是很好，并没有做到真正的一步步上手。
今天决定专门针对Wap端去做这样一个demo，整体架构的搭建，并含有一些通用的功能。其中，部分知识点请回看前面那篇文章。对比来看，此篇应该更为详细，步步为营。
前提条件：
你已经了解vue的基础知识，尝试过使用vue-cli官方脚手架搭建项目。
编码环境：
system：OS X EI Capitan 10.12.5
npm：5.4.2
node：v8.8.0
vue-cli：@lastest
相关技术栈：
vue2 + vuex + vue-router + webpack + ES6/7 + fetch／axios + sass + flex + svg
相关地址：
项目代码github地址：https://github.com/YuxinChou/vue-wap-demo
项目在线地址：http://www.knowing365.com
（可用手机扫描下文中二维码，或用chrome浏览器模拟手机访问）
参考项目：https://github.com/bailicangdu/vue2-elm
WAP端项目搭建从0到1.jpg
目录
| - 0.传送门
| - 1.安装
| - 2.项目说明
| - 3.项目搭建
| - Step1. 初始化
| - Step2. 母版页Layout
| - Step3. 配置rem
| - Step4. 配置sass
| - Step5. 顶部导航header
| - Step6. 引入iconfont
| - Step7. 侧边菜单sidebar
| - Step8. 底部导航footer
| - Step9. 返回顶部backToTop（组件）
| - Step10. 仓库存储store
| - Step11. 侧边菜单状态保存
| - Step12. 搜索栏searchBar（组件）
| - Step13. 页面添加
| - Step14. 弹窗提示（组件）
| - ---------------------------------- 下内容为详解2
| - Step15. 完善login页面（fetch请求数据）
| - Step16. 合理引入svg
| - Step17. 用axios实现请求（取代原生fetch）
| - Step18. 登录状态存入仓库
| - Step19. 滚动加载更多（组件）
| - Step20. 回到指定位置（组件）
| - Step21. 完善消息列表页面
| - Step22. 顶部菜单改造（slot的使用）
| - --------------------------------- 下内容为详解3
| - Step23. 完善其他页面
| - Step24. 权限检查
| - Step25. 页面切换动画transition
| - Step26. 轮播展示（swiper)
| - Step26. 分享功能（vue-social-share）
| - Step28. ...
| - 4.项目部署
| - a）本地部署
| - b）服务器部署
| - 5.后续
0.传送门
官网“起步”传送门：http://cn.vuejs.org/v2/guide/#起步
1.安装
你已经安装了npm，它是随node.js安装的，装了node.js也就有了它。
node.js安装下载地址：http://nodejs.cn/download/
# 检查node.js是否安装，若有则显示版本号
$ node -v
# 检查npm的版本号
$ npm -v
# 若要更新npm，使用
$ npm install npm@latest -g
一般，我们还会安装淘宝镜像cnpm，因为在墙内，有时候使用npm安装会很慢，所以需要。
# 安装cnpm，并指定镜像地址
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
写文章时，我的目前版本如下：
Yuxin's MacBook Pro:Vue yuxin$ node -v
v8.8.0
Yuxin's MacBook Pro:Vue yuxin$ npm -v
5.4.2
Yuxin's MacBook Pro:Vue yuxin$ cnpm -v
cnpm@4.5.0 (/usr/local/lib/node_modules/cnpm/parse_argv.js)
npm@3.10.10 (/usr/local/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
node@8.8.0 (/usr/local/bin/node)
npminstall@2.29.1 (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr/local
darwin x64 16.6.0
registry=https://registry.npm.taobao.org
vue的安装：
# 最新稳定版
$ npm install vue
# 它的命令行工具
$ npm install --global vue-cli
我们接下来就使用它的命令行工具 vue-cli 来构建项目。
（类似的还有在react.js方面，快速上手会使用到‘蚂蚁金服’的Ant-design，使用antd-init或者dva-cli，都是命令行构建项目。）
2.项目说明
以【QQ手机APP】为UI界面参考，从母版页，列表页，左侧菜单，上下菜单，顶部导航，滚动加载，权限等页面及功能一一按步骤开发完成。那么这里的思路是：
- 先搭建母版页Layout
- 顶部导航header
- 侧边菜单sidebar
- 上下菜单navbar（扩展）
- 底部导航footer
- 页面添加
- 功能（返回顶部，滚动加载...）
- 接口请求
- 仓库存储
- 权限检查
- ...
整体的页面效果，大概如下：
vue-wap-demo.jpg
二维码访问，或者访问线上地址
（注：未作PC兼容，请使用chrome手机模式访问）
项目demo代码：GitHub地址
3.项目搭建
使用命令行工具，开始一点点构建项目：
Step1. 初始化
去到你的指定目录，初始化项目，名称为vue-wap-demo
（注意：ESLint那里我选择了None模式，为了简单）
# 去到放项目的文件夹地址
Yuxin's MacBook Pro:Vue yuxin$ cd /Users/yuxin/Documents/Season/Project/Vue
# 创建基于webpack模版的项目，名称为vue-wap-demo
Yuxin's MacBook Pro:Vue yuxin$ vue init webpack vue-wap-demo
? Project name vue-wap-demo //直接回车（不修改的话）
? Project description A Vue.js project //直接回车
? Author Season <yuxin0721@gmail.com> //直接回车
? Vue build standalone //直接回车
? Install vue-router? Yes //我选择了Yes
? Use ESLint to lint your code? Yes //我选择了Yes
? Pick an ESLint preset none //我选择了None模式！！！（注意：这里我用了None，为了简单）
? Setup unit tests with Karma + Mocha? No //我选择了No（暂时不需要）
? Setup e2e tests with Nightwatch? No //我选择了No（暂时不需要）
vue-cli · Generated "vue-wap-demo".
To get started:
cd vue-wap-demo
npm install
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
执行上面提示中的命令，把项目运行起来
# 进入项目文件夹
Yuxin's MacBook Pro:Vue yuxin$ cd vue-wap-demo
# 安装
Yuxin's MacBook Pro:vue-wap-demo yuxin$ npm install
> fsevents@1.1.2 install /Users/yuxin/Documents/Season/Project/Vue/vue-wap-demo/node_modules/fsevents
> node install
[fsevents] Success: "/Users/yuxin/Documents/Season/Project/Vue/vue-wap-demo/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
> uglifyjs-webpack-plugin@0.4.6 postinstall /Users/yuxin/Documents/Season/Project/Vue/vue-wap-demo/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js
npm notice created a lockfile as package-lock.json. You should commit this file.
added 1059 packages in 26.516s
# 运行
Yuxin's MacBook Pro:vue-wap-demo yuxin$ npm run dev
> vue-wap-demo@1.0.0 dev /Users/yuxin/Documents/Season/Project/Vue/vue-wap-demo
> node build/dev-server.js
> Starting dev server...
DONE Compiled successfully in 2324ms 14:38:51
浏览器查看，效果如下：
项目初始化效果.jpg
此时，项目代码结构如下：
# 当前代码结构
vue-wap-demo
├── build // 构建相关
├── config // 配置相关
├── node_modules // 模块安装的文件夹
├── src // 核心代码
│ ├── assets // 静态资源
│ ├── components // 组件
│ ├── router // 路由
│ ├── App.vue // 入口页面
│ └── main.js // 入口 加载组件 初始化等
├── static // 第三方不打包资源
├── .babelrc // babel-loader 配置
├── .editorconfig // 代码编辑 配置项
├── .eslintignore // eslint 忽略项
├── .eslintrc.js // eslint 配置项
├── .gitignore // git 忽略项
├── favicon.ico // favicon图标
├── index.html // html模板
├── package-lock.json // package-lock.json
├── package.json // package.json
└── �README.md // 说明文档
# 注意！！！
# 下面是教程结束时的代码结构（可忽视）
vue-wap-demo
├── build // 构建相关
├── config // 配置相关
├── dist // 打包的部署文件
├── node_modules // 模块安装的文件夹
├── screenshots // 项目截图
├── src // 核心代码
│ ├── assets // 静态资源
│ ├── components // 组件
│ ├── page // 页面
│ ├── router // 路由
│ ├── service // 请求服务
│ ├── store // 仓库存储
│ ├── style // 样式
│ ├── utils // 公用方法
│ ├── App.vue // 入口页面
│ └── main.js // 入口 加载组件 初始化等
├── static // 第三方不打包资源
├── .babelrc // babel-loader 配置
├── .editorconfig // 代码编辑 配置项
├── .eslintignore // eslint 忽略项
├── .eslintrc.js // eslint 配置项
├── .gitignore // git 忽略项
├── favicon.ico // favicon图标
├── index.html // html模板
├── package-lock.json // package-lock.json
├── package.json // package.json
└── �README.md // 说明文档
Step2. 母版页Layout
初始化后，在是src/components路径下默认有一个HelloWorld.vue页面，我们将其改名为Layout.vue作为母版页，调整一下内容，如下：
/**********************************************/
/* src/components/Layout.vue */
/**********************************************/
<template>
<div class="app_wrapper">
<!-- main -->
<div class="main_wrapper">
<h1 class="title">{{ msg }}</h1>
</div>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style scoped>
/*layout*/
/*此时rem还没引入（Step3）*/
/*此时sass也还不能用（Step4）*/
.app_wrapper {
background-color: #f2f2f2;
}
.main_wrapper .title {
font-size: 1rem;
color: #f00;
}
</style>
同时需要修改router/index.js的内容，把HelloWorld的相关引用改为Layout，如下：
/**********************************************/
/* src/router/index.js */
/**********************************************/
import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/components/Layout'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Layout',
component: Layout
}
]
})
现在我们可以看见修改后的效果。（开发的时候，一直保持项目运行就可以了）
Step3. 配置rem
在src文件夹下创建utils文件夹，并添加文件rem.js，代码如下：
/**********************************************/
/* src/utils/rem.js */
/**********************************************/
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
// 注解：
// 设计稿为320的时候，1rem=20px
// 设计稿为640的时候，1rem=40px
// 设计稿宽768的时候，1rem=48px
将rem.js引入到src\main.js中，即插入代码import './utils/rem'，最终代码如下：
/**********************************************/
/* src/main.js */
/**********************************************/
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import './utils/rem'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
此时，再看运行后的效果，使用chrome手机模式预览，可以发现rem已经生效。
Step4. 配置sass
整个项目过程中我们将使用sass，但是目前还没有配置。我们先修改Layout.vue，将它的style改成sass写法，如下：
/**********************************************/
/* src/components/Layout.vue */
/**********************************************/
...
<style lang="scss" scoped>
/*layout*/
.app_wrapper {
background-color: #f2f2f2;
.main_wrapper {
.title {
font-size: 1rem;
color: #f00;
}
}
}
</style>
// 注解：
// 仅修改style这里，其他代码不变
// 注意添加lang="scss"
保存修改之后，我们可以看到终端报错。根据终端显示的错误信息和安装提示，我们可以一步步解决这个问题。
# 按提示安装sass-loader
$ npm install sass-loader 横线横线save（简书双横线自动连起来了）
# 按提示安装node-sass
$ npm install node-sass 横线横线save（简书双横线自动连起来了）
再启动运行项目，没有报错，sass已经可以正常使用了。那么我们可能会疑问，为什么安装缺失的模块之后就可以用了呢？答案就在build文件夹下的配置中，想研究一下的可以去看看其中的webpack.base.conf.js和utilsl.js两个文件。
Step5. 顶部导航header
在src/components中创建header文件夹，并创建head.vue，其代码如下：
/**********************************************/
/* src/components/header/head.vue */
/**********************************************/
<template>
<header id="head" class='header'>
<span class="head_toggle" @click="toggleSideBar"><i class="iconfont icon-category"></i></span>
<span class="head_logo">logo</span>
</header>
</template>
<script>
export default {
data () {
return {
sidebar: false,
}
},
methods: {
toggleSideBar() {
this.sidebar = !this.sidebar;
console.log("sidebar current value: " + this.sidebar);
},
},
}
</script>
<style lang="scss" scoped>
/*header*/
.header {
background-color: #3190e8;
position: fixed;
z-index: 10;
left: 0;
top: 0;
text-align: center;
width: 100%;
height: 1.95rem;
.head_toggle {
position: absolute;
left:0.5rem;
i {
line-height: 1.95rem;
font-size: 1rem;
}
}
.head_logo {
line-height: 1.95rem;
font-size: 1rem;
color: #fff;
}
}
</style>
接着，我们在Layout.vue中引用head组件，代码如下：
/**********************************************/
/* src/components/Layout.vue */
/**********************************************/
<template>
<div class="app_wrapper">
<!-- head -->
<head-top></head-top>
<!-- main -->
<div class="main_wrapper">
<img src="../assets/logo.png">
<h1 class="title">{{ msg }}</h1>
</div>
</div>
</template>
<script>
import headTop from './header/head'
export default {
components: {
headTop
},
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
}
</script>
<style lang="scss" scoped>
/*layout*/
.app_wrapper {
background-color: #f2f2f2;
/*main_wrapper*/
.main_wrapper {
padding-top: 1.95rem;
.title {
font-size: 1rem;
color: #f00;
}
}
}
</style>
这里需要注意一点，我用的是<head-top></head-top>，而非<header></header>，这是因为header是html的关键字，类似的命名都不能使用。
其次，为什么在script中的引用是headTop，而在html里的书写就变成了head-top。这个可以去查下，根据大写字母自动转变成-连接。
在Layout.vue中，我们还做了一件事，就是把src/App.vue中的logo图片那段代码暂时移动到这里了。同时，我们把src/App.vue中的style样式删除，下面将引入全站样式文件。此时，src/App.vue的代码如下：
/**********************************************/
/* src/App.vue */
/**********************************************/
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
Step6. 引入iconfont
上面我们说引入全站样式，在src下创建style文件夹，并依次添加样式入口文件index.scss，全站样式文件common.scss，字体样式文件iconfont.scss，mixin文件mixin.scss，如下：
/**********************************************/
/* src/style/index.scss */
/**********************************************/
@import "./common.scss";
@import "./iconfont.scss";
@import "./mixin.scss";
/**********************************************/
/* src/style/common.scss */
/**********************************************/
body,
div,
span,
header,
footer,
nav,
section,
aside,
article,
ul,
dl,
dt,
dd,
li,
a,
p,
h1,
h2,
h3,
h4,
h5,
h6,
// i,
b,
textarea,
button,
input,
select,
figure,
figcaption,
{
padding: 0;
margin: 0;
list-style: none;
font-style: normal;
text-decoration: none;
border: none;
color: #333;
font-weight: normal;
font-family: "Microsoft Yahei";
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
&:hover {
outline: none;
}
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 0px;
height: 0px;
background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
border-radius: 10px;
background-color: #F5F5F5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #555;
}
/*定义自动填充数据背景色*/
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
-webkit-text-fill-color: #666;
}
/*定义placeholder提示的颜色*/
::-webkit-input-placeholder {
/* WebKit browsers */
// font-size: 0.6rem;
color: #999;
}
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
// font-size: 0.6rem;
color: #999;
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
// font-size: 0.6rem;
color: #999;
}
:-ms-input-placeholder {
/* Internet Explorer 10+ */
// font-size: 0.6rem;
color: #999;
}
input[type="button"],
input[type="submit"],
input[type="search"],
input[type="reset"] {
-webkit-appearance: none;
}
textarea {
-webkit-appearance: none;
}
html,
body {
height: 100%;
width: 100%;
background-color: #f5f5f5; //transparent;
font-size: 0.6rem;
}
.clear:after {
content: '';
display: block;
clear: both;
}
.clear {
zoom: 1;
}
.back_img {
background-repeat: no-repeat;
background-size: 100% 100%;
}
.margin {
margin: 0 auto;
}
.left {
float: left;
}
.right {
float: right;
}
.hide {
display: none;
}
.show {
display: block;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.paddingTop {
padding-top: 1.95rem;
}
@keyframes backOpacity {
0% {
opacity: 1
}
25% {
opacity: .5
}
50% {
opacity: 1
}
75% {
opacity: .5
}
100% {
opacity: 1
}
}
.animation_opactiy {
animation: backOpacity 2s ease-in-out infinite;
}
/**********************************************/
/* src/style/iconfont.scss */
/**********************************************/
// 暂时没有内容
/**********************************************/
/* src/style/mixin.scss */
/**********************************************/
// 暂时没有内容
既然已经创建了文件，我们就可以将样式用于项目，在src/main.js中引入index.scss，代码如下：
/**********************************************/
/* src/main.js */
/**********************************************/
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import './config/rem'
import './style/index.scss'; //仅插入这句
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
此时，我们的iconfont.scss文件其实已经被引用到项目中了，但是因为没有字体样式的内容，没有效果。
我们使用iconfont-阿里巴巴矢量图标库来为项目创建字体。登陆帐号后，添加字体，创建项目，下载项目字体，我们就可以拿来使用了。下载的字体文件包内容如下：
# 下载的字体文件包内容
font package
├── demo_fontclass.html // class使用方式（demo）
├── demo_symbol.html // symbol使用方式（demo）
├── demo_unicode.html // unicode使用方式（demo）
├── demo.css // 样式文件（demo）
├── iconfont.css // 字体样式
├── iconfont.eot // 字体文件
├── iconfont.js // 字体脚本
├── iconfont.svg // 字体文件
├── iconfont.ttf // 字体文件
└── iconfont.woff // 字体文件
当然，你也可以选择使用字体在线路径进行引用，不过我一般没有这么做。
在src/assets中创建iconfont文件夹，将iconfont.eot，iconfont.svg，iconfont.ttf，iconfont.woff放入其中，接着修改iconfont.scss文件，内容如下：
/**********************************************/
/* src/style/iconfont.scss */
/**********************************************/
@font-face {
font-family: "iconfont";
src: url('../assets/iconfont/iconfont.eot?t=1509583688642');
/* IE9*/
src: url('../assets/iconfont/iconfont.eot?t=1509583688642#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../assets/iconfont/iconfont.woff?t=1509583688642') format('woff'), /* chrome, firefox */
url('../assets/iconfont/iconfont.ttf?t=1509583688642') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('../assets/iconfont/iconfont.svg?t=1509583688642#iconfont') format('svg');
/* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 0.8rem;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-category:before {
content: "\e699";
}
.icon-fanhui:before {
content: "\e6e3";
}
.icon-tianjia:before {
content: "\e6a5";
}
.icon-tianjia-circle:before {
content: "\e68e";
}
.icon-xiaoxi:before {
content: "\e672";
}
.icon-lianxiren:before {
content: "\e63d";
}
.icon-dongtai:before {
content: "\e602";
}
.icon-404:before {
content: "\e60c";
}
.icon-search:before {
content: "\e620";
}
.icon-vip:before {
content: "\e603";
}
.icon-wallet:before {
content: "\e625";
}
.icon-grab:before {
content: "\e604";
}
.icon-favor:before {
content: "\e61f";
}
.icon-photo:before {
content: "\e63f";
}
.icon-file:before {
content: "\e621";
}
.icon-setting:before {
content: "\e8ea";
}
.icon-night:before {
content: "\e653";
}
.icon-profile:before {
content: "\e631";
}
.icon-phone:before {
content: "\e626";
}
.icon-totop:before {
content: "\e600";
}
.icon-QQ:before {
content: "\e647";
}
.icon-arrow-down:before {
content: "\e6a6";
}
.icon-arrow-right:before {
content: "\e6a7";
}
注意：这里的代码和字体文件，已经包含整个项目所用到的全部字体。
此时，我们看运行后的项目效果，header的toggleButton按钮已经显示字体。我们又发现不对了，这里是字体按钮，可是在线demo和效果截图中，这个按钮是一个头像图片，这个下一步我们再替换下。
Step7. 侧边菜单sidebar
在src/components中创建sidebar文件夹，并创建sidebar.vue，其代码如下：
/**********************************************/
/* src/components/sidebar/sidebar.vue */
/**********************************************/
<template>
<div class="sidebar">
<div class="top">
<div class="top_info">
<img class="top_image" src="https://cn.bing.com/az/hprichbg/rb/GreatSaltLake_ZH-CN12553220159_1920x1080.jpg"/>
<span class="top_name">Season</span>
<p class="top_sign">太多曾沾沾自喜誓必珍惜的情谊，败给了时光的腐朽</p>
</div>
</div>
<div class="menu">
<ul>
<li>
<i class="iconfont icon-vip"></i>我的超级会员
</li>
<li>
<i class="iconfont icon-wallet"></i>QQ钱包
</li>
<li>
<i class="iconfont icon-grab"></i>个性装扮
</li>
<li>
<i class="iconfont icon-favor"></i>我的收藏
</li>
<li>
<i class="iconfont icon-photo"></i>我的相册
</li>
<li>
<i class="iconfont icon-file"></i>我的文件
</li>
</ul>
</div>
<div class="tool">
<span @click="handleSidebar('setting')">
<i class="iconfont icon-setting"></i>设置
</span>
<span @click="handleSidebar('login')">
<i class="iconfont icon-night"></i>夜间
</span>
</div>
</div>
</template>
<script>
export default {
methods: {
handleSidebar(name) {
// 暂时不要管这里，后面你可以留意下
// 作用就是改变侧边菜单状态，并存储进仓库
// this.$store.dispatch('ToggleSideBar');
// 跳转对应页面
this.$router.push({ path: '/'+name });
}
}
}
</script>
<style lang="scss" scoped>
/*sidebar*/
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
height: 100%;
color: #999;
z-index: 110;
background-color: #fff;
i {
margin-right: 0.5rem;
}
.top {
position: relative;
width: 100%;
height: 30%;
background-color: #333;
background-image: url(https://cn.bing.com/az/hprichbg/rb/CoastalBeech_ZH-CN8739604309_1920x1080.jpg);
background-position: 50% 50%;
background-size: cover;
.top_info {
position: absolute;
left: 0;
bottom: 0;
padding: 0 0.8rem 0.6rem;
width: 100%;
.top_image {
width: 1.8rem;
height: 1.8rem;
border-radius: 1.8rem;
border: 0.12rem solid #fff;
}
.top_name {
padding-left: 0.4rem;
vertical-align: top;
line-height: 2.2rem;
font-size: 1.2rem;
font-weight: 600;
color: #fff;
}
.top_sign {
padding: 0.2rem 0;
font-size: 0.6rem;
color: #fff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.menu {
width: 100%;
height: 70%;
padding: 0.8rem 0 2rem 0;
ul {
padding: 0 0.8rem;
li {
height: 1.85rem;
line-height: 1.85rem;
}
}
}
.tool {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background-color: #fff;
line-height: 2rem;
span {
display: inline-block;
padding: 0 0.8rem;
i {
color: #666;
}
}
}
}
</style>
接着，我们在Layout.vue中引用sidebar组件，代码如下：
/**********************************************/
/* src/components/Layout.vue */
/**********************************************/
<template>
<div class="app_wrapper hideSidebar">
<!-- head -->
<head-top></head-top>
<!-- sidebar -->
<sidebar></sidebar>
<!-- main -->
<div class="main_wrapper">
<img src="../assets/logo.png">
<h1 class="title">{{ msg }}</h1>
</div>
</div>
</template>
<script>
import headTop from './header/head'
import sidebar from './sidebar/sidebar'
export default {
components: {
headTop,
sidebar
},
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
}
</script>
<style lang="scss">
/*layout*/
.app_wrapper {
overflow-x: hidden;
.header {
transition: all .28s ease-out;
transform: translateX(13rem);
}
.sidebar {
width: 13rem;
transition: all .28s ease-out;
transform: translate(0);
}
/*main_wrapper*/
.main_wrapper {
padding-top: 1.95rem;
transition: all .28s ease-out;
transform: translateX(13rem);
}
&.hideSidebar {
.header {
transform: translateX(0);
}
.sidebar {
transform: translateX(-13rem);
}
.main_wrapper {
transform: translateX(0);
}
}
}
</style>
现在，我们把sidebar组件引入了，但是发现控制样式的类hideSidebar受到顶部导航header的变量sidebar控制，需要将变量放置在Layout.vue中，并且在侧边菜单显示的时候需要一个遮罩层masking。
在src/components中创建masking文件夹，并创建masking.vue，其代码如下：
/**********************************************/
/* src/components/masking/masking.vue */
/**********************************************/
<template>
<div class="masking" @click="toggleSideBar"></div>
</template>
<script>
export default {
methods: {
toggleSideBar() {
//暂时先注释，后面store之后那步再打开
// this.$store.dispatch('ToggleSideBar');
},
},
}
</script>
<style lang="scss" scoped>
/*masking*/
.masking {
display: block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 100;
}
</style>
修改Layout.vue，引入masking组件，并添加sidebar变量及toggleSideBar方法，稍后header组件调用。
/**********************************************/
/* src/components/Layout.vue */
/**********************************************/
<template>
<div class="app_wrapper" :class="{hideSidebar:sidebar}">
<!-- head -->
<head-top @toggleSideBar="toggleSideBar"></head-top>
<!-- sidebar -->
<sidebar></sidebar>
<!-- masking -->
<masking></masking>
<!-- main -->
<div class="main_wrapper">
<img src="../assets/logo.png">
<h1 class="title">{{ msg }}</h1>
</div>
</div>
</template>
<script>
import headTop from './header/head'
import sidebar from './sidebar/sidebar'
import masking from './masking/masking'
export default {
components: {
headTop,
sidebar,
masking
},
data() {
return {
sidebar: false,
msg: 'Welcome to Your Vue.js App'
}
},
methods: {
toggleSideBar() {
this.sidebar = !this.sidebar;
console.log("sidebar current value: " + this.sidebar);
},
},
}
</script>
<style lang="scss">
/*layout*/
.app_wrapper {
overflow-x: hidden;
.header {
transition: all .28s ease-out;
transform: translateX(13rem);
}
.sidebar {
width: 13rem;
transition: all .28s ease-out;
transform: translate(0);
}
/*main_wrapper*/
.main_wrapper {
padding-top: 1.95rem;
transition: all .28s ease-out;
transform: translateX(13rem);
}
&.hideSidebar {
.header {
transform: translateX(0);
}
.sidebar {
transform: translateX(-13rem);
}
.masking {
display: none;
}
.main_wrapper {
transform: translateX(0);
}
}
}
</style>
修改header.vue文件，代码如下：
/**********************************************/
/* src/components/header/head.vue */
/**********************************************/
<template>
<header class='header'>
<span class="head_toggle" @click="toggleSideBar">
<img class="top_image" src="https://cn.bing.com/az/hprichbg/rb/GreatSaltLake_ZH-CN12553220159_1920x1080.jpg"/>
</span>
<span class="head_text">LOGO</span>
</header>
</template>
<script>
export default {
methods: {
toggleSideBar() {
// this.sidebar = !this.sidebar;
// console.log("sidebar current value: " + this.sidebar);
this.$emit('toggleSideBar');
},
},
}
</script>
<style lang="scss" scoped>
/*header*/
.header {
background-color: #3190e8;
background: -webkit-linear-gradient(right top, #61b8f8 , #5e8bf7); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom left, #61b8f8, #5e8bf7); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom left, #61b8f8, #5e8bf7); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom left, #61b8f8 , #5e8bf7); /* 标准的语法 */
position: fixed;
left: 0;
top: 0;
text-align: center;
width: 100%;
height: 1.95rem;
z-index: 10;
/*头像菜单按钮*/
.head_toggle {
position: absolute;
left:0.5rem;
img {
width: 1.5rem;
height: 1.5rem;
border-radius: 1rem;
margin-top: 0.2rem;
}
i {
line-height: 1.95rem;
font-size: 1rem;
}
}
/*文字*/
.head_text {
line-height: 1.95rem;
font-size: 0.7rem;
color: #fff;
display: inline-block;
}
}
</style>
现在来看一下效果，我们要的功能已经实现了。
Step8. 底部导航footer
在src/components中创建footer文件夹，并创建footer.vue，其代码如下：
/**********************************************/
/* src/components/footer/footer.vue */
/**********************************************/
<template>
<div class='footer'>
<router-link to="/messages" class="footer_menu" :class="{active:(activeIndex==0)}">
<i class="iconfont icon-xiaoxi"></i>
<span>消息</span>
</router-link>
<router-link to="/contacts" class="footer_menu" :class="{active:(activeIndex==1)}">
<i class="iconfont icon-lianxiren"></i>
<span>联系人</span>
</router-link>
<router-link to="/dynamics" class="footer_menu" :class="{active:(activeIndex==2)}">
<i class="iconfont icon-dongtai"></i>
<span>动态</span>
</router-link>
</div>
</template>
<script>
export default {
props: ['activeIndex'],
}
</script>
<style lang="scss" scoped>
.footer {
background-color: #fff;
position: fixed;
z-index: 10;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 1.95rem;
display: flex;
box-shadow: 0 -0.03rem 0.05rem rgba(0, 0, 0, .1);
.footer_menu {
flex: 1;
display: flex;
text-align: center;
flex-direction: column;
align-items: center;
.iconfont {
display: block;
font-size: 1rem;
margin-top: 0.2rem;
color: #666;
}
span {
display: block;
font-size: 0.4rem;
color: #666;
}
&.active {
.iconfont {
color: #68b7f9;
}
span {
color: #68b7f9;
}
}
}
}
</style>
接着，我们在Layout.vue中引用footer组件，代码如下：
/**********************************************/
/* src/components/Layout.vue */
/**********************************************/
<template>
<div class="app_wrapper" :class="{hideSidebar:sidebar}">
<!-- head -->
<head-top @toggleSideBar="toggleSideBar"></head-top>
<!-- sidebar -->
<sidebar></sidebar>
<!-- masking -->
<masking></masking>
<!-- footer -->
<foot-menu :activeIndex="0"></foot-menu>
<!-- main -->
<div class="main_wrapper">
<img src="../assets/logo.png">
<h1 class="title">{{ msg }}</h1>
</div>
</div>
</template>
<script>
import headTop from './header/head'
import sidebar from './sidebar/sidebar'
import masking from './masking/masking'
import footMenu from '@/components/footer/footer'
export default {
components: {
headTop,
sidebar,
masking,
footMenu
},
data () {
return {
sidebar: false,
msg: 'Welcome to Your Vue.js App'
}
},
methods: {
toggleSideBar() {
this.sidebar = !this.sidebar;
console.log("sidebar current value: " + this.sidebar);
},
},
}
</script>
<style lang="scss">
/*layout*/
.app_wrapper {
overflow-x: hidden;
.header {
transition: all .28s ease-out;
transform: translateX(13rem);
}
.sidebar {
width: 13rem;
transition: all .28s ease-out;
transform: translate(0);
}
/*main_wrapper*/
.main_wrapper {
padding-top: 1.95rem;
transition: all .28s ease-out;
transform: translateX(13rem);
}
.footer {
transition: all .28s ease-out;
transform: translateX(13rem);
}
&.hideSidebar {
.header {
transform: translateX(0);
}
.sidebar {
transform: translateX(-13rem);
}
.masking {
display: none;
}
.main_wrapper {
transform: translateX(0);
}
.footer {
transform: translateX(0);
}
}
}
</style>
那么做到这里，我们就已经能够将一个APP的基本结构用组件方式拼装起来，这个母版页将可以用在多个页面。我们已经掌握了这部分技能。
但是，现在我们再回去看一下需要实现的demo，我们发现并不是所有页面都有footer，每个页面的header也不大相同。我们未来需要调整母版页Layout的代码，把顶部导航和底部导航丢到各个具体页面上。
Step9. 返回顶部backToTop（组件）
返回顶部也是一个常用的功能，看一下实现。在src/components中创建common文件夹，并创建backToTop.vue，其代码如下：
/**********************************************/
/* src/components/common/backToTop.vue */
/**********************************************/
<template>
<div v-show="visible" id="back_top" @click="backTop">
<i class="iconfont icon-totop"></i>
</div>
</template>
<script>
export default {
props: {
scrollHeight: {
type: Number,
default: 100
},
timeSpan: {
type: Number,
default: 200
}
},
data() {
return {
wHeight: 0,
visible: false,
ret: 0,
obj: null,
speed: 0,
times: 0,
time: 0,
}
},
mounted () {
window.addEventListener('scroll',this.hasScroll);
},
methods: {
hasScroll(){
const scrollTop = this.getScroll(window);
this.visible = scrollTop > this.scrollHeight;
},
getScroll(w){
this.ret = w.pageYOffset
const method = 'scrollTop'
if(typeof this.ret !== 'number'){
let d= w.document;
this.ret = d.documentElemelnt[method]
if(typeof this.ret !== 'number'){
this.ret = d.body[method]
}
}
return this.ret
},
backTop(){
const initerval = 30
let num = this.timeSpan/initerval
this.time = 0
this.times = num;
this.speed = this.ret / num
this.obj = setInterval(this.setScroll,initerval)
},
setScroll(){
if(this.time > this.times || this.ret<=0){
clearInterval(this.obj)
return
}
this.time++
this.ret -= this.speed
if(this.ret<0) {
this.ret = 0;
}
document.documentElement.scrollTop = document.body.scrollTop = this.ret
}
},
}
</script>
<style lang="scss" scoped>
#back_top {
position: fixed;
bottom: 10%;
right: 1rem;
width: 1.6rem;
height: 1.6rem;
border-radius: 1.6rem;
line-height: 1.6rem;
text-align: center;
background-color: rgba(49, 49, 49, 0.23);
i {
color: #666;
}
}
</style>
和header、footer一样，在Layout.vue中引用就好了，这里不单独贴代码了。
Step10. 仓库存储store
为了后面能把header和footer移出Layout，放入每个单独的页面，我们需要把控制侧边菜单状态的变量存放在仓库store中管理。下面看看如何实现。
在src中创建store文件夹，并创建以下目录及文件：
store
├── modules // 仓库模块
│ ├── app.js // 基础模块（存放sidebar状态等）
│ ├── common.js // 页面模块（存放页面数据，晚点用到）
│ └── user.js // 用户模块（存放用户信息，晚点用到）
├── getters.js // 计算属性
└── index.js // 入口文件
其中，index.js，getters.js，modules/app.js的代码如下：
/**********************************************/
/* src/store/index.js */
/**********************************************/
import Vue from 'vue';
import Vuex from 'vuex';
import app from './modules/app';
import getters from './getters';
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
app
},
getters
});
export default store
/**********************************************/
/* src/store/getter.js */
/**********************************************/
const getters = {
sidebar: state => state.app.sidebar
};
export default getters
/**********************************************/
/* src/store/modules/app.js */
/**********************************************/
import Cookies from 'js-cookie';
const app = {
state: {
sidebar: !+Cookies.get('sidebarStatus')
},
mutations: {
TOGGLE_SIDEBAR: state => {
if (state.sidebar) {
Cookies.set('sidebarStatus', 1);
} else {
Cookies.set('sidebarStatus', 0);
}
state.sidebar = !state.sidebar;
},
},
actions: {
ToggleSideBar: ({ commit }) => {
commit('TOGGLE_SIDEBAR')
},
}
};
export default app;
在modules/app.js中，我们用了一个模块js-cookie，需要安装一下，如下：
$ npm install js-cookier --save
安装好了即可。
接着我们在main.js中引入store，代码如下：
/**********************************************/
/* src/main.js */
/**********************************************/
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import './config/rem'
import './style/index.scss';
import store from './store/index' // 插入这句
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store, // 插入这句
template: '<App/>',
components: { App }
})
此时仓库存储就搭建好了。
Step11. 侧边菜单状态保存
先修改Layout，将sidebar变量改成从仓库中获取；再修改header，调用仓库的方法改变sidebar的值。
/**********************************************/
/* src/components/Layout.vue */
/**********************************************/
<template>
<div class="app_wrapper" :class="{hideSidebar:sidebar}">
<!-- head -->
<head-top @toggleSideBar="toggleSideBar"></head-top>
<!-- sidebar -->
<sidebar></sidebar>
<!-- masking -->
<masking></masking>
<!-- footer -->
<foot-menu :activeIndex="0"></foot-menu>
<!-- main -->
<div class="main_wrapper">
<img src="../assets/logo.png">
<h1 class="title">{{ msg }}</h1>
</div>
<!-- backToTop -->
<back-to-top></back-to-top>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import headTop from './header/head'
import sidebar from './sidebar/sidebar'
import masking from './masking/masking'
import footMenu from './footer/footer'
import backToTop from './common/backToTop'
export default {
components: {
headTop,
sidebar,
masking,
footMenu,
backToTop
},
data () {
return {
sidebar: false,
msg: 'Welcome to Your Vue.js App'
}
},
computed: {
...mapGetters([
'sidebar',
])
},
}
</script>
<style lang="scss">
/*layout*/
.app_wrapper {
overflow-x: hidden;
.header {
transition: all .28s ease-out;
transform: translateX(13rem);
}
.sidebar {
width: 13rem;
transition: all .28s ease-out;
transform: translate(0);
}
/*main_wrapper*/
.main_wrapper {
padding-top: 1.95rem;
transition: all .28s ease-out;
transform: translateX(13rem);
}
.footer {
transition: all .28s ease-out;
transform: translateX(13rem);
}
&.hideSidebar {
.header {
transform: translateX(0);
}
.sidebar {
transform: translateX(-13rem);
}
.masking {
display: none;
}
.main_wrapper {
transform: translateX(0);
}
.footer {
transform: translateX(0);
}
}
}
</style>
/**********************************************/
/* src/components/header/head.vue */
/**********************************************/
<template>
<header class='header'>
<span class="head_toggle" @click="toggleSideBar">
<img class="top_image" src="https://cn.bing.com/az/hprichbg/rb/GreatSaltLake_ZH-CN12553220159_1920x1080.jpg"/>
</span>
<span class="head_text">LOGO</span>
</header>
</template>
<script>
export default {
methods: {
toggleSideBar() {
this.$store.dispatch('ToggleSideBar');
},
},
}
</script>
<style lang="scss" scoped>
/*header*/
.header {
background-color: #3190e8;
background: -webkit-linear-gradient(right top, #61b8f8 , #5e8bf7); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom left, #61b8f8, #5e8bf7); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom left, #61b8f8, #5e8bf7); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom left, #61b8f8 , #5e8bf7); /* 标准的语法 */
position: fixed;
left: 0;
top: 0;
text-align: center;
width: 100%;
height: 1.95rem;
z-index: 10;
/*头像菜单按钮*/
.head_toggle {
position: absolute;
left:0.5rem;
img {
width: 1.5rem;
height: 1.5rem;
border-radius: 1rem;
margin-top: 0.2rem;
}
i {
line-height: 1.95rem;
font-size: 1rem;
}
}
/*文字*/
.head_text {
line-height: 1.95rem;
font-size: 0.7rem;
color: #fff;
display: inline-block;
}
}
</style>
此时，我们查看效果，这一块已经完成。
Step12. 搜索栏searchBar（组件）
查看我们要做的demo页面，发现很多页面有一个公共组件searchBar，我们先把这个处理一下。
在src/components/common中添加searchBar.vue，代码如下：
/**********************************************/
/* src/components/common/searchBar.vue */
/**********************************************/
<template>
<div class="search" @click="handleClick">
<div class="search_content">
<i class="iconfont icon-search"></i> 搜索
</div>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
this.$router.push({ path: '/search' });
}
}
}
</script>
<style lang="scss" scoped>
.search {
padding: 0.5rem;
background-color: #fff;
.search_content {
text-align: center;
font-size: 0.5rem;
line-height: 2;
border-radius: 0.1rem;
color: #999;
background-color: #eee;
i {
font-size: 0.5rem;
color: #999;
}
}
}
</style>
代码中有一个事件，它的作用就是跳转到搜索页面，那么稍后我们添加这个页面，并添加相关路由。
Step13. 页面添加
现在我们先整理一下Layout.vue，把header和footer移出去，等下将他们放在各个页面中。这里，我们还把页面的实际内容代码，用<router-view></router-view>替换，这个位置将渲染页面的具体内容。整理后的Layout.vue，代码如下：
/**********************************************/
/* src/components/Layout.vue */
/**********************************************/
<template>
<div class="app_wrapper" :class="{hideSidebar:sidebar}">
<!-- main -->
<router-view></router-view>
<!-- sidebar -->
<sidebar></sidebar>
<!-- masking -->
<masking></masking>
<!-- backToTop -->
<back-to-top></back-to-top>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import sidebar from './sidebar/sidebar'
import masking from './masking/masking'
import backToTop from './common/backToTop'
export default {
components: {
sidebar,
masking,
backToTop,
},
computed: {
...mapGetters([
'sidebar',
])
},
}
</script>
<style lang="scss">
/*layout*/
.app_wrapper {
overflow-x: hidden;
.header {
transition: all .28s ease-out;
transform: translateX(13rem);
}
.sidebar {
width: 13rem;
transition: all .28s ease-out;
transform: translate(0);
}
/*main_wrapper*/
.main_wrapper {
padding-top: 1.95rem;
transition: all .28s ease-out;
transform: translateX(13rem);
}
.footer {
transition: all .28s ease-out;
transform: translateX(13rem);
}
&.hideSidebar {
.header {
transform: translateX(0);
}
.sidebar {
transform: translateX(-13rem);
}
.masking {
display: none;
}
.main_wrapper {
transform: translateX(0);
}
.footer {
transform: translateX(0);
}
}
}
</style>
在src中创建page文件夹，并创建以下文件：
page
├── messages
│ └── messages.vue // 消息页面
├── contacts
│ └── contacts.vue // 联系人页面
├── dynamics
│ └── dynamics.vue // 动态页面
├── search
│ └── search.vue // 搜索页面
├── login
│ └── login.vue // 登陆页面
├── error
│ └── pageNotFound.vue // 404页面
├── ...
├── ...
└── 其他请看源码
所有页面的代码先如下：
/**********************************************/
/* 上述新创建页面 */
/**********************************************/
<template>
<div>
这里是<对应页面名称>页面（区分一下）
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>
上面代码，表示每个页面只是带有一句描述的空页面。下面，我们把路由补全，修改src/router/index.js，代码如下：
/**********************************************/
/* src/router/index.js */
/**********************************************/
import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/components/Layout'
const Login = r => require.ensure([], () => r(require('../page/login/login')), 'Login')
const Messages = r => require.ensure([], () => r(require('../page/messages/messages')), 'messages')
const Contacts = r => require.ensure([], () => r(require('../page/contacts/contacts')), 'contacts')
const Dynamics = r => require.ensure([], () => r(require('../page/dynamics/dynamics')), 'dynamics')
const Search = r => require.ensure([], () => r(require('../page/search/search')), 'search')
const PageNotFound = r => require.ensure([], () => r(require('../page/error/pageNotFound')), 'pageNotFound')
Vue.use(Router)
export default new Router({
mode: "history",
routes: [
{ path: '/login', name: 'Login', component: Login },
{
path: '/',
component: Layout,
children: [
{ path: '', redirect: '/login' },
{ path: '/messages', name: 'Messages', component: Messages },
{ path: '/contacts', name: 'Contacts', component: Contacts },
{ path: '/dynamics', name: 'Dynamics', component: Dynamics },
{ path: '/search', name: 'Search', component: Search }
]
},
{ path: '*', component: PageNotFound }
]
})
下面，我们通过修改URL，看一下是否可以访问所有页面。
Step14. 弹窗提示（组件）
考虑到要用到“提示”，我们先添加一个这样的组件。在src/components/common中添加alertTip.vue，代码如下：
/**********************************************/
/* src/components/common/alertTip.vue */
/**********************************************/
<template>
<div class="alet_container">
<section class="tip_text_container">
<div class="tip_icon">
<span></span>
<span></span>
</div>
<p class="tip_text">{{alertText}}</p>
<div class="confrim" @click="closeTip">确认</div>
</section>
</div>
</template>
<script>
export default {
data(){
return{
positionY: 0,
timer: null,
}
},
mounted(){
},
props: ['alertText'],
methods: {
closeTip(){
this.$emit('closeTip')
}
}
}
</script>
<style lang="scss" scoped>
@keyframes tipMove{
0% { transform: scale(1) }
35% { transform: scale(.8) }
70% { transform: scale(1.1) }
100% { transform: scale(1) }
}
.alet_container{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 200;
background-color: rgba(0,0,0,0.5);
}
.tip_text_container{
position: absolute;
top: 50%;
left: 50%;
margin-top: -6rem;
margin-left: -6rem;
width: 12rem;
animation: tipMove .4s ;
background-color: rgba(255,255,255,1);
border: 1px;
padding-top: .6rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border: 1px;
border-radius: 0.25rem;
.tip_icon{
width: 3rem;
height: 3rem;
border: 0.15rem solid #f8cb86;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
span:nth-of-type(1){
width: 0.12rem;
height: 1.5rem;
background-color: #f8cb86;
}
span:nth-of-type(2){
width: 0.2rem;
height: 0.2rem;
border: 1px;
border-radius: 50%;
margin-top: .2rem;
background-color: #f8cb86;
}
}
.tip_text{
font-size: 0.7rem;
color: #333;
line-height: .9rem;
text-align: center;
margin-top: .8rem;
padding: 0 .4rem;
}
.confrim{
font-size: 0.8rem;
color: #fff;
font-weight: bold;
margin-top: .8rem;
background-color: #4cd964;
width: 100%;
text-align: center;
line-height: 1.8rem;
border: 1px;
border-bottom-left-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
}
</style>
之后login页面请求的时候，我们再看看是如何使用的。
由于文章篇幅限制，请继续阅读Vue教程--Wap端项目搭建从0到1（详解2）。
学习是一条漫漫长路，每天不求一大步，进步一点点就是好的。
网友评论