网站建设定制开发vue+element简单实现商城网站首页，模仿小米电商商城（一）

1.网站建设定制开发本案例灵感来源于小米官网

官方截图

 网站建设定制开发产品效果图：

二级菜单、产品详情

 

 购物车

 

 

2.首先创建vue项目，采用开发工具。vue创建项目教程可参考：

3.创建项目后安装，按照官方教程即可，elementui官方地址：

   创建好的项目目录结构大概这样子：

 

 4.整个框架布局分为头部 src/page/top、内容src/page/index和底部src/page/foot。

内容src/page/index为一个共用容器，就像iframe标签一样，所有的路径访问将会显示在容器中，页面跳转的路径定义在src/router/index.js中

5.src/page/top/index.vue

  1. <template>
  2.   <div style="background-color: #3e3e3e;font-size: 14px;">
  3.     <div style="width: 60%;height: 40px;margin: 0 auto;display: flex;">
  4.       <div style="display: flex;flex: 1;">
  5.         <div class="active">小米商城</div>
  6.         <div class="active">MUI</div>
  7.         <div class="active">LOT</div>
  8.         <div class="active">云服务</div>
  9.         <div class="active">金融</div>
  10.         <div class="active">有品</div>
  11.         <div class="active">小爱开发平台</div>
  12.         <div class="active">政企服务</div>
  13.         <div class="active">下载app</div>
  14.         <div class="active">Select Region</div>
  15.       </div>
  16.       <div style="width: 258px;text-align: right;display: flex;">
  17.         <div class="active" @click="loginModal">登录</div>
  18.         <div class="active">注册</div>
  19.         <div class="active">消息通知</div>
  20.         <div class="shop-car">购物车（0）</div>
  21.       </div>
  22.     </div>
  23.  
  24.     <!-- 登录弹窗 -->
  25.     <el-dialog
  26.       title="User Login"
  27.       :visible.sync="box"
  28.       width="400px"
  29.       center>
  30.       <div>
  31.         <el-form class="login-form"
  32.                  status-icon
  33.                  :rules="loginRules"
  34.                  ref="loginForm"
  35.                  :model="loginForm"
  36.                  label-width="0">
  37.           <el-form-item prop="username">
  38.             <el-input size="small"
  39.                       @blur="handleLogin"
  40.                       v-model="loginForm.username"
  41.                       auto-complete="off"
  42.                       placeholder="用户名">
  43.               <i slot="prefix" class="el-icon-user el-icon--right"/>
  44.             </el-input>
  45.           </el-form-item>
  46.           <el-form-item prop="password">
  47.             <el-input size="small"
  48.                       @blur="handleLogin"
  49.                       :type="passwordType"
  50.                       v-model="loginForm.password"
  51.                       auto-complete="off"
  52.                       placeholder="密码">
  53.               <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"/>
  54.               <i slot="prefix" class="el-icon-lock el-icon--right"/>
  55.             </el-input>
  56.           </el-form-item>
  57.           <el-form-item>
  58.             <el-row :span="24">
  59.               <el-col :span="12">
  60.                 <el-checkbox v-model="loginForm.autoLogin">下次自动登录</el-checkbox>
  61.               </el-col>
  62.               <el-col :span="12" style="text-align: right;">
  63.                 <el-button type="primary"
  64.                            style="width: 100px;"
  65.                            @click.native.prevent="handleLogin"
  66.                            class="login-submit">
  67.                            登录
  68.                 </el-button>
  69.               </el-col>
  70.             </el-row>
  71.           </el-form-item>
  72.  
  73.         </el-form>
  74.       </div>
  75.     </el-dialog>
  76.  
  77.   </div>
  78. </template>
  79.  
  80. <script>
  81.   export default {
  82.       data() {
  83.         return {
  84.            activeIndex: '1',
  85.           activeIndex2: '1',
  86.           box: false,
  87.           loginForm: {
  88.             username: "",
  89.             //密码
  90.             password: "",
  91.             autoLogin: false
  92.           },
  93.           loginRules: {
  94.             username: [
  95.               {required: true, message: "请输入用户名", trigger: "blur"}
  96.             ],
  97.             password: [
  98.               {required: true, message: "请输入密码", trigger: "blur"},
  99.               {min: 1, message: "密码长度最少为6位", trigger: "blur"}
  100.             ]
  101.           },
  102.           passwordType: "password"
  103.         };
  104.       },
  105.       mounted() {
  106.       },
  107.       methods: {
  108.          homePage(){
  109.            this.$router.push({path: '/home/index'});
  110.          },
  111.          handleSelect(key, keyPath) {
  112.            console.log(key);
  113.            if(key == '1'){
  114.              this.$router.push({path: '/home/index'});
  115.            }else{
  116.              this.$router.push({path: '/test/index'});
  117.            }
  118.  
  119.         },
  120.         loginModal(){
  121.           this.box = true;
  122.         },
  123.         showPassword() {
  124.           this.passwordType === ""
  125.             ? (this.passwordType = "password")
  126.             : (this.passwordType = "");
  127.         },
  128.         handleLogin() {//登录
  129.           this.$refs.loginForm.validate(valid => {
  130.             if (valid) {
  131.               const loading = this.$loading({
  132.                 lock: true,
  133.                 text: '登录中,请稍后。。。',
  134.                 spinner: "el-icon-loading"
  135.               });
  136.               setTimeout(function(){
  137.                 loading.close();
  138.               },1000)
  139.  
  140.             }
  141.           });
  142.         },
  143.       }
  144.     };
  145. </script>
  146.  
  147. <style>
  148.   .active{
  149.     line-height: 40px;
  150.     color: #cfcfcf;
  151.     margin-right: 20px;
  152.     font-size: 12px;
  153.   }
  154.   .active:hover{
  155.     cursor: pointer;
  156.     color: #FFFFFF;
  157.   }
  158.   .shop-car{
  159.     text-align: center;
  160.     cursor: pointer;
  161.     width: 100px;
  162.     line-height: 40px;
  163.     height: 40px;
  164.     display: inline-block;
  165.     background-color: #8f8f8f;
  166.   }
  167.   .shop-car:hover{
  168.     background-color: #00FFFF;
  169.   }
  170. </style>

