本文基于工作项目开发，做的整理笔记
前段时间公司有的小伙伴刚开始学习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.后续
Step23. 完善其他页面
contacts联系人页面与messages消息页面想似，用了仓库存储数据。下面看看它的相关代码：
/**********************************************/
/* src/page/contacts/contacts.vue */
/**********************************************/
<template>
<div>
<!-- head -->
<head-top>
<span slot='head_text' class="head_text">联系人</span>
<span slot='head_btn' class="head_btn"><router-link to="/add">添加</router-link></span>
</head-top>
<!-- main -->
<div class="main_wrapper">
<div class="container">
<search-bar></search-bar>
<div class="new_friend">
<router-link to="/add">
新朋友
<span style="position: absolute; right: 0.5rem;"><i class="iconfont icon-arrow-right"></i></span>
</router-link>
</div>
<div class="tab">
<span class="tab_item" :class="{active:tabActive==0}" @click="handleChangeTab(0)">好友</span>
<span class="tab_item" :class="{active:tabActive==1}" @click="handleChangeTab(1)">群</span>
<span class="tab_item" :class="{active:tabActive==2}" @click="handleChangeTab(2)">多人聊天</span>
<span class="tab_item" :class="{active:tabActive==3}" @click="handleChangeTab(3)">设备</span>
<span class="tab_item" :class="{active:tabActive==4}" @click="handleChangeTab(4)">通讯录</span>
<span class="tab_item" :class="{active:tabActive==5}" @click="handleChangeTab(5)">公众号</span>
</div>
<div class="group clearfix" v-for="(group, index) in data" :key="index">
<div class="group_catg" @click="handleToggleGroupList(index)">
<i class="iconfont" :class="group.closed?'icon-arrow-right':'icon-arrow-down'"></i>
<span class="name">{{group.name}}</span>
<span class="nums">{{group.online}}/{{group.total}}</span>
</div>
<div class="group_list" :class="{hide:group.closed}">
<router-link to="/profile" class="item" v-for="(item, index) in group.list" :key="index">
<div class="item_image" :style="'background-image: url('+item.image+');'"></div>
<div class="item_info" :class="{last:index==(group.list.length-1)}">
<div class="item_info_head">
<span class="name">{{item.name}}</span>
</div>
<div class="item_info_content"><span>{{item.type}}</span> {{item.content}}</div>
</div>
</router-link>
</div>
</div>
<transition name="loading">
<div style="background-color: #fff; padding: 0.5rem; text-align: center; color: #999;" v-show="showLoading">Loading...</div>
</transition>
</div>
</div>
<!-- footer -->
<foot-menu :activeIndex="1"></foot-menu>
</div>
</template>
<script>
import headTop from '@/components/header/head'
import footMenu from '@/components/footer/footer'
import searchBar from '@/components/common/searchBar'
import {scrollPosition} from '@/utils/utils'
export default {
components: {
headTop,
footMenu,
searchBar,
},
data () {
return {
data:[], // 列表数据
tabActive: 0, // 当前激活的tab
showLoading: true, //显示加载动画
}
},
mounted(){
this.initData();
},
methods: {
async initData(){
// 判断之前是否请求过数据
if (this.$store.getters.contacts.length == 0) {
// 请求数据
this.$store.dispatch('GetContactsList').then(() => {
this.data = this.$store.getters.contacts;
}).catch(err => {
console.log('error:'+err);
});
this.hideLoading();
} else {
// 直接取之前的数据
this.data = this.$store.getters.contacts;
this.hideLoading();
}
},
handleChangeTab(value){
this.tabActive = value;
},
handleToggleGroupList(index){
this.data[index].closed = !this.data[index].closed;
},
hideLoading(){
this.showLoading = false;
},
},
}
</script>
<style lang="scss" scoped>
.container {
margin-bottom: 1.95rem;
background-color: #f5f5f5;
}
.new_friend {
position: relative;
background-color: #fff;
border: 1px solid #eee;
border-width: 1px 0;
margin-bottom: 0.5rem;
color: #666;
a {
display: block;
padding: 0.5rem;
span {
position: absolute;
right: 0.5rem;
.iconfont {
color: #666;
font-size: 0.6rem;
}
}
}
}
.tab {
background-color: #fff;
border: 1px solid #eee;
border-width: 1px 0;
overflow-x: auto;
overflow-y: hidden;
width: 140%;
height: 1.85rem;
.tab_item {
display: inline-block;
padding: 0.5rem 0;
margin: 0 0.5rem;
color: #666;
&.active {
color: #61b8f8;
}
}
}
.group {
background-color: #fff;
.group_catg {
position: relative;
padding: 0.3rem 0.5rem;
line-height: 1rem;
.iconfont {
color: #999;
font-size: 0.6rem;
margin-right: 0.3rem;
}
.name {
color: #666;
font-size: 0.6rem;
font-weight: 600;
}
.nums {
position: absolute;
right: 0.5rem;
color: #999;
font-size: 0.4rem;
}
}
}
.item {
display: flex;
flex-basis: 100%;
background-color: #fff;
.item_image {
display: flex;
margin: 0.25rem 0.5rem;
min-width: 2rem;
height: 2rem;
border-radius: 2rem;
background-size: cover;
background-position: 50%;
background-color: #d2d2d2;
border-bottom: 1px solid transparent;
}
.item_info {
display: flex;
flex-basis: 100%;
flex-direction: column;
padding: 0.25rem 0.5rem 0.25rem 0;
border-bottom: 1px solid #eee;
overflow: hidden;
.item_info_head {
padding-top: 0.2rem;
font-size: 0.5rem;
overflow: hidden;
color: #999;
> .name {
padding-top: 0.4rem;
color: #666;
font-size: 0.6rem;
font-weight: 600;
line-height: 1rem;
}
> .time {
float: right;
color: #999;
font-size: 0.5rem;
line-height: 1rem;
}
}
.item_info_content {
font-size: 0.5rem;
line-height: 1.4;
color: #666;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
span {
color: #f2a73b;
}
}
&.last {
border: none;
}
}
}
</style>
其他的页面均为静态页面，直接上代码，如下：
/**********************************************/
/* src/page/dynamics/dynamics.vue */
/**********************************************/
<template>
<div>
<!-- head -->
<head-top>
<span slot='head_text' class="head_text">动态</span>
<span slot='head_btn' class="head_btn"><router-link to="/more">更多</router-link></span>
</head-top>
<!-- main -->
<div class="main_wrapper">
<div class="container">
<search-bar></search-bar>
<div class="catg">
<router-link to="/more" class="catg_item">
<i class="iconfont icon-category"></i>
<span>好友动态</span>
</router-link>
<router-link to="/more" class="catg_item">
<i class="iconfont icon-category"></i>
<span>附近</span>
</router-link>
<router-link to="/more" class="catg_item">
<i class="iconfont icon-category"></i>
<span>兴趣部落</span>
</router-link>
</div>
<div class="box">
<div class="box_item">
<router-link to="/game">
<span class="image"><i class="iconfont icon-category"></i></span>
<span class="name">游戏 (swiper demo)</span>
<span class="right"><i class="iconfont icon-arrow-right"></i></span>
</router-link>
</div>
<div class="box_item">
<router-link to="/more">
<span class="image"><i class="iconfont icon-category"></i></span>
<span class="name">日迹</span>
<span class="right"><i class="iconfont icon-arrow-right"></i></span>
</router-link>
</div>
<div class="box_item">
<router-link to="/more">
<span class="image"><i class="iconfont icon-category"></i></span>
<span class="name">看点</span>
<span class="right"><i class="iconfont icon-arrow-right"></i></span>
</router-link>
</div>
<div class="box_item">
<router-link to="/more">
<span class="image"><i class="iconfont icon-category"></i></span>
<span class="name">京东购物</span>
<span class="right"><i class="iconfont icon-arrow-right"></i></span>
</router-link>
</div>
<div class="box_item">
<router-link to="/more">
<span class="image"><i class="iconfont icon-category"></i></span>
<span class="name">阅读</span>
<span class="right"><i class="iconfont icon-arrow-right"></i></span>
</router-link>
</div>
<div class="box_item">
<router-link to="/more">
<span class="image"><i class="iconfont icon-category"></i></span>
<span class="name">动漫</span>
<span class="right"><i class="iconfont icon-arrow-right"></i></span>
</router-link>
</div>
<div class="box_item">
<router-link to="/more">
<span class="image"><i class="iconfont icon-category"></i></span>
<span class="name">音乐</span>
<span class="right"><i class="iconfont icon-arrow-right"></i></span>
</router-link>
</div>
</div>
<div class="box">
<div class="box_item">
<router-link to="/more">
<span class="image"><i class="iconfont icon-category"></i></span>
<span class="name">运动</span>
<span class="right"><i class="iconfont icon-arrow-right"></i></span>
</router-link>
</div>
<div class="box_item">
<router-link to="/more">
<span class="image"><i class="iconfont icon-category"></i></span>
<span class="name">吃喝玩乐</span>
<span class="right"><i class="iconfont icon-arrow-right"></i></span>
</router-link>
</div>
<div class="box_item">
<router-link to="/more">
<span class="image"><i class="iconfont icon-category"></i></span>
<span class="name">同城服务</span>
<span class="right"><i class="iconfont icon-arrow-right"></i></span>
</router-link>
</div>
</div>
</div>
</div>
<!-- footer -->
<foot-menu :activeIndex="2"></foot-menu>
</div>
</template>
<script>
import headTop from '@/components/header/head'
import footMenu from '@/components/footer/footer'
import searchBar from '@/components/common/searchBar'
export default {
components: {
headTop,
footMenu,
searchBar
},
}
</script>
<style lang="scss" scoped>
.container {
margin-bottom: 1.95rem;
background-color: #f5f5f5;
}
.catg {
background-color: #fff;
width: 100%;
height: 2.45rem;
display: flex;
margin-bottom: 0.5rem;
.catg_item {
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;
}
}
}
}
.box {
margin-bottom: 0.5rem;
border-top: 1px solid #eee;
.box_item {
position: relative;
background-color: #fff;
border-bottom: 1px solid #eee;
border-width: 1px 0;
color: #666;
a {
display: block;
padding: 0.5rem;
.image {
margin-right: 0.5rem;
.iconfont {
font-size: 0.6rem;
}
}
.right {
position: absolute;
right: 0.5rem;
.iconfont {
color: #666;
font-size: 0.6rem;
}
}
}
}
}
</style>
/**********************************************/
/* src/page/search/search.vue */
/**********************************************/
<template>
<div>
<!-- head -->
<head-top :toggleBtn="false">
<div slot="head_input" class="search">
<div class="search_content">
<i class="iconfont icon-search"></i><input placeholder="搜索" value="" />
</div>
</div>
<span slot='head_btn' class="head_btn" @click="returnBack">取消</span>
</head-top>
<!-- main -->
<div class="main_wrapper">
<div class="container" :style="'height:'+wHeight+'px;'">
<div class="recent">
<router-link to="/chat" class="item">
<div class="item_image" style="background-image: url(http://img.pingan.fusio.com.cn/materials/pic/700/20170928180518_0_KcXn.jpg);"></div>
<div class="item_info">
<div class="item_info_head">
<span class="name">万丈-Infinite</span>
<span class="close">x</span>
</div>
</div>
</router-link>
<router-link to="/chat" class="item">
<div class="item_image" style="background-image: url(http://img.pingan.fusio.com.cn/materials/pic/700/20171012184532_0_xTaB.jpg;"></div>
<div class="item_info last">
<div class="item_info_head">
<span class="name">切图者联盟</span>
<span class="close">x</span>
</div>
</div>
</router-link>
</div>
<div class="catg">
<div class="catg_title">
<span>网址导航</span>
</div>
<div class="catg_row">
<router-link to="/more" class="catg_item">
<span>看点</span>
</router-link>
<router-link to="/more" class="catg_item">
<span>好友动态</span>
</router-link>
<router-link to="/more" class="catg_item">
<span>部落</span>
</router-link>
</div>
<div class="catg_row">
<router-link to="/more" class="catg_item">
<span>小说</span>
</router-link>
<router-link to="/more" class="catg_item">
<span>头像</span>
</router-link>
<router-link to="/more" class="catg_item">
<span>热搜榜</span>
</router-link>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import headTop from '@/components/header/head'
export default {
components: {
headTop,
},
data() {
return {
wHeight: 0,
}
},
mounted() {
this.wHeight = document.documentElement.clientHeight || document.body.clientHeight;
},
methods: {
returnBack() {
this.$router.go(-1);
},
}
}
</script>
<style lang="scss" scoped>
.container {
background-color: #fff;
}
.catg {
background-color: #fff;
width: 100%;
display: flex;
flex-direction: column;
margin-bottom: 0.5rem;
.catg_title {
padding: 0.8rem 0.5rem 0.5rem;
color: #999;
font-size: 0.4rem;
text-align: center;
border-top: 1px solid #eee;
}
.catg_row {
width: 100%;
display: flex;
.catg_item {
flex: 1;
display: flex;
text-align: center;
flex-direction: column;
align-items: center;
margin: 0.5rem 0;
span {
display: block;
font-size: 0.6rem;
color: #1890f5;
}
&:nth-child(3n+2) {
border: 1px solid #ccc;
border-width: 0 1px;
}
}
}
}
.item {
display: flex;
flex-basis: 100%;
background-color: #fff;
.item_image {
display: flex;
margin: 0.25rem 0.5rem;
min-width: 1.6rem;
height: 1.6rem;
border-radius: 2rem;
background-size: cover;
background-position: 50%;
background-color: #d2d2d2;
border-bottom: 1px solid transparent;
}
.item_info {
display: flex;
flex-basis: 100%;
flex-direction: column;
padding: 0.25rem 0.5rem 0.25rem 0;
border-bottom: 1px solid #eee;
overflow: hidden;
.item_info_head {
padding-top: 0.3rem;
font-size: 0.5rem;
overflow: hidden;
color: #999;
> .name {
padding-top: 0.4rem;
color: #666;
font-size: 0.6rem;
font-weight: 600;
line-height: 1rem;
}
> .close {
float: right;
color: #999;
font-size: 0.6rem;
line-height: 1rem;
}
}
&.last {
border: none;
}
}
}
</style>
Step24. 权限检查
我们想在进入每个页面的时候，进行权限检查。之前我们已经缓存了用户登录后的token，可以根据token来判断是否登录。同时，配合路由白名单过滤掉那些不需要登录即可访问的页面。
我们修改src/main.js即可实现权限检查，代码如下：
/**********************************************/
/* 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
// 不重定向白名单
const whiteList = ['/login', '/signup', '/forget', '/authredirect'];
// 权限检查
router.beforeEach((to, from, next) => {
document.title = (to.name || '') + ' - vue wap demo';
next();
if (store.getters.token) {
if (to.path === '/login') {
next({
path: '/messages'
});
} else {
next();
}
} else {
if (whiteList.indexOf(to.path) !== -1) {
next()
} else {
next('/login')
}
}
});
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App }
})
更进一步的检查是“角色检查”，是否有查看某页面的权限，此项目略，请自己尝试。
Step25. 页面切换动画transition
实现页面切换的动画效果，我们只要修改App.vue即可，代码如下：
/**********************************************/
/* src/App.vue */
/**********************************************/
<template>
<div id="app">
<transition name="router-fade" mode="out-in">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
</transition>
<transition name="router-fade" mode="out-in">
<router-view v-if="!$route.meta.keepAlive"></router-view>
</transition>
<!--所有用到的svg可以丢这里-->
<svg-icon></svg-icon>
</div>
</template>
<script>
import svgIcon from '@/components/common/svg'
export default {
name: 'app',
components: {
svgIcon
},
}
</script>
<style lang="scss">
.router-fade-enter-active,
.router-fade-leave-active {
transition: opacity 0.5s;
}
.router-fade-enter,
.router-fade-leave-to {
opacity: 0;
}
</style>
目前这样添加代码，只有从login页面登录成功，跳入messages页面的时候才有过渡动画。
如果你还需要在每个页面之间有动画效果，需要在Layout.vue的代码中作类似处理，可以尝试一下。
Step26. 轮播展示
源码中已包含，稍后更新...
Step27. 分享功能
源码中已包含，稍后更新...
Step28. ...
正在更新..
4.项目部署
项目部署，实际是部署一个静态网站，打包生成的dist文件夹就是静态网站的所有文件。现在，就来看一下如何部署。
a）本地部署
本地的话，就直接使用【MAMP】这个软件吧，按步骤一步步安装之后，运行起来基本就可以用了，不需要配置什么。
在“Hosts”那边新增一个Server Name，右边唯一注意的就是把Name resolution的via Xip.io(LAN only)勾选上，这样你就看到下面输入框有个访问地址。在Document root选择你指向的dist文件夹路径(打包文生成的那个)。运行访问就OK了。
MAMP本地运行.png
（在Mac，可以直接利用apache搭建一个的服务器，只要在Users/yourname/Sites这个目录下的静态网站，都可以直接访问，具体搭建可以查询类似“在Mac上搭建本地Apache服务器”）
b）服务器部署
另外一种方式，就是找一个服务器进行部署了，比如亚马逊云、阿里云、腾讯云等。我只是玩过ubuntu和centOS，它们在安装nginx后的路径、配置文件的路径有些不一样，只要找对了位置进行配置就好了。
先把部署文件夹dist丢上服务器，之后再配置nginx的时候指向这个路径就行了。可以通过专门建一个放dist部署文件夹的git项目，这样方便部署更新。
先看下centOS服务器的：
# centOS上面的安装配置大概就这几行
# 遇到权限问题切换admin安装，也可以谷歌查询解决方案
1、安装nodeJS
curl --silent --location https://rpm.nodesource.com/setup_6.x | bash -
yum -y install nodejs
2、安装nginx
sudo yum install epel-release
sudo yum install nginx
vi /etc/nginx/nginx.conf //编辑配置文件
sudo /etc/init.d/nginx start //启动
sudo /etc/init.d/nginx restart //重启
sudo /etc/init.d/nginx stop //停止
3、配置文件内容
# 修改server那一块就好了
server {
listen 80;
server_name www.ma.h.fusio.net.cn;
index index.html;
root /data/web/apps/ma_front_dev/my-vue-demo-dist/dist; // 这一行可以测试下不写
location / {
root /data/web/apps/ma_front_dev/my-vue-demo-dist/dist;
try_files $uri $uri/ /index.html =404;
}
}
下面则是ubuntu服务器的：
# ubuntu上面的安装配置大概就这几行
# 应该比centOS遇到的问题少一点
1、安装nodeJS
curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs
sudo apt-get install -y build-essential
2、安装nginx
sudo apt-get update
sudo apt-get install nginx
sudo vi /etc/nginx/sites-available/default //编辑配置文件
sudo /etc/init.d/nginx start //启动
sudo /etc/init.d/nginx restart //重启
sudo /etc/init.d/nginx stop //停止
3、配置文件内容
（同上）
5.后续
继续补全一些功能，思考中...
写的仓促，可能有些错误，请留言指正...
学习是一条漫漫长路，每天不求一大步，进步一点点就是好的。
网友评论