美文网首页
京东到家首页开发

京东到家首页开发

作者: 五号社会好青年 | 来源:发表于2022-04-04 16:15 被阅读0次

1.项目初始化

创建项目时需要注意下面选项


2.项目具体介绍

用VSCode打开项目后，下载 ESLint 和 Vetur 插件
（1）ESlint：在编码时可以给我吗一些语法上的提示
（2）Vetur：帮助我们识别vue中的语法，让vue中的单文件组件能高亮地显示出来
（3）node_modules:存放vue中的依赖包，第三方的模块
若是不小心删除了，想要重新获取，可在终端使用npm install命令，npm install 会安装package.jason中的依赖，在安装依赖的时候会将这些依赖放入到node_modules中
（4）public目录：存放默认的html模板
（5）README.md：项目的一些描述性内容
（6）package-lock.jason：保证多人协作，反复安装依赖时一个固定的版本
（7）src最重要，源代码目录，main.js程序入口

3.基础样式集成和开发模拟器的使用

1.在终端输入

npm install normalize.css --save

:统一不同浏览器之间的样式差异
2.在main.js文件中引入normalize

import 'normalize.css'

3.在src文件夹下创建一个名为style的文件夹
在文件夹style下创建一个文件，命名为base.css,内容编写如下

html{
    font-size: 100px;
}
// 1rem = html fontsize = 100px
body{
    font-size: .12rem;
}

在main.js文件中引入base.css

import './style/base.css'

main.js代码如下

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'normalize.css'
import './style/base.css'
createApp(App).use(store).use(router).mount('#app')

首页开发

1.底部Docer开发

（1）在components文件下创建DockerV.vue，表示新建一个组件
其中需要的小图标可以去iconfont官网找到，在style文件夹下创建一个iconfont.css文件，将从iconfont官网获取的文件中粘贴代码

*若是iconfont项目图标库有更新使用，这里的代码也要记得更新

iconfont.css

