Vue3项目技巧（更新中ing）

news2024/12/24 3:03:12

文章目录

  • axios封装
    • http.js
    • testAPI.js
    • main.js测试
    • 如果项目中需要多个baseURL
  • 自动导入scss文件
    • 案例文件
    • 使用案例
  • 引入aliyun图标库
    • 先看效果
    • 查看官网文档
    • 引入并使用
  • vueuse实现-吸附导航交互
    • 安装
    • 案例
  • 多个组件共享的请求、数据、封装到pinia
    • 案例
    • 父组件中调用
    • 子组件中应用

axios封装

http.js

在这里插入图片描述

//axios基础的封装
import axios from 'axios'

const httpInstance = axios.create({
    baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',
    timeout:5000
})

//拦截器
// 添加请求拦截器
httpInstance.interceptors.request.use(function (config) {
    return config;
}, function (error) {
    return Promise.reject(error);
});

// 添加响应拦截器
httpInstance.interceptors.response.use(function (response) {
    return response;
}, function (error) {
    return Promise.reject(error);
});

export default httpInstance

testAPI.js

在这里插入图片描述

import httpInstance from "@/utils/http";

export function getCategory(){
   return httpInstance({
        url:'home/category/head'
    })
}

main.js测试

在这里插入图片描述

//测试接口函数
import {getCategory} from "@/apis/testAPI";
getCategory().then (res => {
    console.log(res)
})

如果项目中需要多个baseURL

在这里插入图片描述

自动导入scss文件

在这里插入图片描述

案例文件

$xtxColor: #27ba9b;
$helpColor: #e26237;
$sucColor: #1dc779;
$warnColor: #ffb302;
$priceColor: #cf4444;

使用案例

<!--setup-开关：允许在script书写组合式API-->
<script setup>

</script>

<template>
  <div>
    <el-button type="primary">Primary</el-button>
    <!--一级路由出口-->
    <RouterView />
    <div class="test">
      test scss
    </div>
  </div>
</template>

<style scoped lang="scss">
.test{
  color:$warnColor;
}
</style>

引入aliyun图标库

先看效果

在这里插入图片描述

查看官网文档

官方文档说明

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

引入并使用

如果没有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="//at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
</head>

<body>
<div id="app">
</div>
<script type="module" src="/src/main.js"></script>
</body>

</html>

使用

在这里插入图片描述
在这里插入图片描述

vueuse实现-吸附导航交互

安装

npm i @vueuse/core

案例

这个案例就是又生成了一个新的组件，根据一定情况渲染在页面中
具体来说，当滚动位置y大于78时，该元素会添加show类。

在CSS部分，有一个名为.show的CSS类定义。这个类用于在app-header-sticky元素具有show类时应用样式。这些样式包括过渡效果（transition）为0.3秒线性过渡，变换（transform）为默认值，以及不透明度（opacity）为1。

因此，根据滚动位置y是否大于78，app-header-sticky元素将动态地添加或移除show类，从而触发过渡效果和样式的变化。

核心代码

在这里插入图片描述

<script setup>
// vueUse
import { useScroll } from '@vueuse/core'
const { y } = useScroll(window)
</script>

<template>
  <div class="app-header-sticky" :class="{show:y > 78}">
    <div class="container">
      <RouterLink class="logo" to="/" />
      <!-- 导航区域 -->
      <ul class="app-header-nav ">
        <li class="home">
          <RouterLink to="/">首页</RouterLink>
        </li>
        <li>
          <RouterLink to="/">居家</RouterLink>
        </li>
        <li>
          <RouterLink to="/">美食</RouterLink>
        </li>
        <li>
          <RouterLink to="/">服饰</RouterLink>
        </li>
        <li>
          <RouterLink to="/">母婴</RouterLink>
        </li>
        <li>
          <RouterLink to="/">个护</RouterLink>
        </li>
        <li>
          <RouterLink to="/">严选</RouterLink>
        </li>
        <li>
          <RouterLink to="/">数码</RouterLink>
        </li>
        <li>
          <RouterLink to="/">运动</RouterLink>
        </li>
        <li>
          <RouterLink to="/">杂项</RouterLink>
        </li>
      </ul>

      <div class="right">
        <RouterLink to="/">品牌</RouterLink>
        <RouterLink to="/">专题</RouterLink>
      </div>
    </div>
  </div>
