Vue教程--Wap端项目搭建从0到1(详解2)

本文基于工作项目开发,做的整理笔记
前段时间公司有的小伙伴刚开始学习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.后续

Step15. 完善login页面(fetch请求数据)

更新一下login页面,代码如下:

/**********************************************/
/* src/page/login/login.vue                   */
/**********************************************/






代码中,我们引用了src/service/getData.js文件,它是一个接口服务文件。我们现在创建,在src文件夹下创建service文件夹,及getData.js文件,代码如下:

/**********************************************/
/* src/service/getData.js                     */
/**********************************************/

import fetch from '../utils/fetch';

/**
 * 账号密码登录
 */
export const accountLogin = (email, password) => fetch('/loginController/login', { email, password }, 'POST');

接着我们创建../utils/fetch.js文件,代码如下:

/**********************************************/
/* src/utils/fetch.js                         */
/**********************************************/

import { baseUrl } from '../../config/dev.env';

export default async(url = '', data = {}, type = 'GET', method = 'fetch') => {
    type = type.toUpperCase();
    url = baseUrl + url;
    if (type == 'GET') {
        let dataStr = ''; //数据拼接字符串
        Object.keys(data).forEach(key => {
            dataStr += key + '=' + data[key] + '&';
        });
        if (dataStr !== '') {
            dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
            url = url + '?' + dataStr;
        }
    }

    if (window.fetch && method == 'fetch') {
        let requestConfig = {
            method: type,
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            },
            cache: "force-cache"
        }
        if (type == 'POST') {
            var params = "";

            // 'Content-Type': 'application/json; charset=utf-8'
            // Json串  JSON.stringify(data)
            // params = JSON.stringify(data);

            // 'Content-Type': 'multipart/form-data'
            // formData拼接
            // var formData = new FormData();
            // for (var name in data) {
            //     formData.append(name, data[name]);
            // }

            // 'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
            // 字符串拼接  "email=aaa&password=xxxxx"
            Object.keys(data).forEach(key => {
                params += key + '=' + data[key] + '&';
            });
            if (params !== '') {
                params = params.substr(0, params.lastIndexOf('&'));
            }

            Object.defineProperty(requestConfig, 'body', {
                value: params
            });
        }

        try {
            const response = await fetch(url, requestConfig);
            const responseJson = await response.json();
            return responseJson
        } catch (error) {
            throw new Error(error)
        }

    } else {
        // 非fetch
        return new Promise((resolve, reject) => {
            let requestObj;
            if (window.XMLHttpRequest) {
                requestObj = new XMLHttpRequest();
            } else {
                requestObj = new ActiveXObject;
            }
            let sendData = '';
            if (type == 'POST') {
                // Json串
                // sendData = JSON.stringify(data);

                // 字符串拼接
                Object.keys(data).forEach(key => {
                    sendData += key + '=' + data[key] + '&';
                });
                if (sendData !== '') {
                    sendData = sendData.substr(0, sendData.lastIndexOf('&'));
                }
            }
            requestObj.open(type, url, true);
            requestObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            requestObj.send(sendData);
            requestObj.onreadystatechange = () => {
                if (requestObj.readyState == 4) {
                    if (requestObj.status == 200) {
                        let obj = requestObj.response
                        if (typeof obj !== 'object') {
                            obj = JSON.parse(obj);
                        }
                        resolve(obj)
                    } else {
                        reject(requestObj)
                    }
                }
            }
        })
    }
}

config/dev.env.js文件中添加一个项目配置变量baseUrl,代码如下:

/**********************************************/
/* config/dev.env.js                          */
/**********************************************/

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
    NODE_ENV: '"development"',
    baseUrl: 'http://52.80.21.233:8040'
})

那么这个请求我们就做好了,试一试请求是否成功。

注意:这是一个这个项目demo中唯一的真实数据请求接口,其他类似请求如果要使用真实接口可参考这里。

Step16. 合理引入svg

