前言

之前看了基于vue2、scss、vuex、webpack等实现的饿了吗代码（https://github.com/bailicangdu/vue2-elm），想用vue3、scss、pinia、vite复现一遍。

vite创建vue3项目

找到要创建项目的文件夹，进入dos界面，然后按以下步骤创建vue3项目。

image.png

打开项目，在Terminal输入命令安装scss

npm install sass

提示框 alert.vue

首先编写公共部分的提示框。

image.png

template

首先是alert.vue的结构

<template>
  <div class="alert_container"> // 提示框的容器，占满整个屏幕
    <section class="tip_text_container">
      <div class="tip_icon"> // 提示图标，用css画的圆圈和感叹号
        <span></span>
        <span></span>
      </div>
      <p class="tip_text">{{alertText}}</p> // 具体提示内容，从父组件得到
      <div class="confirm" @click="closeTip">确认</div> //点击事件：子组件向父组件传递关闭提示框事件
    </section>
  </div>
</template>

js

主要是获取父组件传递的提示信息alertText和向父组件传递关闭信息的点击事件

<script>
export default {
  data:() => ({}),
  props:['alertText'],
  methods:{
    closeTip(){
      // 子组件向父组件传递关闭提示框事件
      this.$emit('closeTip')
    }
  }
}
</script>

css

项目需要编写一些公共css，所以用到了mixin。

mixin 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个 mixin 对象可以包含任意组件选项。 当组件使用 mixin 对象时，所有 mixin 对象的选项将被“混合”进入该组件本身的选项。
https://blog.csdn.net/weixin_42709536/article/details/124859793

mixin.scss

$blue: #3190e8;
$bc: #e4e4e4;
$fc:#fff;

// 背景图片地址和大小
@mixin bis($url) {
    background-image: url($url);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

@mixin borderRadius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    -o-border-radius: $radius;
    border-radius: $radius;
}
//定位全屏
@mixin allcover{
    position:absolute;
    top:0;
    right:0;
}

//定位上下左右居中
@mixin center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

//定位上下居中
@mixin ct {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

//定位左右居中
@mixin cl {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

//宽高
@mixin wh($width, $height){
    width: $width;
    height: $height;
}

//字体大小、行高、字体
@mixin font($size, $line-height, $family: 'Microsoft YaHei') {
    font: #{$size}/#{$line-height} $family;
}

//字体大小，颜色
@mixin sc($size, $color){
    font-size: $size;
    color: $color;
}

//flex 布局和 子元素 对其方式
@mixin fj($type: space-between){
    display: flex;
    justify-content: $type;

}

alertTip.vue的css

<style lang="scss" scoped>
  @import "../../style/mixin";  // 记得引用mixin.scss
  // 提示框出现的动画
  @keyframes tipMove {
    0% {transform: scale(1)}
    35% {transform: scale(.8)}
    70% {transform: scale(1.1)}
    100% {transform: scale(1)}
  }
  // 提示框占满整个屏幕
  .alert_container{
    position: fixed;  // 固定定位：https://blog.csdn.net/qq_47373340/article/details/124063680
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;  // 设置元素堆叠：https://blog.csdn.net/weixin_45092437/article/details/126493240
    background-color: rgba(0, 0, 0, 0.1); // 原项目提示框背景没有颜色，太丑了
  }
  .tip_text_container{
    position: absolute;
    top: 50%;
    left: 50%;
    // alertTip的瞄点在提示框的左上角
    margin-top: -6rem;  // rem:https://blog.csdn.net/qq_48613863/article/details/124060996
    margin-left: -6rem;
    width: 12rem;
    animation: tipMove .4s;
    background-color: rgba(255,255,255,1);
    padding-top: .6rem;
    display: flex;  // flex:https://blog.csdn.net/weixin_41044151/article/details/114071215
    // justify-content和align-items：https://blog.csdn.net/include_IT_dog/article/details/100065515
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 0.25rem;
    // 绘制icon的外圈
    .tip_icon{
      @include wh(3rem,3rem);
      border: 0.15rem solid #f8cb86;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      // 绘制感叹号
      // nth-of-type:https://blog.csdn.net/weixin_44051815/article/details/122214807
      span:nth-of-type(1){
        @include wh(.12rem,1.5rem);
        background-color: #f8cb86;
      }
      span:nth-of-type(2){
        @include wh(.2rem, .2rem);
        border: 1px;
        border-radius: 50%;
        margin-top: .2rem;
        background-color: #f8cb86;
      }
    }
    .tip_text{
      @include sc(.7rem, #333);
      line-height: .9rem;
      text-align: center;
      margin-top: .8rem;
      padding: 0 .4rem;
    }
    .confirm{
      @include sc(.8rem, #fff);
      font-weight: bold;
      margin-top: .8rem;
      background-color: #4cd964;
      width: 100%;
      text-align: center;
      line-height: 1.8rem;
      border: 1px;
      border-bottom-left-radius: .25rem;
      border-bottom-right-radius: .25rem;
    }
  }
</style>

触发alertTip.vue

项目没完成，我是在初始的App.vue触发的alertTip.vue。

js

<script>
  import HelloWorld from './components/HelloWorld.vue';
  import AlertTip from "./components/common/alertTip.vue"; // 导入alertTip.vue
  export default {
    data:()=> ({
      showAlert:false, // 是否显示提示框
      alertText:"测试" // 向提示框传递的提示信息
    }),
    components: {AlertTip}, // 导入子组件记得写components
    methods:{
      closeTip(){  // 关闭提示框
        this.showAlert = false
      }
    }
  }
</script>

template

<template>
  <button @click="showAlert=true">提示框</button>
  <alert-tip v-if="showAlert" @closeTip="closeTip" :alertText="alertText"></alert-tip>
</template>

效果

image.png