</template>


<style scoped lang='scss'>
.app-header-sticky {
  width: 100%;
  height: 80px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  background-color: #fff;
  border-bottom: 1px solid #e4e4e4;
  // 此处为关键样式!!!
  // 状态一：往上平移自身高度 + 完全透明
  transform: translateY(-100%);
  opacity: 0;

  // 状态二：移除平移 + 完全不透明
  &.show {
    transition: all 0.3s linear;
    transform: none;
    opacity: 1;
  }

  .container {
    display: flex;
    align-items: center;
  }

  .logo {
    width: 200px;
    height: 80px;
    background: url("@/assets/images/logo.png") no-repeat right 2px;
    background-size: 160px auto;
  }

  .right {
    width: 220px;
    display: flex;
    text-align: center;
    padding-left: 40px;
    border-left: 2px solid $xtxColor;

    a {
      width: 38px;
      margin-right: 40px;
      font-size: 16px;
      line-height: 1;

      &:hover {
        color: $xtxColor;
      }
    }
  }
}

.app-header-nav {
  width: 820px;
  display: flex;
  padding-left: 40px;
  position: relative;
  z-index: 998;

  li {
    margin-right: 40px;
    width: 38px;
    text-align: center;

    a {
      font-size: 16px;
      line-height: 32px;
      height: 32px;
      display: inline-block;

      &:hover {
        color: $xtxColor;
        border-bottom: 1px solid $xtxColor;
      }
    }

    .active {
      color: $xtxColor;
      border-bottom: 1px solid $xtxColor;
    }
  }
}
</style>

多个组件共享的请求、数据、封装到pinia

案例

封装以下请求

import { ref } from 'vue'
import { defineStore } from 'pinia'
import { getCategoryAPI } from '@/apis/layout'
export const useCategoryStore = defineStore('category', () => {
    // 导航列表的数据管理
    // state 导航列表数据
    const categoryList = ref([])

    // action 获取导航数据的方法
    const getCategory = async () => {
        const res = await getCategoryAPI()
        categoryList.value = res.data.result
    }

    return {
        categoryList,
        getCategory
    }
})

父组件中调用

//触发获取导航列表的action
import {useCategoryStore} from "@/stores/categoryStore";
import {onMounted} from "vue";

const categoryStore = useCategoryStore();

onMounted(() => categoryStore.getCategory())

子组件中应用

使用变更数据后的state

<script setup>
import { useCategoryStore } from '@/stores/categoryStore'
const categoryStore = useCategoryStore()
</script>


<template>
  <ul class="app-header-nav">
    <li class="home">
      <RouterLink to="/">首页</RouterLink>
    </li>
    <li class="home" v-for="item in categoryStore.categoryList" :key="item.id">
      <RouterLink active-class="active" :to="`/category/${item.id}`">
        {{ item.name }}
      </RouterLink>
    </li>
  </ul>
</template>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/553658.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

django admin后台管理系统中配置可上传多张图片功能

django admin后台管理系统中配置可上传多张图片功能

目录 一、默认的常规方式只能上传一张图片的示例 二、配置可上传多张图片 问题&#xff1a;在django自带的admin后台管理系统中常规的方式只能上传一张图片&#xff0c;无法上传添加多张图片&#xff0c;如下图。所以现在需要配置可上传多张图片的功能&#xff01; 一、默认的…
阅读更多...
【Atlas200】Host？Device？RC？EP？

【Atlas200】Host？Device？RC？EP？

目录 atlas500的ep模式Atlas 200 DK的host侧内存地址的分配Device侧内存管理内存的拷贝复用方案atlas500的ep模式 如上图所示，cpu+内存一侧为host侧；而gpu+显存一侧为device侧。 Atlas 200 DK的 在昇腾310AI处理器（NPU）中，Davinci Core负责专用计算，而Control CPU则负责…
阅读更多...
拉电流 、灌电流、吸收电流

拉电流 、灌电流、吸收电流

单片机的引脚&#xff0c;可以用程序来控制&#xff0c;输出高、低电平&#xff0c;这些可算是单片机的输出电压。但是程序控制不了单片机的输出电流。单片机的输出电流&#xff0c;很大程度上是取决于引脚上的外接器件。 什么是拉电流 、灌电流、吸收电流 ? 51单片机的IO口驱…
阅读更多...
SpringCloud（28. 分布式会话与分布式事务）

