淺學VUE實戰｜重寫個人站點

聲明：lz沒有什麼開發經驗，錯誤在所難免，可能說實戰不是很恰當，項目lz是拿來練手的，如果有錯誤或者更好的方案希望指出

前言：

在上一篇中，我們淺淺接觸了vue這一新時代前端框架，lz看着自己雜亂無章的個人站點，萌生了重寫的想法，一方面練手鞏固vue，一方面打發下自己寒假的時間

組件複用：

lz感覺組件Component這個玩意兒是個很好用的東西，很大的提高了代碼的複用性，所以lz在開發前也查看了原先站點的設計，目的是找出相似的地方用組件代替

可以發現三個頁面都有列表，這個列表我們就可以寫一個組件去替代，其次在最後一個頁面可以看到有兩個相同的帶按鈕的輸入欄，這也是我們可以用組件替代的地方

頁面路由：

原來的站點有三個頁面，那就有三個html文件，三個js和三個css，但是我們現在使用vue—router配合打包就可以實現單文件多頁面的操作，很是舒爽

我們先在App.vue根組件中進行vue-router模板的配置，標籤RouterLink，我們使用to屬性，指向不同的路由，標籤RouterView用於頁面掛載

我們進行了路由的配置，可以看到to和path是對應的

組件開發：

我們先開發shengList和shengInput兩個組件，分別對應列表和輸入

shengList

先使用defineProps聲明組件接收的屬性，用於數據輸入和配置，我們設置了三個屬性，useDelete和useRLabel用於控制item的樣式，dataList就是數據了，接着用defineEmits聲明事件，將其綁定在方法onItemDeleteListener（好像java安卓的接口，索性就拿來命名了）傳入索引與條目數據，可以看到template中我們使用了v-for模板語法循環添加條目，並使用v-if根據兩個use屬性判斷是否進行該標籤渲染

shengInput

聲明瞭兩個字符串類型屬性，分別用於輸入欄placeholder和按鈕的文字顯示，對於input，我們使用了v-model這個屬性，用戶將輸入數據實時傳給inputText變量，老樣子使用defineEmits進行事件聲明，綁定給方法並傳入inputText也就是輸入的文字信息

組件使用：

三個頁面的打框分區是我提前寫好的，ui部分不知道盒友想不想看，主要是bootstrap的一些樣式和css的使用

在page中使用組件，傳入數據並綁定事件，測試了下，可以看到輸出了我們輸入的文字，說明沒問題

總結：

可以看到，組件真的很方便，設計好模板，配置好數據輸入，配置好事件處理就能用了，再也不用多個頁面複製粘貼了

至此重寫部分我們我們只完成一小部分，剩下一大部分就是ui方面的和數據請求接口方面的，雖說可以直接複製老的，但是感覺老的寫得很亂很糟糕沒有規範我還是重寫吧