目錄

• 前言
• gulishop-client---vue2
• 項目目錄
• 分頁器

前言

重溫Vue，打開之前的項目文件夾，陌生又熟悉…

3月份左右看的項目視頻，現在已經忘得差不多了…甚至記不清自己是看的哪個視頻…剛剛才想起來自己并沒有看Vue的視頻教程，當初直接看的項目視頻，不得不說，我真猛(bushi
b站視頻👉尚硅谷VUE項目實戰，前端項目-尚品匯(大型\重磅)
b站視頻👉尚硅谷Vue2.0+Vue3.0全套教程丨vuejs從入門到精通
甚至忘了怎么啟動項目：
👇
在src目錄下打開終端：
yarn install
yarn serve

gulishop-client—vue2

四五個月前看的，只在筆記本上做了一些筆記，也沒有跟著寫一遍，現在已經忘得七七八八了…

項目目錄

node_modules：項目依賴文件夾
public：一般放置一些靜態資源（圖片），放在public文件夾中的靜態資源，webpack進行打包時會原封不動打包到dist文件夾中。
babel.config.js
jsconfig.json
package-lock.json
package.json
vue.config.js
這里有個問題：public、assets、static在用webpack打包時的區別
Vue處理靜態資源及public/static/assets目錄的區別

分頁器

分頁器展示，需要知道哪些數據：

pageNo： 當前頁碼

pageSize： 每一頁展示幾條數據

total： 數據總條數

continues： 連續頁碼數（一般為5或7—奇數，因為對稱，好看）

父組件App.vue傳給子組件MyPagination.vue的參數：

<MyPagination :currentPageNo="8" :total="87" :pageSize="3" :continueNo="5"/>

分頁器動態展示，分為上中下三部分：
v-for不僅可以遍歷數組，還可以遍歷數字

<div class="pagination">這里是分頁器<br><br><br><h1>{{startEnd}}-----{{currentPageNo}}</h1><!-- 當當前頁為第一頁時按鈕禁用 --><button :disabled="currentPageNo==1">上一頁</button><button>1</button><button>...</button><!-- 中間部分 --><button v-for="(page,index) in startEnd.end" :key="index">{{page}}</button><!-- <button>4</button><button>5</button><button>6</button><button>7</button> --><button>...</button><button>9</button><!-- 總頁碼數，即最后一頁 --><button>{{totalPageNo}}</button><!-- 當當前頁為最后一頁時按鈕禁用 --><button :disabled="currentPageNo==totalPageNo">下一頁</button><button>共{{total}}條數據</button></div>

此時效果：

利用v-if隱藏元素，這里有個問題，v-for和v-if不能同時用，但是只報錯，能正常運行。

分頁器效果做好后，要往里面傳數據了，因為是根據尚硅谷的項目寫的，它用的是搜索頁面的分頁器，所以又去變了一遍search模塊
search模塊開發：

拆分出靜態組件

發請求（API）

vuex(三連環)

組件獲取倉庫數據，動態展示數據
注意這里有個問題要注意：

store文件夾下必須有個index.js文件

總結

以上是生活随笔為你收集整理的前端项目-尚品会-来自b站尚硅谷视频的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。