@font-face {
  font-family: 'iconfont';  /* Project id 3220603 */
  src: url('//at.alicdn.com/t/font_3220603_9vci4ti956.woff2?t=1648890516449') format('woff2'),
       url('//at.alicdn.com/t/font_3220603_9vci4ti956.woff?t=1648890516449') format('woff'),
       url('//at.alicdn.com/t/font_3220603_9vci4ti956.ttf?t=1648890516449') format('truetype');
}
  
  .iconfont {
    font-family: "iconfont" !important;
    font-size: .16rem;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

然后在main.js中可引入iconfont.css文件
DockerV.vue代码

<template>
 <div class="docker">
    <!--BEM block element Modifier
    block__element--Modifier -->
    <div 
    v-for="(item,index) in dockerList"
    :class="{'docker__item':true,'docker__item--active':index===currentIndex}"
    class="docker__item "
    :key="item.icon"
    >
      <router-link :to="item.to">
        <div class="iconfont" v-html="item.icon" />
        <div class="docker__title">{{item.text}}</div>
      </router-link>
      
    </div>
</div>
</template>
<script>
export default {
    name:'DockerV',
    props:['currentIndex'],
    setup(){
      const dockerList = [
        {icon:'&#xe867;',text:'首页',to:{name:'Home'}},
        {icon:'&#xe6bc;',text:'购物车',to:{name:'CartList'}},
        {icon:'&#xe7b3',text:'订单',to:{name:'OrderList'}},
        {icon:'&#xe78b',text:'我的',to:{name:'Home'}}
      ];
      return {dockerList}
    }
}
</script>
<style lang="scss" scoped>
@import '../style/viriables.scss';
@import '../style/mixins.scss';
.docker{
  display: flex;
  box-sizing: border-box;
  position: absolute;
  padding: 0 .18rem;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.49rem;
  border-top:.01rem solid $content-bgcolor ;
  
  &__item{
    flex: 1;
    text-align: center;
    a{
      color: $content-fontcolor;
      text-decoration: none;
    }
    .iconfont{
      margin: .07rem 0 .02rem 0;
      font-size: .18rem;
    }
    &--active{
      a{
        color: #1FA4FC;
      }
    }
  }
  &__title{
    font-size: .2rem;
    transform: scale(0.5, 0.5);
    transform-origin: center top;
  }
}
</style>

（2）其中，基础的css文件可以单独创建一个文件
在style文件夹下面创建一个index.css文件
index.css

@import './base.scss';
@import './iconfont.css';

然后将index.css引入main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'normalize.css'
import './style/index.scss'
createApp(App).use(store).use(router).mount('#app')

（2）可使用v-for，v-html指令来精简代码减少冗余

2.首页部分代码如下

（1）HomeV.vue,
注意在使用其他组件时要记得引入和注册组件

<script>
import StaticPart from './StaticPart.vue';
import NearbyV from './NearbyV.vue';
import DockerV from '../../components/DockerV.vue';
export default {
   name:'HomeV',
   components:{StaticPart,NearbyV, DockerV}
}
</script>

首页整体代码

<template>
  <div class="wrapper">
    <StaticPart />
    <NearbyV />
  </div>
  <DockerV :currentIndex='0' /> 
</template>
<script>
import StaticPart from './StaticPart.vue';
import NearbyV from './NearbyV.vue';
import DockerV from '../../components/DockerV.vue';
export default {
   name:'HomeV',
   components:{StaticPart,NearbyV, DockerV}
}
</script>
<style lang="scss">
.wrapper{
  overflow-y: auto;
  position: absolute;
  left: 0;
  top: 0;
  bottom: .5rem;
  right: 0;
  padding: 0 .18rem .3rem .18rem;

}
</style>

（2）NearbyV.vue 附近部分代码

<template>
    <div class="nearby">
      <h3 class="nearby__title">附近店铺</h3>
      <router-link
        v-for="item in nearbyList"
        :key="item._id"
        :to="`/shop/${item._id}`"
      >
        <ShopInfo :item="item" />
      </router-link>
      
    </div>
</template>

<script>
import {ref} from 'vue';
import { get } from '../../utils/request';
import ShopInfo from '../../components/ShopInfo.vue'

const useNearbyEffect = ()=>{
  const nearbyList = ref([]);
  const getNearbyList = async ()=>{
    const result = await get('/api/shop/hot-list');
    if(result?.errno === 0 && result?.data?.length){
      nearbyList.value = result.data;
    }
  }
  return {nearbyList,getNearbyList}
}
export default {
   name:'NearbyV',
   components:{ ShopInfo },
   setup(){
     const {nearbyList,getNearbyList} = useNearbyEffect();
      getNearbyList();
      return { nearbyList }
   },
}
</script>

<style lang='scss'>
@import '../../style/viriables.scss';
@import '../../style/mixins.scss';
.nearby{
  &__title{
    margin: .16rem 0 .02rem;
    font-size: .18rem;
    font-weight: normal;
    color: $content-fontcolor;
  }
  a{
    text-decoration: none;
  }
}
</style>

（3）StaticPart.vue中间详情部分代码

<template>
    <div class="position">
      <span class="iconfont position__icon">&#xe7f1;</span>
      南华大学雨母校区三省园5栋
      <span class="iconfont position__notice">&#xe60b;</span>
    </div>
    <div class="serch">
      <span class="iconfont">&#xe615;</span>
      <span class="serch__text">屈臣氏部分美妆六折起</span>
    </div>
    <div class="banner">
      <img 
      class="banner__img" 
      src="http://www.dell-lee.com/imgs/vue3/banner.jpg" 
      />
    </div>
    <div class="icons">
      <div
        v-for="item in iconList"
        class="icons__item"
        :key="item.desc"
      >
        <img 
        class="icons__item__img" 
        :src="`http://www.dell-lee.com/imgs/vue3/${item.imgName}.png`"
        />
        <p class="icons__item__desc">{{item.desc}}</p>
      </div>  
    </div>
    <div class="gap"></div>
</template>

<script>
export default {
   name:'StaticPart',
   setup(){
     const iconList = [
       { imgName:'超市',desc:'超市便利' },
       { imgName:'菜市场',desc:'菜市场' },
       { imgName:'水果店',desc:'水果店' },
       { imgName:'鲜花',desc:'鲜花绿植' },
       { imgName:'医药健康',desc:'医药健康' },
       { imgName:'家居',desc:'家居时尚' },
       { imgName:'蛋糕',desc:'烘培蛋糕' },
       { imgName:'签到',desc:'签到' },
       { imgName:'大牌免运',desc:'大牌免运' },
       { imgName:'红包',desc:'红包套餐' },
     ];
     return {iconList}
   }
}
</script>

<style lang="scss">
@import '../../style/viriables.scss';
@import '../../style/mixins.scss';
.position{
    position: relative;
    padding: .16rem .24rem .16rem 0 ;
    line-height: .22rem;
    font-size: .16rem;
    @include ellipsis;
    .position__icon{
      position: relative;
      top: .01rem;
      font-size: .2rem;
    }
    .position__notice{
      position: absolute;
      right: 0;
      top: .17rem;
      font-size: .2rem;
    }
    color: $content-fontcolor;
}
.serch{
  margin-bottom: .12rem;
  vertical-align: middle;
  line-height: .32rem;
  background: $search-bgColor;
  color: $search-fontColor;
  border-radius:.16rem ;
  .iconfont{
    display: inline-block;
    padding: 0 .08rem 0 .16rem;
    font-size: .16rem;

  }
  &__text{
    display: inline-block;
    font-size: .14rem;
  }
}
.banner{
  height: 0;
  overflow: hidden;
  padding-bottom: 25.4%;
  &__img{
    width: 100%;
  }
}
.icons{
  display: flex;
  flex-wrap: wrap;
  margin-top: .16rem;
  &__item{
    width: 20%;
    &__img{
      display: block;
      width: .4rem;
      height: .4rem;
      margin: 0 auto;
    }
    &__desc{
      margin: .16rem 0 .16rem 0;
      text-align: center;
      color: $content-fontcolor;
    }
  }
}
.gap{
  margin: 0 -.18rem;
  height: .1rem;
  background: $content-bgcolor;
}
</style>

（4）Docker.vue见上面
css作用域约束，一个组件内的样式只作用与这一个组件，不会影响到外部的组件

<style lang="scss" scoped>

首页实现界面

首页.png

相关文章

  • 京东到家首页开发

    1.项目初始化 创建项目时需要注意下面选项 2.项目具体介绍 用VSCode打开项目后，下载 ESLint 和 V...

  • 【实践】仿京东商城小程序（附源码）

      最近学习使用小程序开发开发了一款仿京东商城小程序效果如下：   仿京东商城小程序基本实现首页搜索、商品分类列表...

  • 京东到家基于netty与websocket的实践

    作者：李天翼，软件开发工程师，任职于达达京东到家后台研发团队，负责订单流程的开发工作 背景 在京东到家商家中心系统...

  • 京东到家

    最近迷恋京东，家里吃的、用的直接送货上门，生活变得简便快捷。婆婆也开始接受这个新事物了。虽然嘴上还吧唧吧唧嫌弃我买...

  • 京东到家

    昨晚买的东西还放在超市没有去领，因为是线下下单的所以只能自提，今晚下班后开车去提，超市外面的停车位的线已经看不太清...

  • 京东首页无脑内容

    首页无脑html内容 tabBar banner 分类索引 秒杀产品 推荐

  • 京东m站首页

    ``` window.onload=function(){ changeNavColor(); banner();...

  • CSS-京东首页

    简介对于任何一门技术的学习和掌握，最好就是在实际的项目中去不断的练习，把之前的知识熟练起来，只有不断的使用，不断的...

  • 京东金融首页效果

    之前看过金融首页页面效果觉得很有意思，发现淘宝 京东商城app也有类似效果，就想自己实现一下 进入正题 之前做法是...

  • 仿京东，淘宝广告滚动

    最近看UI再设计新的APP效果图，发现首页使用了类似京东首页京东日报模块类似的广告自动滚动效果，于是就想着提前准备...

网友评论

      本文标题：京东到家首页开发

      本文链接：https://www.haomeiwen.com/subject/uhiprrtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|京东到家首页开发|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！