快捷導(dǎo)航

Vue仿手機(jī)qq的實(shí)例代碼(demo)

更新時間：2017年09月08日 09:47:28 投稿：mrr

Vue.js（讀音 /vjuː/, 類似于 view）是一套構(gòu)建用戶界面的漸進(jìn)式框架。這篇文章給大家介紹Vue仿手機(jī)qq的實(shí)例代碼，需要的的朋友參考下吧

vue簡介

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

概述

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

頁面效果展示

免責(zé)聲明

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

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

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

新增加功能

怎加了信息獵豹的刪除，
標(biāo)記可讀，
置頂

存在問題

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

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

桌面及移動端測試

桌面測試： npm run dev 后，打開開發(fā)者工具 F12 ，模擬手機(jī)預(yù)覽 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)建服務(wù)和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 預(yù)編譯入口
 ├── static        // css js 和圖片資源
# 安裝
 npm install
 # 運(yùn)行（端口8888）
 npm run dev
 # 發(fā)布
 npm run build

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

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

總結(jié)

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

您可能感興趣的文章: