移动乐淘day1

1.启动命令

npm start  //在项目的根目录

2.540 error

替换项目中 node_modules  或者 直接删除node_modules 通过网络下载更新  命令: npm install

3.项目url地址

    前台会员地址
http://localhost:3000/m/index.html
账号 itcast
密码 111111    
后台地址
http://localhost:3000/a/login.html
账号 root
密码 123456

 

4.项目目录创建

5.引入我们的mui

6.搭建项目骨架 index.html

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <link rel="stylesheet" href="assets/mui/css/mui.min.css">
 <link rel="stylesheet" href="css/base.css">
 <script src="assets/mui/js/mui.min.js"></script>

 

    <header class="mui-bar mui-bar-nav my-header">
  <h1 class="mui-title">乐淘云购</h1>
  <a class="mui-icon mui-icon-search mui-pull-right"></a>
 </header>
 <nav class="mui-bar mui-bar-tab my-footer">
  <a class="mui-tab-item mui-active" href="index.html">
   <span class="mui-icon mui-icon-home"></span>
   <span class="mui-tab-label">首页</span>
  </a>
  <a class="mui-tab-item" href="category.html">
   <span class="mui-icon mui-icon-bars"></span>
   <span class="mui-tab-label">分类</span>
  </a>
  <a class="mui-tab-item" href="cart.html">
   <span class="mui-icon iconfont icon-daohanggouwuche"></span>
   <span class="mui-tab-label">购物车</span>
  </a>
  <a class="mui-tab-item" href="user.html">
   <span class="mui-icon mui-icon-person"></span>
   <span class="mui-tab-label">会员中心</span>
  </a>
 </nav>
 <div class="mui-content">
  
 </div>

 

7.实现首页轮播图

<!-- 轮播图 -->
  <div class="mui-slider">
   <div class="mui-slider-group">
    <div class="mui-slider-item">
     <a href="#">
      <img src="images/banner1.png" />
     </a>
    </div>
    <div class="mui-slider-item">
     <a href="#">
      <img src="images/banner2.png" />
     </a>
    </div>
    <div class="mui-slider-item">
     <a href="#">
      <img src="images/banner3.png" />
     </a>
    </div>
    <div class="mui-slider-item">
     <a href="#">
      <img src="images/banner4.png" />
     </a>
    </div>
    <div class="mui-slider-item">
     <a href="#">
      <img src="images/banner5.png" />
     </a>
    </div>
    <div class="mui-slider-item">
     <a href="#">
      <img src="images/banner6.png" />
     </a>
    </div>
   </div>
   <div class="mui-slider-indicator">
    <div class="mui-indicator mui-active"></div>
    <div class="mui-indicator"></div>
    <div class="mui-indicator"></div>
    <div class="mui-indicator"></div>
    <div class="mui-indicator"></div>
    <div class="mui-indicator"></div>
   </div>
  </div>

 

8.实现导航链接

<!-- 导航链接 -->
  <div class="nav-links mui-clearfix">
   <a href="#">
    <img src="images/nav1.png">
   </a>
   <a href="#">
    <img src="images/nav2.png">
   </a>
   <a href="#">
    <img src="images/nav3.png">
   </a>
   <a href="#">
    <img src="images/nav4.png">
   </a>
   <a href="#">
    <img src="images/nav5.png">
   </a>
   <a href="#">
    <img src="images/nav6.png">
   </a>
  </div>
  <!-- /导航链接 -->

9.品牌

<!-- 品牌专区 -->
  <div class="brand">
   <img src="images/title0.png" class="title">
   <ul>
    <li><a href=""><img src="images/brand1.png" alt=""></a></li>
    <li><a href=""><img src="images/brand2.png" alt=""></a></li>
    <li><a href=""><img src="images/brand3.png" alt=""></a></li>
    <li><a href=""><img src="images/brand4.png" alt=""></a></li>
    <li><a href=""><img src="images/brand5.png" alt=""></a></li>
    <li><a href=""><img src="images/brand6.png" alt=""></a></li>
    <li><a href=""><img src="images/brand7.png" alt=""></a></li>
    <li><a href=""><img src="images/brand8.png" alt=""></a></li>
   </ul>
  </div>
  <!-- /品牌专区 -->

