Vue实战——饿了么(一)

zykk
585 阅读5分钟

效果

comm.gif

准备工作

  1. npm create vue@latest
  2. 项目创建时，启用路由，启用代码质量管理工具，format规范格式npm run format。
  3. npm i -D less 因为只在开发时用到，将来上线不需要用，使用-D，不需要记录在生产环境中，以免造成资源的浪费。
  4. 删除assets、components中的资源，后期我们自己造，删除router中默认写好的内容，清空数组
  5. 删除默认生成的views视图。
  6. App.vue中改为less
<style lang="less" scoped>
div {
  font-size: 30px;
}
</style>
  • 注意因为我们使用了format代码质量管理，当我们随便输入的font-sizexxxx多打一些空格等等格式错误，当保存代码时都会自动调整，如果没有自动调整，可能时工具和其他工具冲突了，可以自行在vs下栏中找到冲突自行解决。
  1. 在assets文件夹中创建reset.css，将一些默认的风格，内外边距全部初始化，复制这些代码进去，自取：CSS Tools: Reset CSS (meyerweb.com)
  2. 在main.js中做全局引入：import '@/assets/reset.css'

header部分

之前我们介绍过组件化开发，这里的头部是不变的，一直都在，不论下面切换什么内容，但是注意，这个头部点击之后，会弹出一个弹出框且占满整个页面，接下来我们实现一下头部，一样做成组件。

  • components文件夹下创建header文件夹，里面放Index.vue,vb3s生成，注意将scss改成less，可以在这个组件中随便写点东西，例如header，以便测试
  • 现在还只能称之为组件，还不是一个页面，因此我们需要去App.vue中引入这个组件，import Header from '@/components/header/Index.vue'
  • 此时在App.vue的template中引入Header即可，语义化标签中有header标签，取名不要与这些冲突，因此我们改为大写Header

App.vue测试一下看看有没有效果

<template>
  <Header></Header>
</template>

<script setup>
import Header from '@/components/header/Index.vue'
</script>

<style lang="less" scoped>
div {
  font-size: 30px;
}
</style>
  • 接下来我们在header文件夹（Index.vue同级）放了一些头部需要用到的图片，图片大家自取gitee.com/sakyu-kk/yj…
  • 接下来我们来开发Index.vue组件，注意头部的文字颜色我们不想直接写死，因此我们在assets文件夹中又创建了variable.less文件，以便以后我们方便改颜色，然后在Index.vue中@import xx引入，就可以直接使用了。用变量的形式来改颜色，以便后续每一个都需要去修改，变量的方式，我们只需要修改一个变量值即可实现。

variable.less

@color-white: #ffffff;
@color-red: #f01414;
@color-blue: #00a0dc;
@color-green: #00b43c;


@color-background: rgba(7, 17, 27, 1);
@color-background-s: rgba(7, 17, 27, 0.8);
@color-background-ss: rgba(7, 17, 27, 0.5);
@color-background-sss: rgba(7, 17, 27, 0.2);
@color-background-ssss: #f3f5f7;

@fontsize-large-xxxx: 30px;
@fontsize-large-xxx: 24px;
@fontsize-large: 16px;
@fontsize-medium: 14px;
@fontsize-small: 12px;
@fontsize-small-s: 10px;

@color-font: #666666;
@color-light-grey: #999;
@color-dark-grey: #333;
  • 注意：我们在头部中有使用到span标签，里面通过背景图的方式来显示品牌这个图片，但是我们有x2，x3大小的图片，市面上有2倍屏的手机也有3倍屏的手机，为了更好的用户体验，我们需要有针对性的放图片，因此事先我们要知道用户的屏幕是几倍屏（devicePixelRatio），因此我们在assets文件夹下创建mixin.less，通过less创建一个函数，判断放哪张图片，然后在Index.vue中引入：@import '@/assets/mixin.less';

mixin.less

.bg-image(@url) {
    background-image:~"url('@{url}@2x.png')";

    @media (-webkit-min-device-pixel-ratio: 3) {
        background-image:~"url('@{url}@3x.png')";
    }

}

如果你对less不熟悉，或者忘记了一些语法，可以查阅官方文档：Less 快速入门 | Less.js 中文文档 - Less 中文网 (bootcss.com)

在项目中会需要用到图标，图标可取于：iconfont-阿里巴巴矢量图标库，例如我们需要使用右箭头：

一：自行搜索，中英文皆可 image.png

二：加入购物车

image.png

三：添加至项目，没有则创建

image.png

四：生成代码

image.png

五：复制刚才生成的代码并补充https:头(不补充也可)，在index.html中引入在线地址至项目

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
    <link rel="stylesheet" href="https//at.alicdn.com/t/c/font_4609198_fdw558kooti.css">
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

六：引入至项目

image.png

  • 此处复制的代码是我们的类名，使用方式：在你需要用到图标的地方加入代码：
<i class="iconfont 你刚才复制的类名"></i>

整份Index.vue

<template>
    <div class="header">
        <!-- 上面部分 -->
        <div class="content-wrapper">
            <!-- 商家/店铺头像 -->
            <div class="avatar">
                <img src="https://pic.nximg.cn/file/20210617/31394912_191202772103_2.jpg" alt="">
            </div>
            <div class="content">
                <div class="title">
                    <span class="brand"></span>
                    <span class="name">kk深夜食堂</span>
                </div>
                <div class="description">
                    蜂鸟专送/38分钟送达
                </div>
                <div class="support">
                    <!-- pic -->
                    <span class="text">在线支付满20减19</span>
                </div>

            </div>
            <div class="support-count">
                <span class="count">5个</span>
                <i class="iconfont icon-youjiantou"></i>
            </div>
        </div>
        <!-- 下面的公告部分 -->
        <div class="bulletin-wrapper">

        </div>
    </div>
</template>

<script setup>

</script>

<style lang="less" scoped>
@import '@/assets/variable.less';
@import '@/assets/mixin.less';

.header {
    position: relative;
    overflow: hidden;
    color: @color-white;
    background-color: @color-background-ss;
}

.content-wrapper {
    display: flex;
    padding: 24px 12px 18px 24px;
    position: relative;
}

.avatar {
    flex: 0 0 64px;
    margin-right: 16px;

    img {
        width: 100%;
        border-radius: 2px;
    }
}

.content {
    flex: 1;

    .title {
        display: flex;
        margin-bottom: 8px;

        .brand {
            width: 30px;
            height: 18px;
            .bg-image('brand');
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .name {
            margin-left: 6px;
            font-size: @fontsize-large;
            font-weight: bold;
        }
    }

    .description {
        font-size: @fontsize-small;
        margin-bottom: 8px;
    }

    .support {
        display: flex;
        align-items: center;

        .text {
            font-size: @fontsize-small-s;
            margin-left: 4px;
        }
    }
}

.support-count {
    position: absolute;
    right: 12px;
    bottom: 14px;
    padding: 0 8px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background-color: @color-background-sss;
    border-radius: 14px;
    display: flex;
    align-items: center;

    .count {
        font-size: @fontsize-small-s;
    }

    .iconfont {
        font-size: 8px;
        margin-left: 2px;
    }
}
</style>

小结

接下来需要把我们写死的数据，改成真实数据，发送接口请求，由于这些商家数据不仅仅在头部header用到，其他地方也用到，因此这个请求我们就不写在头部，而去写在App.vue中，拿到数据之后再把数据给到Header，相当于父组件给子组件传值。

剩余内容更新中，目前状态：

image.png

avatar
文章
阅读
粉丝