使用vue制作一个电商首页

本视频省略了css调试,3个vue文件的编写过程，在实际开发过程中,这部分工作会占用较长时间。

3个vue源码视频最后给出url地址。

制作分成7个步骤。

1.安装必要的组件element-ui,axios。导入组件。
初始vue项目
npm i axios -S

npm i element-ui -S

按需安装，以达到减小项目体积的目的

npm install babel-plugin-component -D

然后，将 .babelrc 修改为（官方步骤）：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

会报错：

Module build failed: Error: Couldn't find preset "es2015" relative to directory

解决：

npm install babel-preset-es2015 --save-dev





2.构思
网页使用上中下三部分布局
上下为公用组件
首页中间部分分为三部分，走马灯、新闻、猜你喜欢


3.清理项目,先加入router和header.vue,footer.vue,main.vue文件。

4.准备相应的静态文件






5.编写header.vue

<template>
    <div>
       
        <div class="menu">
        
          <img src="../assets/images/logo.png"/>
       
          <ul>
              <li><router-link to="/">首页</router-link></li>
              
              <li><router-link to="/products">全部商品</router-link></li>
          </ul>
        
        </div>
    </div>
</template>
<script>
export default {
    
}
</script>
<style scoped>
.menu{
  width:100%;
  height: 74px;
  background:#fff;
  background-image: linear-gradient(to right, #00a0e9 , #8bc333);
  display:flex;
  color:#fff;
  font-weight: 700;
}
.menu img{
  height: calc(100% - 10px);
  display: inline;
  padding: 5px;
  background-color: #fff;
}


.menu ul{
  width:840px;
  display:flex;
  margin:0 auto;
}
.menu ul li{
  flex:1;
  text-align: center;
  line-height: 74px;
}
.menu ul li a{
  color:#fff;
  text-decoration-line: none;
}

</style>

6.编写footer.vue

<template>
    <div class="copyright">
   <p>软件下载 - <a href="mailto:highersoft@126.com">联系邮箱</a> - 关注微博</p>
   <p>Copyright © 2010-2022 匠艺软件 <a href="http://beian.miit.gov.cn">蜀ICP备19010796号</a></p>
</div>
</template>

<script>
export default {
    
}
</script>
<style  scoped>
.copyright {
   overflow: hidden;
   padding: 5em 0em;
    margin-top:10px;
    width:100%;
    background:#000;
}

.copyright p {
   letter-spacing: 0.20em;
   text-align: center;
   text-transform: uppercase;
   font-size: 0.80em;
   color: #6F6F6F;
}

.copyright a {
   text-decoration: none;
   color: #8C8C8C;
}
</style>

7.编写main.vue
7.1main.js添加:

import axios from 'axios'
//carousel-item变成carouselItem
import { Button, carousel, carouselItem,input } from 'element-ui';
Vue.use(Button)
Vue.use(input)
Vue.use(carousel)
Vue.use(carouselItem)

Vue.prototype.$axios = axios

7.2main.vue里添加:

<template>
    <div>
        <!--轮播图-->
        <div class="banner">
            <el-carousel height="415px">
                <el-carousel-item v-for="(item, i) in lunbo" :key="i">
                    <img :src="item"/>
                </el-carousel-item>
            </el-carousel>
        </div>

        <!--活动-->
        <div class="ad">
            <ul>
                <li v-for="(ad,i) in lunbo" :key="i">
                    <img :src="ad" alt />
                </li>
            </ul>  
        </div>
        <!--猜你喜欢-->
        <div class="youMayLike">
            <div class="youMayLike_menu">
                猜你喜欢
            </div>
            <div class="youMayLike_main">
                <ul>
                    <li v-for="(hot,i) in hotProducts" :key="i">
                        
                        <img :src="hot.pic"/>
                        
                        <div class="r_descr">
                            <div>{{hot.name}}</div>
                            <p>¥{{hot.price}}</p>
                        </div>
                    </li>
                </ul>
            </div>

            <div>
                
            </div>
        </div>

        

       
    </div>
</template>
<script>
export default {
    data(){
        return {
            lunbo:[],
            hotProducts:[],
        }
    },
    created(){
        this.getData();
    },
    methods:{
        getData(){
            this.$axios.get('/api/gyinfoIndex/getIndex.action').then(res=>{
                
                console.log(res);
                //debugger;
                //res.data是axios的名，里面是返回的数据
                let rst=res.data.data;
                this.lunbo=rst.bannerPics;

                this.hotProducts=rst.hotProducts;
            });
        }
    }
}
</script>
<style scoped>
.banner{
    width:1180px;
    height:415px;
    
    margin:0 auto;
    margin-top:30px;
    border-radius: 10px;
    overflow: hidden;
}
.banner img{
    width:100%;
    height:100%;
}
ul{
    margin:0px;
    padding:0px;
    list-style-type: none;
}
.ad{
    width:1180px;
    height:180px;  
    margin:20px auto;
    border-radius: 10px;
    background:#fff;
    border:1px solid #ccc;
    overflow: hidden;

}
.ad ul{
    width: 100%;
    height:100%;
    display:flex;
}


.ad ul li{
    flex:1;
    margin-right:1px;
}
.ad ul li:last-child{
    margin-right:0px!important;
}
.ad ul li img{
    width:100%;
    height:100%;
}
.youMayLike{
    width:1180px;
    height:auto;
    margin:0 auto;
    border:1px solid #cccc;
    overflow: hidden;
    background:#fff;
    border-radius: 10px;
}
.youMayLike_menu{
    height:51px;
    border-bottom:1px solid #cccc;
    line-height: 51px;
    text-indent: 30px;
}
.youMayLike_main{
    width:100%;
    padding:10px;
}
.youMayLike_main ul{
    display:flex;
    flex-wrap:wrap;

}
.youMayLike_main ul li{
    /*flex:1;*/
    
    width:33%;
    display:flex;
    flex-direction: row;
    justify-content:flex-start;
    margin-top:20px;
}

.youMayLike_main ul li img{
    display:block;
    width:80%;
    margin-left:0px;
}
.r_descr{
    margin-left:5px;
    margin-right:20px;
    text-align: left;
    display:flex;
    flex-direction: column;
    justify-content:space-between;
    width:20%;
}
.hotDetail_main ul li p{
    color:red;
}
</style>

8.运行，调试，结束

西瓜视频