說明
基於Vue3+VueX+nodejs+Element實現的一個仿知乎項目
有四個基本模塊:登錄、TodoList、CardList、專欄
登錄用戶名不爲空,密碼與二次密碼相同即可
數據來源:知乎
功能說明
- 支持添加刪除事件
- 支持事件狀態切換
- 事件的統計與分頁
- card的顯示
- 專欄card的點擊切換功能
- 登錄頁面的簡單效驗
運行步驟
# 克隆到本地
git clone https://github.com/Fmk1998/learn-vue.git
# 進入文件夾
cd learn-vue
# 安裝依賴
npm install 或 yarn(推薦)
# 開啓NodeJs mock本地Json數據
#運行在localhost:8899
node mock/Data.js
或者
nodemon mock/Data.js
# 開啓本地服務器localhost:8080
npm run serve
功能截圖
1.登錄
普通的登錄效驗
2.首頁
cartlist顯示
3.todolist
4.專欄
主要難點
1. 分頁
分頁邏輯想了很長時間,因爲對Element組件不太熟悉,不知道該如何去使分頁組件顯示該有的數據。去網上找到了.sync方法來做交互,雖然解決了一些問題,但還是存在不足。
2. 父子間組件的通信
3. 搜索欄的推薦搜索
4. 本地倉庫事件的增刪改
總結
第一次使用Vue做前端Demo,從一開始的一頭霧水,到中間不斷摸索,發現了許多前端我以前不太會的知識,從中也收穫經驗,還是要感謝老師的幫組,能夠讓我引入一門不錯的技術,這個demo許多地方還是做得不太滿意,比如分頁的邏輯,搜索框,一些card的排版問題,還是要慢慢學習。