vue-仿手機qq的demo

概述

這是一個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

  目錄結構

  ├── 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

源碼地址：github地址 喜歡的話就添加個star吧 ！