10.运动专栏

    <!-- 运动生活专区 -->
  <div class="product">
   <img src="images/title1.png" class="title">
   <ul class="mui-clearfix">
    <li>
     <a href="#">
      <img src="images/product.jpg">
      <span class="name">
       adidas阿迪达斯 男式 场下休闲篮球鞋S83700
      </span>
      <p>
       <span>¥560</span>
       <span>¥888</span>
      </p>
      <span class="buy-now">立即购买</span>
     </a>
    </li>
    <li>
     <a href="#">
      <img src="images/product.jpg">
      <span class="name">
       adidas阿迪达斯 男式 场下休闲篮球鞋S83700
      </span>
      <p>
       <span>¥560</span>
       <span>¥888</span>
      </p>
      <span class="buy-now">立即购买</span>
     </a>
    </li>
    <li>
     <a href="#">
      <img src="images/product.jpg">
      <span class="name">
       adidas阿迪达斯 男式 场下休闲篮球鞋S83700
      </span>
      <p>
       <span>¥560</span>
       <span>¥888</span>
      </p>
      <span class="buy-now">立即购买</span>
     </a>
    </li>
    <li>
     <a href="#">
<img src="images/product.jpg">
<span class="name">
adidas阿迪达斯 男式 场下休闲篮球鞋S83700
</span>
<p>
<span>¥560</span>
<span>¥888</span>
</p>
<span class="buy-now">立即购买</span>
</a>
</li>
</ul>
</div>
<!-- /运动生活专区 -->

11.女士专栏

<!-- 女士专栏 -->
  <div class="product">
   <img src="images/title2.png" class="title">
   <ul class="mui-clearfix">
    <li>
     <a href="#">
      <img src="images/product.jpg">
      <span class="name">
       adidas阿迪达斯 男式 场下休闲篮球鞋S83700
      </span>
      <p>
       <span>¥560</span>
       <span>¥888</span>
      </p>
      <span class="buy-now">立即购买</span>
     </a>
    </li>
    <li>
     <a href="#">
      <img src="images/product.jpg">
      <span class="name">
       adidas阿迪达斯 男式 场下休闲篮球鞋S83700
      </span>
      <p>
       <span>¥560</span>
       <span>¥888</span>
      </p>
      <span class="buy-now">立即购买</span>
     </a>
    </li>
    <li>
     <a href="#">
      <img src="images/product.jpg">
      <span class="name">
       adidas阿迪达斯 男式 场下休闲篮球鞋S83700
      </span>
      <p>
       <span>¥560</span>
       <span>¥888</span>
      </p>
      <span class="buy-now">立即购买</span>
     </a>
    </li>
    <li>
     <a href="#">
<img src="images/product.jpg">
<span class="name">
adidas阿迪达斯 男式 场下休闲篮球鞋S83700
</span>
<p>
<span>¥560</span>
<span>¥888</span>
</p>
<span class="buy-now">立即购买</span>
</a>
</li>
</ul>
</div>
<!-- /女士专栏 -->

12.男士专栏

    <!-- 男士专栏 -->
  <div class="product">
   <img src="images/title3.png" class="title">
   <ul class="mui-clearfix">
    <li>
     <a href="#">
      <img src="images/product.jpg">
      <span class="name">
       adidas阿迪达斯 男式 场下休闲篮球鞋S83700
      </span>
      <p>
       <span>¥560</span>
       <span>¥888</span>
      </p>
      <span class="buy-now">立即购买</span>
     </a>
    </li>
    <li>
     <a href="#">
      <img src="images/product.jpg">
      <span class="name">
       adidas阿迪达斯 男式 场下休闲篮球鞋S83700
      </span>
      <p>
       <span>¥560</span>
       <span>¥888</span>
      </p>
      <span class="buy-now">立即购买</span>
     </a>
    </li>
    <li>
     <a href="#">
      <img src="images/product.jpg">
      <span class="name">
       adidas阿迪达斯 男式 场下休闲篮球鞋S83700
      </span>
      <p>
       <span>¥560</span>
       <span>¥888</span>
      </p>
      <span class="buy-now">立即购买</span>
     </a>
    </li>
    <li>
     <a href="#">
<img src="images/product.jpg">
<span class="name">
adidas阿迪达斯 男式 场下休闲篮球鞋S83700
</span>
<p>
<span>¥560</span>
<span>¥888</span>
</p>
<span class="buy-now">立即购买</span>
</a>
</li>
</ul>
</div>
<!-- /男士专栏 -->

day02