實驗目標

熟悉Vue開發工具，學會安裝Vue-CLI腳手架工具。

學會使用Vue-CLI腳手架工具在自己的電腦上建立項目，并運行調試。

品牌列表網頁編程。

實驗內容

Vue-CLI腳手架工具搭建一個Web項目。

使用Vue技術編寫一個簡單的品牌列表網頁，內容及格式可自己定，效果可參照網址：
https://blog.csdn.net/zerobaek/article/details/86567977

實驗詳細過程和步驟

截圖展示

主要代碼及實現方法簡介

<div class="s_content"><div class="s_content_c inner_c"><div class="s_info"><div class="s_title"><a href="#">首頁</a>&gt;<span>所有商品</span></div><div class="screen"><table><tr class = "t1"><th>品牌</th><td><a href="#">無印</a><a href="#">博朗</a><a href="#">花印</a></td></tr><tr class = "t2"><th>類別</th><td><a href="#">不銹鋼</a><a href="#">原料水泥</a><a href="#">塑料</a><a href="#">木質</a></td></tr></table></div><div class="fun"><div class="sort"><span>排序：</span><a href="#" class="s1"><i></i>銷量</a><a href="#" class="s2"><i></i>價格</a><a href="#" class="s3"><i></i>上架時間</a></div><div class="swi"><span>僅顯示有貨：</span><a href="#"><i></i></a></div><div class="total">共<span>20</span>個商品</div></div><div class="s_prod"><ul class = "pub_pro"><li><img src="images/img47.png" alt=""><div class="cont"><h3>不銹鋼湯勺</h3><span>￥300</span></div><div class="mask"><a href="#" class="btn">查看詳情</a></div></li><li><img src="images/img41.png" alt=""><div class="cont"><h3>不銹鋼湯勺</h3><span>￥300</span></div><div class="mask"><a href="#" class="btn">查看詳情</a></div></li><li><img src="images/img42.png" alt=""><div class="cont"><h3>不銹鋼湯勺</h3><span>￥300</span></div><div class="mask"><a href="#" class="btn">查看詳情</a></div></li><li><img src="images/img43.png" alt=""><div class="cont"><h3>不銹鋼湯勺</h3><span>￥300</span></div><div class="mask"><a href="#" class="btn">查看詳情</a></div></li><li><img src="images/img44.png" alt=""><div class="cont"><h3>不銹鋼湯勺</h3><span>￥300</span></div><div class="mask"><a href="#" class="btn">查看詳情</a></div></li><li><img src="images/img46.png" alt=""><div class="cont"><h3>不銹鋼湯勺</h3><span>￥300</span></div><div class="mask"><a href="#" class="btn">查看詳情</a></div></li><li><img src="images/img48.png" alt=""><div class="cont"><h3>不銹鋼湯勺</h3><span>￥300</span></div><div class="mask"><a href="#" class="btn">查看詳情</a></div></li><li><img src="images/img49.png" alt=""><div class="cont"><h3>不銹鋼湯勺</h3><span>￥300</span></div><div class="mask"><a href="#" class="btn">查看詳情</a></div></li><li><img src="images/img49.png" alt=""><div class="cont"><h3>不銹鋼湯勺</h3><span>￥300</span></div><div class="mask"><a href="#" class="btn">查看詳情</a></div></li><li><img src="images/img47.png" alt=""><div class="cont"><h3>不銹鋼湯勺</h3><span>￥300</span></div><div class="mask"><a href="#" class="btn">查看詳情</a></div></li><li><img src="images/img47.png" alt=""><div class="cont"><h3>不銹鋼湯勺</h3><span>￥300</span></div><div class="mask"><a href="#" class="btn">查看詳情</a></div></li><li><img src="images/img47.png" alt=""><div class="cont"><h3>不銹鋼湯勺</h3><span>￥300</span></div><div class="mask"><a href="#" class="btn">查看詳情</a></div></li></ul></div><div class="pages"><a href="#">&lt;</a><a href="#" class = "tol cur">1</a><a href="#" class = "tol ">2</a><a href="#">&gt;</a></div></div></div></div>

心得體會：

熟悉Vue開發工具，學會安裝Vue-CLI腳手架工具。

學會使用Vue-CLI腳手架工具在自己的電腦上建立項目，并運行調試。

品牌列表網頁編程。

參考文章

vue學習小案例（一）：品牌列表案例

總結

以上是生活随笔為你收集整理的《移动应用开发》实验报告——简单的品牌列表的全部內容，希望文章能夠幫你解決所遇到的問題。

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