快捷導(dǎo)航

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

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

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

vue簡(jiǎn)介

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

概述

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

頁(yè)面效果展示

免責(zé)聲明

本項(xiàng)目為開(kāi)源項(xiàng)目，如有類同，純屬巧合。

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

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

新增加功能

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

存在問(wèn)題

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

注：項(xiàng)目的開(kāi)發(fā)注意事項(xiàng)，填坑，以及技術(shù)棧等相關(guān)文章請(qǐng)?jiān)L問(wèn)我的掘金個(gè)人主頁(yè)

桌面及移動(dòng)端測(cè)試

桌面測(cè)試： npm run dev 后，打開(kāi) 開(kāi)發(fā)者工具 F12 ，模擬手機(jī)預(yù)覽 Ctrl+Shift+M (Chrome)
移動(dòng)端測(cè)試： 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        // 項(xiàng)目不同環(huán)境的配置
 ├── dist         // 項(xiàng)目build目錄
 ├── index.html      // 項(xiàng)目入口文件
 ├── package.json     // 項(xiàng)目配置文件
 ├── mockdata.json     // 項(xiàng)目偽數(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

這個(gè)是我在github上找的一個(gè)開(kāi)源項(xiàng)目改的代碼用來(lái)練手，提高vue的開(kāi)發(fā)能力的的demo

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

總結(jié)

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

您可能感興趣的文章: