para培訓——vue前端demo README

說明

基於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的排版問題,還是要慢慢學習。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章