vue-仿手机qq的demo

作者: 缘自世界 | 来源:发表于2017-09-08 19:16 被阅读0次

    概述

    这是一个16年9月份找的开源项目源代码,结合自己的实际情况进行的修改项目,以后内容将会有很大的不同,项目的目标是向QQ看齐

    页面效果展示

    效果展示

    免责声明

    本项目为开源项目,如有类同,纯属巧合。

    项目已实现功能

    侧边栏
    联系页面
    动态页面
    信息列表
    搜索好友
    对话页面
    信息列表左右滑动
    

    新增加功能

    增加了信息列表的删除,
    标记可读,
    置顶
    

    存在问题

    删除事件,置顶事件和标记事件的触发区域发生了位移,正在排查原因,欢迎各位指教
    

    注:项目的开发注意事项,填坑,以及技术栈等相关文章请访问我的掘金个人主页

    桌面及移动端测试

    • 桌面测试: npm run dev 后,打开开发者工具 F12,模拟手机预览 Ctrl+Shift+M (Chrome)
    • 移动端测试: npm run dev 后,在cmd命令行中输入ipconfig(win)获取到局域网内ip地址

    技术栈

    • vue-cli
    • vue2
    • vue-router
    • vuex
    • axios
    • stylus
    • webpack2
    • muse-ui

    目录结构

    <pre>

    ├── README.md
    ├── build // 构建服务和webpack配置
    ├── config // 项目不同环境的配置
    ├── dist // 项目build目录
    ├── index.html // 项目入口文件
    ├── package.json // 项目配置文件
    ├── mockdata.json // 项目伪数据(模拟数据)
    ├── src
    │ ├── common // 公用的css样式
    | ├── components // 各种组件
    │ ├── router // 存放路由的文件夹
    │ ├── vuex // 存放Vuex的相关
    │ ├── muse-ui.config.js // muse-ui单组件加载配置
    │ ├── App.Vue // 模板文件入口
    │ └── main.js // Webpack 预编译入口
    ├── static // css js 和图片资源

    </pre>

      # 安装
      npm install
    
      # 运行(端口8888)
      npm run dev
    
      # 发布
      npm run build
    

    这个是我在github上找的一个开源项目改的代码用来练手,提高vue的开发能力的的demo

    源码地址:github地址 喜欢的话就添加个star吧 !

    相关文章

      网友评论

        本文标题:vue-仿手机qq的demo

        本文链接:https://www.haomeiwen.com/subject/rnsnjxtx.html