login页面的代码里,我们放置了一大段svg绘制代码,不是很好,如果其他页面要用,可能还拿不到。这里,我们更好的是将整站的svg抽离成一个组件。

src/components/common中添加svg.vue,代码如下:

/**********************************************/
/* src/components/common/svg.vue              */
/**********************************************/






修改App.vue,将它引入,代码如下:

/**********************************************/
/* src/App.vue                                */
/**********************************************/






接着,去掉login页面那一段绘制代码,也能看到效果的。

Step17. 用axios实现请求(取代原生fetch)

有人可能说原生fetch对浏览器的支持情况不太好,可否换一个呢?那么我也可以用axios去实现请求。

src/utils中添加axios.js文件,代码如下:

/****************************************** */
/*  src/utils/axios.js                      */
/****************************************** */

import axios from 'axios';
import store from '../store';
import { baseUrl } from '../../config/dev.env';

export default (url = '', data = {}, type = 'GET', method = 'fetch') => {
    return new Promise((resolve, reject) => {
        const instance = axios.create({
            baseURL: baseUrl,
            timeout: 20000 //,
                //headers: { 'authToken': store.getters.token }  //如果后台请求都需要携带的话
        });
        instance({
                url: url,
                method: type,
                params: data
            })
            .then(response => {
                const res = response.data;
                // 50001:token已过期
                // 50002:token非法
                if (res.retCode === "50001" || res.retCode === "50002") {
                    router.push({ path: '/login' })
                    reject(res);
                }
                resolve(res);
            })
            .catch(error => {
                router.push({ path: '/404', query: { error: error } });
                reject(error);
            });
    });
}

当然,要使用这种方式的话,我们还要安装axios模块,执行:

$ npm install axios --save

修改src/service/getData.js文件,使用axios进行请求,代码如下:

/****************************************** */
/*  src/service/getData.js                  */
/****************************************** */

// import fetch from '../utils/fetch';
import fetch from '../utils/axios';

/**
 * 账号密码登录
 */
export const accountLogin = (email, password) => fetch('/loginController/login', { email, password }, 'POST');

Step18. 登录状态存入仓库

修改一下login页面的代码,代码如下

/****************************************** */
/*  src/page/login/login.vue                */
/****************************************** */

          // 其他地方不改
          ...
          // 缓存用户数据
          let email = response.data.adminInfo.email;
          let token = response.data.tokenModel.token;
          this.$store.commit('SET_AUTH_INFO',[
            {
              email: email,
              token: token
            }
          ]);
         ...

需要在store的相关文件,添加SET_AUTH_INFO事件,修改如下:

/****************************************** */
/*  src/store/modules/user.js               */
/****************************************** */

import Cookies from 'js-cookie';

const app = {
    state: {
        email: '',
        token: localStorage.getItem('token')
    },
    mutations: {
        SET_AUTH_INFO: (state, info) => {
            state.email = info.email;
            state.token = info.token;
            localStorage.token = info.token;
        },
    },
    actions: {

    }
};

export default app;
/****************************************** */
/*  src/store/getters.js                    */
/****************************************** */

const getters = {
    token: state => state.user.token,
    email: state => state.user.email,
    sidebar: state => state.app.sidebar,
    scroll: state => state.app.scroll,
    messages: state => state.common.messages,
    contacts: state => state.common.contacts,
};

export default getters
/****************************************** */
/*  src/store/index.js                    */
/****************************************** */

import Vue from 'vue';
import Vuex from 'vuex';
import user from './modules/user';
import app from './modules/app';
import getters from './getters';

Vue.use(Vuex);

const store = new Vuex.Store({
    modules: {
        user,
        app
    },
    getters
});

export default store

测试一下,查看是否正确。

Step19. 滚动加载更多(组件)

因为messages页面需要用到“滚动加载更多”这个功能,我们先看一下。

src/components/common中添加mixin.js,里面的loadMore代码如下:

/****************************************** */
/*  src/components/common/mixin.js          */
/****************************************** */