6.src/page/index/index.vue

  1. <template>
  2.   <div style="width: 100%;height: 100%;overflow: auto;">
  3.     <top></top>
  4.     <router-view></router-view>
  5.     <foot></foot>
  6.   </div>
  7. </template>
  8.  
  9. <script>
  10.   import top from "../top/index.vue";
  11.   import foot from "../foot/index";
  12.  
  13.   export default {
  14.       components: {
  15.         top,
  16.         foot
  17.       },
  18.       name: "index",
  19.       data() {
  20.         return {
  21.         };
  22.       },
  23.       mounted() {
  24.       },
  25.       methods: {
  26.       }
  27.     };
  28. </script>
  29.  
  30. <style>
  31. </style>

7.src/page/foot/index.vue

  1. <template>
  2.   <div style="font-size: 14px;">
  3.     <div style="width: 60%;margin: 0 auto;margin-bottom: 30px;">
  4.       <div style="display: flex;">
  5.         <div style="flex: 1;">
  6.           <div class="foot-title">帮助中心</div>
  7.           <div class="foot-item">账户管理</div>
  8.           <div class="foot-item">购物指南</div>
  9.           <div class="foot-item">订单操作</div>
  10.         </div>
  11.         <div style="flex: 1;">
  12.           <div class="foot-title">服务支持</div>
  13.           <div class="foot-item">账户管理</div>
  14.           <div class="foot-item">购物指南</div>
  15.           <div class="foot-item">订单操作</div>
  16.         </div>
  17.         <div style="flex: 1;">
  18.           <div class="foot-title">线下门店</div>
  19.           <div class="foot-item">账户管理</div>
  20.           <div class="foot-item">购物指南</div>
  21.           <div class="foot-item">订单操作</div>
  22.         </div>
  23.         <div style="flex: 1;">
  24.           <div class="foot-title">关于小米</div>
  25.           <div class="foot-item">账户管理</div>
  26.           <div class="foot-item">购物指南</div>
  27.           <div class="foot-item">订单操作</div>
  28.         </div>
  29.         <div style="flex: 1;">
  30.           <div class="foot-title">关于我们</div>
  31.           <div class="foot-item">账户管理</div>
  32.           <div class="foot-item">购物指南</div>
  33.           <div class="foot-item">订单操作</div>
  34.         </div>
  35.  
  36.       </div>
  37.     </div>
  38.     <div style="background-color: #3e3e3e;height: 40px;text-align: center;line-height: 40px;color: #afafaf;">
  39.       申明：本网页仅供学习参考 @XXX XXX XXX
  40.     </div>
  41.   </div>
  42.  
  43. </template>
  44.  
  45. <script>
  46. </script>
  47.  
  48. <style>
  49.   .foot-title{
  50.     height: 40px;
  51.     line-height: 40px;
  52.   }
  53.   .foot-item{
  54.     height: 25px;
  55.     line-height: 25px;
  56.     color: gray;
  57.   }
  58.   .foot-item:hover{
  59.     cursor: pointer;
  60.     color: #e37a2f;
  61.   }
  62. </style>

8.

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发