vue-仿手機qq的demo

源自世界發表於2017-09-07
Vue

概述

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

相關文章