用vue寫一個簡單的segmentfault app界面

maxmin 發布于2019-08-20 16:34 / 3222人閱讀

摘要：看也看了不少時間了，只是一直沒動過手寫過項目，這兩天正好閑著，就用練手寫了個簡單的的界面，功能上實現得還比較少，只把最外面一層的路由和數據展示寫了，內層文章頁面和問答之類的暫時還沒弄。數據是靜態的，放在里面。

看vue也看了不少時間了，只是一直沒動過手寫過項目，這兩天正好閑著，就用vue練手寫了個簡單的segmentfault app的界面，功能上實現得還比較少，只把最外面一層的路由和數據展示寫了，內層文章頁面和問答之類的暫時還沒弄。數據是靜態的，放在/program/data.js里面。

這個東西最大的麻煩點是嵌套路由，底部的tab bar和頂部的navigation bar還有中間的展示頁面是層層嵌套的，理解了這個之后其實其它的就不難了。

還有就是transition，沒法做到完全像app里面的那樣，點擊tab bar兩個頁面同時開始透明-顯示或者顯示-透明的轉換，只能是一個頁面動畫進行完了，另一個才開始；而且中間的展示頁面因為是復用組件，復用組件的話好像是不執行動畫？這點我還沒仔細研究文檔。。。太懶了。。。

東西放在github上，地址是vue-segmentfault,里面的segmentfault文件夾上執行

npm install 
npm run dev

即可，最好是在手機模式下瀏覽，直接用ngrok

ngrok http 8080

就能看到地址了，然后手機打開地址就可以了，歡迎提issue和star。

云服務器 GPU云服務器用jsp做一個界面的用python寫界面用html寫登入界面用c語言寫簡單計算器

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

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

應用vue2+vuex+vue-router+webpack2+es6+express+mysql技

摘要：其實這里還是有漏洞的，坐等高手指出來微笑臉后臺沒有用生成一個完整的架構。來自不同視圖的行為需要變更同一狀態。最近對vue很感興趣，趁閑暇時間，模仿了wunderlist里面的部分功能，編寫了前后端分離的基于vue技術棧和express的todolist小項目。寫這篇博文來總結思考下。項目所在github,可以自行參考克隆。本人博客總體概覽整個項目最終做成的樣子如下： showI...

voidking 2019-08-20 16:09 評論0 收藏0
VUE知識點集錦

摘要：載入前后在階段，實例的和都初始化了，但還是掛載之前為虛擬的節點，還未替換。類似于，不同在于提交的是，而不是直接變更狀態可以包含任意異步操作。 vue基礎 1、 router 路由與 a 標簽的區別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理：答：VUE實現雙向數據綁定的原理就是利用了 Object.defineProperty() 這個...

Tecode 2019-08-23 16:02 評論0 收藏0
VUE知識點集錦

摘要：載入前后在階段，實例的和都初始化了，但還是掛載之前為虛擬的節點，還未替換。類似于，不同在于提交的是，而不是直接變更狀態可以包含任意異步操作。 vue基礎 1、 router 路由與 a 標簽的區別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理：答：VUE實現雙向數據綁定的原理就是利用了 Object.defineProperty() 這個...

APICloud 2019-08-02 14:34 評論0 收藏0
vue 2 + vue-router 2 實現SPA

摘要：標簽是展示我們匹配到的組件的區域。其中可以是通過創建的組件構造器，或者，只是一個組件配置對象。縮寫相當于創建和掛載根實例。創建實例及配置，即。參考文獻官方文檔學習筆記構建單頁應用最佳實戰一個完整的應用起手 github項目地址請點這里。使用 Vue.js 時，我們就已經把組件組合成一個應用了，當我們要把 vue-router 加進來，只需要配置組件和路由映射，然后告訴 vue-rou...

OBKoro1 2019-08-20 13:38 評論0 收藏0
2017-06-20 前端日報

摘要：前端日報精選專題之跟著學節流冴羽的博客全家桶仿微信項目，支持多人在線聊天和機器人聊天騰訊前端團隊社區編碼的奧秘模塊實現入門淺析知乎專欄前端每周清單發布新版本提升應用性能的方法中文寇可往吾亦可往用實現對決支付寶的微信企業付款到零 2017-06-20 前端日報精選 JavaScript專題之跟著 underscore 學節流 - 冴羽的JavaScript博客 - SegmentFau...

Galence 2019-08-20 17:23 評論0 收藏0