SpringCloud（28. 分布式会话与分布式事务）

上一篇&#xff1a;27. Redis 和 ZK 分布式锁 文章目录 1. 集群部署时的分布式 session 如何实现&#xff1f;2. 分布式事务方案2.1 两阶段提交方案/XA方案2.2 TCC 方案2.3 本地消息表2.4 可靠消息最终一致性方案2.5 最大努力通知方案 1. 集群部署时的分布式 session 如何实现&…
阅读更多...
极狐(GitLab) 重磅发布新产品「极狐星」，让研发效能看得清，算得准，成就企业精英效能管理

极狐(GitLab) 重磅发布新产品「极狐星」，让研发效能看得清，算得准，成就企业精英效能管理

在研发驱动业务增长的今天&#xff0c;越来越多的研发管理者发现&#xff1a; 总是觉得研发资源不够用&#xff1f; 如何用数据衡量研发效能&#xff1f; 如何定位软件交付瓶颈&#xff1f; 怎样管理并预警项目状态&#xff1f; 想尽早发现代码泄露风险怎么办&#xff1f;…
阅读更多...
GPS轨迹在Three.js中的地理对齐和显示

GPS轨迹在Three.js中的地理对齐和显示

如何使用 three.js 可视化 GPS 轨迹&#xff1f; 棘手的部分是获得正确的投影&#xff0c;以便 GPS 轨迹与我的 Jotunheimen 地形图对齐。 在 D3.js 的帮助下&#xff0c;我能够做我想做的事。 推荐&#xff1a;用 NSDT设计器 快速搭建可编程3D场景。 我将使用我之前在 Leaflet…
阅读更多...
二十三种设计模式第八篇--装饰器模式

二十三种设计模式第八篇--装饰器模式

装饰器模式是一种结构型设计模式&#xff0c;它允许在不改变对象原有结构的情况下&#xff0c;动态地添加新的行为或功能。装饰器模式通过将对象包装在一个装饰器对象中&#xff0c;来实现对对象的功能扩展。装饰器对象与被装饰对象具有相同的接口&#xff0c;因此可以无缝地替…
阅读更多...
ES6中数组新增了哪些扩展？

ES6中数组新增了哪些扩展？

一、扩展运算符的应用 ES6通过扩展元素符...&#xff0c;好比 rest 参数的逆运算&#xff0c;将一个数组转为用逗号分隔的参数序列 console.log(...[1, 2, 3]) // 1 2 3console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5[...document.querySelectorAll(div)] // [<div>, …
阅读更多...
线上品牌销售裂变，质变

线上品牌销售裂变，质变

大家好&#xff01; 我是小鱼经过前两期的 品牌线上运营分享 我们大概有了相对的概念 那么我们这期简单讲一下 如何让线上品牌销售产生 优质的变化。 分享 品牌方让“专业的人做专业的事”&#xff1a; 每个小程序店可招募1w个分享者负责引流和推广自家的视频号&#xff0c; 用…
阅读更多...
MyBatis缓存机制要点解析以及如何与三方缓存组件Redis整合示例

MyBatis缓存机制要点解析以及如何与三方缓存组件Redis整合示例

文章目录 一、MyBatis的一级缓存1、每个SqlSession都有自己的一级缓存2、同一个SqlSession但是查询条件不同3、 同一个SqlSession两次查询期间执行了任何一次增删改操作 4、同一个SqlSession自己手动清空一级缓存二、MyBatis的二级缓存1、二级缓存的相关配置 三、一级\二级缓存…
阅读更多...
外购设备PDA

外购设备PDA

专业扫描引擎&#xff0c;扫尽千军万码 工业级专业扫描引擎&#xff0c;数据采集精准、快速、安全&#xff1b; 同时增加摄像头扫描&#xff0c;自带绿点定位&#xff0c;实现快速对准&#xff1b; 可识别破损&#xff0c;沾染灰渍等条码提高工作效率。 一、产品特点 216GB/…
阅读更多...
xhs xs _webmsxyw 纯算法还原盗用代码请注明出处搬来搬去真的很下头！

