《移动应用开发》实验报告——简单的品牌列表

太过爱你忘了你带给我的痛 2023-01-16 06:46 111阅读 0赞

# 实验目标 #

1.  熟悉Vue开发工具，学会安装Vue-CLI脚手架工具。
2.  学会使用Vue-CLI脚手架工具在自己的电脑上建立项目，并运行调试。
3.  品牌列表网页编程。

# 实验内容 #

1.  Vue-CLI脚手架工具搭建一个Web项目。
2.  使用Vue技术编写一个简单的品牌列表网页，内容及格式可自己定，效果可参照网址：  
    https://blog.csdn.net/zerobaek/article/details/86567977

# 实验详细过程和步骤 #

## 截图展示 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI3Mjc4MQ_size_16_color_FFFFFF_t_70]

## 主要代码及实现方法简介 ##

<div class="s_content">
    		<div class="s_content_c inner_c">
    			<div class="s_info">
    				<div class="s_title">
    					<a href="#">
    						首页
    					</a>
    					>
    					<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="#"><</a>
    					<a href="#" class = "tol cur">1</a>
    					<a href="#" class = "tol ">2</a>
    					<a href="#">></a>
    				</div>
    			</div>
    		</div>
    	</div>

# 心得体会： #

1.  熟悉Vue开发工具，学会安装Vue-CLI脚手架工具。
2.  学会使用Vue-CLI脚手架工具在自己的电脑上建立项目，并运行调试。
3.  品牌列表网页编程。

# 参考文章 #

[vue学习小案例（一）：品牌列表案例][vue]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI3Mjc4MQ_size_16_color_FFFFFF_t_70]: /images/20221022/e33af7cd2e9b4f0b9df9edd5be7794f7.png
[vue]: https://blog.csdn.net/zerobaek/article/details/86567977