欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue仿手机qq的实例代码(demo)

程序员文章站 2022-09-08 13:00:25
vue简介 vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。 vue 只关注视图层, 采用自底向上增量开发的设计。...

vue简介

vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
vue 只关注视图层, 采用自底向上增量开发的设计。
vue 的目标是通过尽可能简单的 api 实现响应的数据绑定和组合的视图组件。
vue 学习起来非常简单,本教程基于 vue 2.1.8 版本测试。

概述

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

页面效果展示

Vue仿手机qq的实例代码(demo)

免责声明

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

项目已实现功能

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

新增加功能

怎加了信息猎豹的删除,
标记可读,
置顶

存在问题

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

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

桌面及移动端测试

  • 桌面测试: 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

目录结构

├── 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 和图片资源
# 安装
 npm install
 # 运行(端口8888)
 npm run dev
 # 发布
 npm run build

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

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

总结

以上所述是小编给大家介绍的vue仿手机qq的实例代码(demo),希望对大家有所帮助