xhs xs _webmsxyw 纯算法还原盗用代码请注明出处搬来搬去真的很下头！

本文以教学为基准、本文提供的可操作性不得用于任何商业用途和违法违规场景。 本人对任何原因在使用本人中提供的代码和策略时可能对用户自己或他人造成的任何形式的损失和伤害不承担责任。 最新版 x-s 没露任何版权请审核员认真对待谢谢。 【2023.05.22】 更新全站接口通用 …
阅读更多...
携手企企通，农业产业化国家重点龙头企业「罗牛山」加速采购数智化建设

携手企企通，农业产业化国家重点龙头企业「罗牛山」加速采购数智化建设

导语 与企企通形成战略合作&#xff0c;双方基于供应商、合同管理、采购协同等多方面的应用场景&#xff0c;打造立足海南辐射全国的行业标准化解决方案。行业案例的示范作用&#xff0c;不仅对牛罗山采购业务数字化有指导意义&#xff0c;对整个畜牧养殖行业加入采购供应链管…
阅读更多...
redis-实现限流

redis-实现限流

1、 主流的四种限流策略&#xff0c;我都可以通过redis实现 引言 在web开发中功能是基石&#xff0c;除了功能以外运维和防护就是重头戏了。因为在网站运行期间可能会因为突然的访问量导致业务异常、也有可能遭受别人恶意攻击 所以我们的接口需要对流量进行限制。俗称的QPS也是…
阅读更多...
finallshell mac SSH工具

finallshell mac SSH工具

一、FinallShell 是什么 FinalShell是一体化的的服务器,网络管理软件,不仅是ssh客户端,还是功能强大的开发,运维工具,充分满足开发,运维需求. 特色功能: 云端同步,免费海外服务器远程桌面加速,ssh加速,本地化命令输入框,支持自动补全,命令历史,自定义命令参数 二、主要特性 …
阅读更多...
CMake Practice 学习笔记四---使用动静态库

CMake Practice 学习笔记四---使用动静态库

任务&#xff1a; 编写一个程序使用我们上一届构建的共享库 1、准备工作 在/backup/cmake目录建立t4目录 mkdir t4在t4目录中建立src目录&#xff0c;并编写源文件main.c cd t4 mkdir src && cd src touch main.cmain.c的内容如下&#xff1a; #include <hel…
阅读更多...
博客系统后端设计(七) - 实现显示用户信息与注销功能

博客系统后端设计(七) - 实现显示用户信息与注销功能

文章目录 1. 显示用户信息1.1 约定前后端交互接口1.2 修改列表页的前段代码1.3 实现详情页的后端代码1.4 实现详情页的前端代码 2. 注销2.1 确定前后端交互接口2.2 实现后端代码2.3 修改前端代码 1. 显示用户信息 此处的用户名是写死的&#xff0c;我们希望的是此处是能够动态生…
阅读更多...
nodejs+vue婚庆服务网站的设计与实现

nodejs+vue婚庆服务网站的设计与实现

为了适应现代人类强烈的时间观念&#xff0c;对于用户&#xff0c;因此&#xff0c;这就需要一个互联网平台实现在线婚庆服务网站&#xff0c;正是这么一个方便的平台。本网站中&#xff0c;用户与活动报名可以以最方便的形式&#xff0c;在最短的时间内获悉报名信息&#xff0…
阅读更多...
Nginx Web页面缓存 Rsync远程同步

Nginx Web页面缓存 Rsync远程同步

Nginx Web页面缓存 在http块中加配置&#xff1a; proxy_cache_path /data/nginx/cache levels1:2 keys_zonemy_cache:10m max_size10g inactive60m use_temp_pathoff ##################################### path&#xff1a;强制参数&#xff0c;指定缓存文件的存放路径 …
阅读更多...
51单片机蓝牙APP自助商品售卖机12864投币找零

51单片机蓝牙APP自助商品售卖机12864投币找零

实践制作DIY- GC0132-蓝牙APP自助商品售卖机 一、功能说明&#xff1a; 基于51单片机设计-蓝牙APP自助商品售卖机 二、功能介绍&#xff1a; 硬件组成&#xff1a;STC89C52单片机最小系统LCD12864显示蜂鸣器ULN2003步进电机模拟出商品多个按键&#xff08;找零、确认、投…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023