import { getStyle } from '../../utils/utils'

export const loadMore = {
    directives: {
        'load-more': {
            bind: (el, binding) => {
                let windowHeight = window.screen.height;
                let height;
                let setTop;
                let paddingBottom;
                let marginBottom;
                let requestFram;
                let oldScrollTop;
                let scrollEl;
                let heightEl;
                let scrollType = el.attributes.type && el.attributes.type.value;
                let scrollReduce = 2;
                if (scrollType == 2) {
                    scrollEl = el;
                    heightEl = el.children[0];
                } else {
                    scrollEl = document.body;
                    heightEl = el;
                }

                el.addEventListener('touchstart', () => {
                    height = heightEl.clientHeight;
                    if (scrollType == 2) {
                        height = height
                    }
                    setTop = el.offsetTop;
                    paddingBottom = getStyle(el, 'paddingBottom');
                    marginBottom = getStyle(el, 'marginBottom');
                }, false)

                el.addEventListener('touchmove', () => {
                    loadMore();
                }, false)

                el.addEventListener('touchend', () => {
                    oldScrollTop = scrollEl.scrollTop;
                    moveEnd();
                }, false)

                const moveEnd = () => {
                    requestFram = requestAnimationFrame(() => {
                        if (scrollEl.scrollTop != oldScrollTop) {
                            oldScrollTop = scrollEl.scrollTop;
                            moveEnd()
                        } else {
                            cancelAnimationFrame(requestFram);
                            height = heightEl.clientHeight;
                            loadMore();
                        }
                    })
                }

                const loadMore = () => {
                    if (scrollEl.scrollTop + windowHeight >= height + setTop + paddingBottom + marginBottom - scrollReduce) {
                        binding.value();
                    }
                }
            }
        }
    }
};

它引入了src/utils/utils.js文件的getStyle方法,我们现在添加一下,代码如下:

/****************************************** */
/*  src/utils/utils.js                      */
/****************************************** */

/**
 * 获取style样式
 */
export const getStyle = (element, attr, NumberMode = 'int') => {
  let target;
  // scrollTop 获取方式不同,没有它不属于style,而且只有document.body才能用
  if (attr === 'scrollTop') {
    target = element.scrollTop;
  } else if (element.currentStyle) {
    target = element.currentStyle[attr];
  } else {
    target = document.defaultView.getComputedStyle(element, null)[attr];
  }
  //在获取 opactiy 时需要获取小数 parseFloat
  return NumberMode == 'float' ? parseFloat(target) : parseInt(target);
}

/**
 * 滚动到指定位置
 */
export const scrollPosition = scroll => {
  let top = scroll[location.pathname];
  if (top != undefined) {
    setTimeout(function() {
      document.documentElement.scrollTop = top;
      document.body.scrollTop = top;
    }, 100);
  }
}

其中,scrollPosition方法为下面“回到指定位置”功能所需,我们先加着。

“滚动加载更多”的具体使用,稍后见“完善消息列表页面”部分内容。

Step20. 回到指定位置(组件)

我们先思考一下这个功能的核心问题,第1个就是页面离开前要保存滚动位置,第2个就是回到页面滚到指定位置。

针对第1个问题,我们可以监听滚动时间,实时保存这个值。这种较为容易实现。针对第2个问题就无需讨论。

Layout页面下,添加滚动监听,如下:

/**********************************************/
/* src/components/Layout.vue                  */
/**********************************************/

...
   // 仅插入这段代码即可
   mounted() {
      window.onscroll = () => {
        this.$store.dispatch('SetScroll');
      };
    }
...

修改src/store/modules/app.js,添加SetScroll相关代码,如下:

/**********************************************/
/* src/store/modules/app.js                   */
/**********************************************/

import Cookies from 'js-cookie';

