vue2全家桶寫的material design風格的cnode社區(qū)

孫吉亮發(fā)布于2019-08-20 18:00 / 1536人閱讀

摘要：社區(qū)項目地址點此查看預覽地址點此查看使用模擬手機查看基于全家桶的風格社區(qū)盡量接近原生的風格，參考了，的客戶端。

vue-md-cnode社區(qū)

項目地址：點此查看
預覽地址：點此查看（使用chrome模擬手機查看）

基于vue全家桶的Material Design風格Cnode社區(qū)

盡量接近原生App的Material Design風格，參考了Google Play，Cnode的Android客戶端。

技術棧

vue2 + vue-router2 + vuex + es6 + webpack + axios + scss + flex + vue-material

描述

單頁面應用：通過vue-router跳轉

狀態(tài)管理：使用vuex實現(xiàn)組件通信，也有一些父子組件使用props通信

MD風格：使用vue-material組件庫來實現(xiàn)高仿原生md風格

icons：使用Google官方的material design icon

markdown編輯器：mavonEditor

無限滾動：vue-mugen-scroll 實現(xiàn)思路是滾動到底部使page加1，然后通過watch監(jiān)聽page的變化，再獲取數(shù)據(jù)通過concat拼接到原列表

移動端適配：在head標簽通過js動態(tài)設置html標簽的font-size，配合sass的自定義函數(shù)，具體可以參考這篇文章，使用方式比如width:100px;可以寫成width:pr(100);

功能

[x] 登錄

[x] 保存登錄

[x] 注銷

[x] 切換分類

[x] 主題列表

[x] 主題詳情

[x] 滾動加載

[x] 發(fā)帖

[x] 回復

[ ] 回復某人

[x] 收藏

[x] 點贊

[x] 個人中心

[x] 消息

[ ] 消息已讀

[x] 移動端適配

[x] 小尾巴

部分截圖

GPU云服務器云服務器 material-design material-design-lite cnode php寫的接口

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83996.html

2017-07-15 前端日報

摘要：前端日報精選從設計到源碼用強類型語言增強通過一個場景實例了解前端處理大數(shù)據(jù)的無限可能專題之從零實現(xiàn)的表單驗證第一部分使用和技巧對表單進行約束驗證中文譯即將到來的正則表達式新特性掘金個快速編程技巧個人文章周刊第期相信控制像一樣使用 2017-07-15 前端日報精選 Redux從設計到源碼用強類型語言GraphQL增強React通過一個場景實例了解前端處理大數(shù)據(jù)的無限可能JavaSc...

Vicky 2019-08-20 18:01 評論0 收藏0
用vue全家桶寫一個“以假亂真”的網(wǎng)易云音樂

摘要：關于路由，剛開始設計路由的時候想了很多，由于一開始的目標就是網(wǎng)易云音樂的所有內(nèi)容，所以設計了三級路由，，大概這樣，點擊查看。標題略夸張了，但是這個從ui還原上已經(jīng)很接近官方版本了。雖然目前這個是很多人造過的輪子，但是可能每個人的實現(xiàn)方式都不一樣，自己寫一遍也會有許多收獲。項目地址預覽地址 api：ap使用的是一個開源的nodejs封裝的網(wǎng)易云音樂api，地址技術棧 vue...

clasnake 2019-08-20 18:19 評論0 收藏0
較流暢的Vue2版CNode社區(qū)WebApp（附源碼）——歡迎交流反饋

摘要：版社區(qū)假若本項目能給到你一點點幫助，求在線地址掃碼二維碼體驗更佳推薦滿大街的重寫，這個有什么亮點比較接近原生體驗流暢的加載過渡效果舒服細膩的樣式布局合理的列表渲染優(yōu)化為什么還要重寫版的主要是練手，熟悉全家桶超級好用組件庫，做一個最佳實踐案例 Vue2版CNode社區(qū)WebApp 假若本項目能給到你一點點幫助，求Star！ Github：https://github.com/Ryqsky...

yunhao 2019-08-20 14:25 評論0 收藏0