基於vue2 + muse-ui構建的移動端、PC端輕社區項目 F-Rent 友租

前言

本項目(友租)是基於Vue二、Vuex、Muse-UI、es六、webpack構建的一個移動端、PC端輕社區項目

項目地址GitHub

項目更新歷史

開發環境 Macos + Vs code + Chrome

項目的靈感最初來源：因爲我是一個宅男在杭州沒什麼朋友 加上剛來杭州時想租一個適合本身的房子很難 因此想到作這麼一個輕社區

在作初型時因爲沒有UI設計稿和原型圖，想到一部分作一部分 因此第一版採用了Muse-UI框架先完成大致視圖 後續再逐個進行代碼重寫以及組件開發

此項目雖然說不是什麼複雜有高技術含量的項目，但也是我一個小夢想，因此此項目會長期跟進 進行新功能添加和代碼邏輯重構。

喜歡的能夠「Star」一下，也能夠關注一下此項目。

若是有什麼能夠幫到你的 不管是否是此項目中的問題 均可以在Lessus提出 我會盡我所能幫你解決！?

歡迎大佬們提出好的問題和點子，我會第一時間去修正。?

個人博客地址

項目地址

GitHub

技術棧

• Vue2 GitHub地址
• Vuex GitHub地址
• Vue-router GitHub地址
• axios GitHub地址
• Muse-ui GitHub地址
• Mcok.js GitHub地址
• Vue-lazyload(圖片懶加載組件)GitHub地址
• WebPack GitHub地址
• Es6語法

### 關於在線數據接口
感謝大搜車團隊開放的模擬數據的在線Mock服務：Easy-Mock

演示

Demo地址： Demo (請使用Chrom手機模式預覽)

手機掃一掃下面的二維碼

使用項目

1.克隆項目:        git clone git@github.com:52NineTwo/F-Rent.git
2.安裝依賴:        npm install
3.啓動服務:        npm run dev
4.發佈代碼:        npm run build

功能

• [x] 首頁

  • [x] 列表，上拉加載(完成)
  • [x] 求租列表(待改進)
  • [x] 出租列表(待改進)
  • [x] 閒置列表(待改進)

• [x] 展集(完成)

  • [x] 熱門帖子(完成)
  • [x] 圖集(完成)
  • [x] 每週話題(完成)
• [ ] 詳情頁(未完成)
• [x] 發佈(待改進)

• [ ] 更多

  • [x] 收到的評論(完成)
  • [x] 分類及標籤(完成)
  • [x] 數據排行榜(完成)
  • [x] 發現(未完成)
  • [ ] 更多模塊(等待腦細胞復活)

• [ ] 我的中心(無後臺功能受限)

  • [x] 修改資料(待改進)
  • [x] 關注(完成)
  • [x] 收藏(完成)
  • [x] 點贊(完成)
  • [x] 發佈的帖子(完成)
  • [x] 發佈的評論(完成)
  • [x] 手機綁定(完成)
  • [x] 黑名單(完成)
  • [x] 關鍵詞過濾(完成)
  • [ ] 發佈權限(未完成)

• [x] 登陸註冊(無後臺功能受限)

  • [x] 登陸首頁(完成)
  • [x] 登陸(完成)
  • [x] 註冊(完成)

截圖

移動端

PC端

項目目錄說明

<pre>
├── build // 構建服務和webpack配置
├── config // 項目不一樣環境的配置
├── dist // 項目build目錄
├── index.html // 項目入口文件
├── package.json // 項目配置文件
├── Mock // Mock數據文件
├── src // 生產目錄
│  ├── assets // 圖片資源
│  ├── components // 各類組件
│  ├── page // 頁面
│ │ ├── atlas
│ │ │ ├── index.vue // 圖集
│ │ ├── home
│ │ │ ├── home.vue // 主頁
│ │ ├── more
│ │ │ └── discover.vue // 發現
│ │ │ └── index.vue // 更多 - 主頁
│ │ │ └── information.vue // 收到的評論
│ │ │ └── label.vue // 類別及標籤
│ │ │ └── ranking.vue // 數據排行榜
│ │ ├── others
│ │ │ └── index.vue // 他(她)的信息
│ │ ├── publish
│ │ │ └── index.vue // 發佈
│ │ ├── user
│ │ │ └── blacklist.vue // 黑名單
│ │ │ └── cellphone.vue // 綁定手機
│ │ │ └── discuss.vue // 發佈的評論
│ │ │ └── follow.vue // 我關注的人
│ │ │ └── index.vue // 我的中心 - 主頁
│ │ │ └── keyword.vue // 關鍵詞過濾
│ │ │ └── login.vue // 登陸註冊 - 主頁
│ │ │ └── loginpassword.vue // 登陸註冊 - 登陸
│ │ │ └── modifydata.vue // 修改資料
│ │ │ └── register.vue // 登陸註冊 - 註冊
│ │ │ └── Userissue.vue // 發佈的帖子、點贊、收藏、關注人的話題
│ │ ├── index.vue // 底部四欄
│  ├── router // 路由配置文件
│  ├── vuex // vuex配置文件
│  ├── App.vue // 主頁面
│  └── main.js // Webpack 預編譯入口
</pre>

更新

2017-8-30

首次將此項目代碼更新到GitHub

開發週期: 一週半(晚上飯後到睡前碼)

因爲是初型代碼邏輯以及結構比較亂，已經有下次的更新規劃了。

1.使用Vuex進行登陸狀態驗證.

2.將項目中使用率較高的組件好比地區選擇等封裝成單組件.

3.圖集頁更換新的模塊以及呈現方式.

4.代碼邏輯以及結構優化.

5.隨機圖片源加速

2017-09-07

第二個版本更新(很差意思，最近較忙因此更新較晚)

開發週期: 一週(晚上偶爾空時碼)

1.修復了初型的部分Bug(如我的中心登陸、頁面效果等)

2.優化了登陸、註冊、我的中心交互以及代碼邏輯(很遺憾時間有限仍是沒有引入vuex)

3.大部分頁面加入了toast狀態提示(如加載中、成功、失敗等。。。)

4.更換了隨機Img源(可是因爲不是國內服務器只是CDN嫁接 因此仍是加載會慢一點)

5.添加了Ta的資料(可從發現等入口進入)

下次更新規劃

1.圖集頁改版(應該是第二次更新規劃中，可是腦子裏只是有了初稿)

2.使用Vuex進行登陸狀態等狀態管理

3.添加文章詳情頁

2017-10-08

本次更新了部分PC端(費了大量腦細胞 PC端的交互以及界面容我驕傲一下 哈哈哈哈)
因爲重要的模塊尚未完成因此線上地址並不能預覽，能夠clone項目本地查看 具體路由地址能夠查看路由配置文件

開發週期: 國慶假期一週

1. 因爲同樣使用了Muse-UI框架因此在原項目上繼續開發
2. 暫時只完成了首頁、詳情頁、我的中心頁
3. 關於PC、移動跳轉會選擇使用Vue-Router的路由鉤子來完成
4. 因爲PC端的佈局會有大變化因此這次更新並無太大量