const app = {
    state: {
        sidebar: !+Cookies.get('sidebarStatus'),
        scroll: {},
    },
    mutations: {
        TOGGLE_SIDEBAR: state => {
            if (state.sidebar) {
                Cookies.set('sidebarStatus', 1);
            } else {
                Cookies.set('sidebarStatus', 0);
            }
            state.sidebar = !state.sidebar;
        },
        SET_SCROLL: (state, data) => {
            state.scroll[data.name] = data.top;
        }
    },
    actions: {
        ToggleSideBar: ({ commit }) => {
            commit('TOGGLE_SIDEBAR')
        },
        SetScroll: ({ commit, state }) => {
            let nameValue = location.pathname;
            let topValue = document.documentElement.scrollTop || document.body.scrollTop;
            commit('SET_SCROLL', { name: nameValue, top: topValue });
        },
    }
};

export default app;
/**********************************************/
/* src/store/getters.js                       */
/**********************************************/

const getters = {
    token: state => state.user.token,
    email: state => state.user.email,
    sidebar: state => state.app.sidebar,
    scroll: state => state.app.scroll
};

export default getters

当我们在某个页面需要实现这样的功能时,在该页面插入代码:

    import {scrollPosition} from '@/config/utils'
    ...
    mounted(){
      // 滚动到上一次位置
      scrollPosition(this.$store.getters.scroll);
    },
    ...

具体使用,可以看下面“完善消息列表页面”内容。

Step21. 完善消息列表页面

修改messages页面代码,如下:

/**********************************************/
/* src/page/messages/messages.vue             */
/**********************************************/






这个页面的列表,我们使用了的仓库存储,所以我们还要更新一下src/store/modules/common.js文件,代码如下:

/**********************************************/
/* src/store/modules/common.js             */
/**********************************************/

