vue簡介

Vue.js（讀音 /vjuː/, 類似于 view） 是一套構(gòu)建用戶界面的漸進式框架。
Vue 只關(guān)注視圖層， 采用自底向上增量開發(fā)的設計。
Vue 的目標是通過盡可能簡單的 API 實現(xiàn)響應的數(shù)據(jù)綁定和組合的視圖組件。
Vue 學習起來非常簡單，本教程基于 Vue 2.1.8 版本測試。

概述

這是一個16年9月份找的開源項目源代碼，結(jié)合自己的實際情況進行的修改項目，以后內(nèi)容將會有很大的不同，項目的目標是向QQ看齊

頁面效果展示

免責聲明

本項目為開源項目，如有類同，純屬巧合。

項目已實現(xiàn)功能

側(cè)邊欄
聯(lián)系頁面
動態(tài)頁面
信息列表
搜索好友
對話頁面
信息列表左右滑動

新增加功能

怎加了信息獵豹的刪除，
標記可讀，
置頂

存在問題

刪除事件，置頂事件和標記事件的觸發(fā)區(qū)域發(fā)生了位移，正在排查原因，歡迎各位指教

注：項目的開發(fā)注意事項，填坑，以及技術(shù)棧等相關(guān)文章請訪問我的掘金個人主頁

桌面及移動端測試

• 桌面測試： npm run dev 后，打開 開發(fā)者工具 F12 ，模擬手機預覽 Ctrl+Shift+M (Chrome)
• 移動端測試： npm run dev 后，在cmd命令行中輸入ipconfig（win）獲取到局域網(wǎng)內(nèi)ip地址

技術(shù)棧

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

目錄結(jié)構(gòu)

├── README.md ├── build         // 構(gòu)建服務和webpack配置 ├── config        // 項目不同環(huán)境的配置 ├── dist         // 項目build目錄 ├── index.html      // 項目入口文件 ├── package.json     // 項目配置文件 ├── mockdata.json     // 項目偽數(shù)據(jù)（模擬數(shù)據(jù)） ├── src │  ├── common      // 公用的css樣式 |  ├── components    // 各種組件 │  ├── router      // 存放路由的文件夾 │  ├── vuex       // 存放Vuex的相關(guān) │  ├── muse-ui.config.js // muse-ui單組件加載配置 │  ├── App.Vue      // 模板文件入口 │  └── main.js      // Webpack 預編譯入口 ├── static        // css js 和圖片資源# 安裝 npm install # 運行（端口8888） npm run dev # 發(fā)布 npm run build

這個是我在github上找的一個開源項目改的代碼用來練手，提高vue的開發(fā)能力的的demo

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

總結(jié)

以上所述是小編給大家介紹的Vue仿手機qq的實例代碼(demo)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！