https://github.com/jiangqizheng/vue2-MiniQQ

基于vue2全家桶实现的，仿移动端QQ
https://github.com/jiangqizheng/vue2-MiniQQ

Last synced: 2 months ago
JSON representation

基于vue2全家桶实现的，仿移动端QQ

• Host: GitHub
• URL: https://github.com/jiangqizheng/vue2-MiniQQ
• Owner: jiangqizheng
• Created: 2017-03-23T18:27:28.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2020-12-10T15:05:34.000Z (about 4 years ago)
• Last Synced: 2024-10-29T23:31:02.590Z (2 months ago)
• Language: Vue
• Size: 3.8 MB
• Stars: 718
• Watchers: 46
• Forks: 180
• Open Issues: 8
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-vue - vue2-MiniQQ - MiniQQ?style=social) - 基于Vue2实现的仿手机QQ单页面应用 (Demo示例)
• awesome-github-vue - vue2-MiniQQ - 基于Vue2实现的仿手机QQ单页面应用 (Demo示例)
• awesome-github-vue - vue2-MiniQQ - 基于Vue2实现的仿手机QQ单页面应用 (Demo示例)
• awesome - vue2-MiniQQ - 基于Vue2实现的仿手机QQ单页面应用 (Demo示例)

README

        
# vue-miniQQ————基于Vue2实现的仿手机QQ单页面应用

## 项目状态

已停止更新，仅供参考。初学者直接从 Vue3 开始学习即可。

## 动图预览

gif图好像被压缩的太多了，感兴趣的可以clone后查看。

**侧边栏与个人主页**

![侧边栏与个人主页](./static/images/gif/sidebar.gif)

**滑动组件的动画效果**

![滑动删除](./static/images/gif/swipe.gif)

**进入对话框**

![与聊天机器人进行对话](./static/images/gif/dialog.gif)

**对话框信息**

![搜索功能](./static/images/gif/search.gif)

**首页Tab切换**

![首页Tab切换](./static/images/gif/ui.gif)

***

## 技术栈

*  vue-cli

*  vue2

*  vue-router

*  vuex

*  axios

*  stylus

*  webpack2

*  muse-ui

### 目录


.

├── README.md           

├── build                 // 构建服务和webpack配置,转发聊天机器人以及ajax获取用户数据相关内容

├── 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 和图片资源

│   




## 构建

``` bash

# 安装

npm install

# 运行（端口8888）

npm run dev

# 发布

npm run build

```

## 调试

* 桌面： `npm run dev` 后，打开***开发者工具*** `F12`，模拟手机预览 `Ctrl+Shift+M` (Chrome)

* 移动端： `npm run dev` 后，在cmd命令行中输入ipconfig（win）获取到局域网内ip地址后，生成二维码，然后进行测试（建议微信扫二维码）