const common = {
    state: {
        messages: [],
        contacts: []
    },
    mutations: {
        GET_MESSAGES_LIST: (state, list) => {
            state.messages = [...state.messages, ...list];
        },
        GET_CONTACTS_LIST: (state, list) => {
            state.contacts = [...state.contacts, ...list];
        },
    },
    actions: {
        // 获取消息列表
        GetMessagesList({ commit, state }) {
            let list = [{
                    image: "http://img.pingan.fusio.com.cn/materials/pic/700/20170928180518_0_KcXn.jpg",
                    name: "万丈-Infinite",
                    time: "上午11:47",
                    type: "",
                    content: "+1"
                },
                {
                    image: "http://img.pingan.fusio.com.cn/materials/pic/700/20171012184532_0_xTaB.jpg",
                    name: "切图者联盟",
                    time: "上午11:47",
                    type: "",
                    content: "dav:世界上最可怕的不是孤独终老,而是跟那个使你孤独的人终老。"
                },
                {
                    image: "http://img.pingan.fusio.com.cn/materials/pic/700/20170928180152_0_ldsQ.jpg",
                    name: "群助手",
                    time: "上午11:40",
                    type: "[6个群有新消息]",
                    content: ""
                },
                {
                    image: "http://img.pingan.fusio.com.cn/materials/pic/700/20170920181437_0_YqPR.jpg",
                    name: "VR实验室",
                    time: "上午11:38",
                    type: "",
                    content: "收到"
                },
                {
                    image: "http://img.pingan.fusio.com.cn/materials/pic/700/20170920181200_0_czDQ.jpg",
                    name: "我的电脑",
                    time: "上午11:36",
                    type: "",
                    content: "[图片]IMG_8724.PNG"
                },
                {
                    image: "http://img.pingan.fusio.com.cn/materials/pic/700/20170919182858_0_5sfc.jpg",
                    name: "QQ看点",
                    time: "上午11:30",
                    type: "",
                    content: "健身最女王:除了彭于晏,也就他的身材让女人着迷!"
                },
                {
                    image: "http://img.pingan.fusio.com.cn/materials/pic/ori/20171022233804_0_0QNg.jpg",
                    name: "D3.js",
                    time: "上午11:30",
                    type: "",
                    content: "w 加入本群"
                },
                {
                    image: "http://img.pingan.fusio.com.cn/materials/pic/700/20170919182002_0_teEG.jpg",
                    name: "购物号",
                    time: "上午11:27",
                    type: "[新消息]",
                    content: "蘑菇街每日精选:秋冬好货双十一,全场49元封顶!"
                },
                {
                    image: "http://img.pingan.fusio.com.cn/materials/pic/ori/20171012183756_0_i4am.jpg",
                    name: "夕阳",
                    time: "上午11:20",
                    type: "",
                    content: "知道"
                },
                {
                    image: "http://img.pingan.fusio.com.cn/materials/pic/ori/20171012183530_0_CyI7.jpg",
                    name: "小红帽",
                    time: "上午11:19",
                    type: "",
                    content: "就这样处理吧"
                },
                {
                    image: "http://img.pingan.fusio.com.cn/materials/pic/300/20170929190950_0_THbY.jpg",
                    name: "京东商城",
                    time: "上午11:17",
                    type: "[新消息]",
                    content: "京东每日精选:好货双十一,全场99元封顶!"
                }
            ];
            commit('GET_MESSAGES_LIST', list);
        },
        // 获取联系人列表
        GetContactsList({ commit, state }) {
            let list = [{
                    name: "特别关心",
                    online: 2,
                    total: 2,
                    closed: true,
                    list: [{
                            image: "http://img.pingan.fusio.com.cn/materials/pic/700/20170928180518_0_KcXn.jpg",
                            name: "万丈-Infinite",
                            time: "上午11:47",
                            type: "",
                            content: "+1"
                        },
                        {
                            image: "http://img.pingan.fusio.com.cn/materials/pic/700/20171012184532_0_xTaB.jpg",
                            name: "切图者联盟",
                            time: "上午11:47",
                            type: "",
                            content: "dav:世界上最可怕的不是孤独终老,而是跟那个使你孤独的人终老。"
                        },
                        {
                            image: "http://img.pingan.fusio.com.cn/materials/pic/700/20170928180152_0_ldsQ.jpg",
                            name: "群助手",
                            time: "上午11:40",
                            type: "[6个群有新消息]",
                            content: ""
                        },
                        {
                            image: "http://img.pingan.fusio.com.cn/materials/pic/700/20170920181437_0_YqPR.jpg",
                            name: "VR实验室",
                            time: "上午11:38",
                            type: "",
                            content: "收到"
                        },
                        {
                            image: "http://img.pingan.fusio.com.cn/materials/pic/700/20170920181200_0_czDQ.jpg",
                            name: "我的电脑",
                            time: "上午11:36",
                            type: "",
                            content: "[图片]IMG_8724.PNG"
                        },
                        {
                            image: "http://img.pingan.fusio.com.cn/materials/pic/700/20170919182858_0_5sfc.jpg",
                            name: "QQ看点",
                            time: "上午11:30",
                            type: "",
                            content: "健身最女王:除了彭于晏,也就他的身材让女人着迷!"
                        },
                        {
                            image: "http://img.pingan.fusio.com.cn/materials/pic/ori/20171022233804_0_0QNg.jpg",
                            name: "D3.js",
                            time: "上午11:30",
                            type: "",
                            content: "w 加入本群"
                        },
                        {
                            image: "http://img.pingan.fusio.com.cn/materials/pic/700/20170919182002_0_teEG.jpg",
                            name: "购物号",
                            time: "上午11:27",
                            type: "[新消息]",
                            content: "蘑菇街每日精选:秋冬好货双十一,全场49元封顶!"
                        },
                        {
                            image: "http://img.pingan.fusio.com.cn/materials/pic/ori/20171012183756_0_i4am.jpg",
                            name: "夕阳",
                            time: "上午11:20",
                            type: "",
                            content: "知道"
                        },
                        {
                            image: "http://img.pingan.fusio.com.cn/materials/pic/ori/20171012183530_0_CyI7.jpg",
                            name: "小红帽",
                            time: "上午11:19",
                            type: "",
                            content: "就这样处理吧"
                        },
                        {
                            image: "http://img.pingan.fusio.com.cn/materials/pic/300/20170929190950_0_THbY.jpg",
                            name: "京东商城",
                            time: "上午11:17",
                            type: "[新消息]",
                            content: "京东每日精选:好货双十一,全场99元封顶!"
                        }
                    ]
                },
                {
                    name: "我的好友",
                    online: 23,
                    total: 56,
                    closed: true,
                    list: [{
                            image: "http://img.pingan.fusio.com.cn/materials/pic/700/20170928180518_0_KcXn.jpg",
                            name: "万丈-Infinite",
                            time: "上午11:47",
                            type: "",
                            content: "+1"
                        },
                        {
                            image: "http://img.pingan.fusio.com.cn/materials/pic/700/20171012184532_0_xTaB.jpg",
                            name: "切图者联盟",
                            time: "上午11:47",
                            type: "",
                            content: "dav:世界上最可怕的不是孤独终老,而是跟那个使你孤独的人终老。"
                        },
                        {
                            image: "http://img.pingan.fusio.com.cn/materials/pic/700/20170928180152_0_ldsQ.jpg",
                            name: "群助手",
                            time: "上午11:40",
                            type: "[6个群有新消息]",
                            content: ""
                        },
                        {
                            image: "http://img.pingan.fusio.com.cn/materials/pic/700/20170920181437_0_YqPR.jpg",
                            name: "VR实验室",
                            time: "上午11:38",
                            type: "",
                            content: "收到"
                        },
                        {
                            image: "http://img.pingan.fusio.com.cn/materials/pic/700/20170920181200_0_czDQ.jpg",
                            name: "我的电脑",
                            time: "上午11:36",
                            type: "",
                            content: "[图片]IMG_8724.PNG"
                        },
                        {
                            image: "http://img.pingan.fusio.com.cn/materials/pic/700/20170919182858_0_5sfc.jpg",
                            name: "QQ看点",
                            time: "上午11:30",
                            type: "",
                            content: "健身最女王:除了彭于晏,也就他的身材让女人着迷!"
                        },
                        {
                            image: "http://img.pingan.fusio.com.cn/materials/pic/ori/20171022233804_0_0QNg.jpg",
                            name: "D3.js",
                            time: "上午11:30",
                            type: "",
                            content: "w 加入本群"
                        },
                        {
                            image: "http://img.pingan.fusio.com.cn/materials/pic/700/20170919182002_0_teEG.jpg",
                            name: "购物号",
                            time: "上午11:27",
                            type: "[新消息]",
                            content: "蘑菇街每日精选:秋冬好货双十一,全场49元封顶!"
                        },
                        {
                            image: "http://img.pingan.fusio.com.cn/materials/pic/ori/20171012183756_0_i4am.jpg",
                            name: "夕阳",
                            time: "上午11:20",
                            type: "",
                            content: "知道"
                        },
                        {
                            image: "http://img.pingan.fusio.com.cn/materials/pic/ori/20171012183530_0_CyI7.jpg",
                            name: "小红帽",
                            time: "上午11:19",
                            type: "",
                            content: "就这样处理吧"
                        },
                        {
                            image: "http://img.pingan.fusio.com.cn/materials/pic/300/20170929190950_0_THbY.jpg",
                            name: "京东商城",
                            time: "上午11:17",
                            type: "[新消息]",
                            content: "京东每日精选:好货双十一,全场99元封顶!"
                        }
                    ]
                },
                {
                    name: "职场工作",
                    online: 123,
                    total: 239,
                    closed: true,
                    list: [{
                            image: "http://img.pingan.fusio.com.cn/materials/pic/700/20170928180518_0_KcXn.jpg",
                            name: "万丈-Infinite",
                            time: "上午11:47",
                            type: "",
                            content: "+1"
                        },
                        {
                            image: "http://img.pingan.fusio.com.cn/materials/pic/700/20171012184532_0_xTaB.jpg",
                            name: "切图者联盟",
                            time: "上午11:47",
                            type: "",
                            content: "dav:世界上最可怕的不是孤独终老,而是跟那个使你孤独的人终老。"
                        },
                        {
                            image: "http://img.pingan.fusio.com.cn/materials/pic/700/20170928180152_0_ldsQ.jpg",
                            name: "群助手",
                            time: "上午11:40",
                            type: "[6个群有新消息]",
                            content: ""
                        },
                        {
                            image: "http://img.pingan.fusio.com.cn/materials/pic/700/20170920181437_0_YqPR.jpg",
                            name: "VR实验室",
                            time: "上午11:38",
                            type: "",
                            content: "收到"
                        },
                        {
                            image: "http://img.pingan.fusio.com.cn/materials/pic/700/20170920181200_0_czDQ.jpg",
                            name: "我的电脑",
                            time: "上午11:36",
                            type: "",
                            content: "[图片]IMG_8724.PNG"
                        },
                        {
                            image: "http://img.pingan.fusio.com.cn/materials/pic/700/20170919182858_0_5sfc.jpg",
                            name: "QQ看点",
                            time: "上午11:30",
                            type: "",
                            content: "健身最女王:除了彭于晏,也就他的身材让女人着迷!"
                        },
                        {
                            image: "http://img.pingan.fusio.com.cn/materials/pic/ori/20171022233804_0_0QNg.jpg",
                            name: "D3.js",
                            time: "上午11:30",
                            type: "",
                            content: "w 加入本群"
                        },
                        {
                            image: "http://img.pingan.fusio.com.cn/materials/pic/700/20170919182002_0_teEG.jpg",
                            name: "购物号",
                            time: "上午11:27",
                            type: "[新消息]",
                            content: "蘑菇街每日精选:秋冬好货双十一,全场49元封顶!"
                        },
                        {
                            image: "http://img.pingan.fusio.com.cn/materials/pic/ori/20171012183756_0_i4am.jpg",
                            name: "夕阳",
                            time: "上午11:20",
                            type: "",
                            content: "知道"
                        },
                        {
                            image: "http://img.pingan.fusio.com.cn/materials/pic/ori/20171012183530_0_CyI7.jpg",
                            name: "小红帽",
                            time: "上午11:19",
                            type: "",
                            content: "就这样处理吧"
                        },
                        {
                            image: "http://img.pingan.fusio.com.cn/materials/pic/300/20170929190950_0_THbY.jpg",
                            name: "京东商城",
                            time: "上午11:17",
                            type: "[新消息]",
                            content: "京东每日精选:好货双十一,全场99元封顶!"
                        }
                    ]
                }
            ];
            commit('GET_CONTACTS_LIST', list);
        },
    }
};

export default common;

上面代码,包含了messages页面和contacts页面的数据。

更新一下src/store/getters.js,代码如下:

/**********************************************/
/* src/store/getters.js                       */
/**********************************************/

const getters = {
    token: state => state.user.token,
    email: state => state.user.email,
    sidebar: state => state.app.sidebar,
    scroll: state => state.app.scroll,
    messages: state => state.common.messages,
    contacts: state => state.common.contacts,
};

export default getters

现在我们可以去看一下messages页面的效果,也试试“滚动加载更多”和“回到指定位置”功能。

Step22. 顶部菜单改造(slot的使用)

在消息列表页面,我们引入header的时候,用了slot功能,这是一个非常有用的功能。详情可以阅读vue的API之slot使用。

我们通过分析几个页面的需求,需要用到几个slot,所以header的代码如下:

/**********************************************/
/* src/components/header/head.vue             */
/**********************************************/






由于文章篇幅限制,请继续阅读Vue教程--Wap端项目搭建从0到1(详解3)。


学习是一条漫漫长路,每天不求一大步,进步一点点就是好的。

你可能感兴趣的:(Vue教程--Wap端项目搭建从0到1(详解2))