当前位置: 首页 > news >正文

有来团队后台项目-解析7

sass

安装

因为在使用vite 创建项目的时候,已经安装了sass,所以不需要安装。
如果要安装,那么就执行

npm i -D sass 

创建文件

src 目录下创建文件
目录结构如图所示:
在这里插入图片描述
reset.scss

*,
::before,
::after {box-sizing: border-box;border-color: currentcolor;border-style: solid;border-width: 0;
}#app {width: 100%;height: 100%;
}html {box-sizing: border-box;width: 100%;height: 100%;line-height: 1.5;tab-size: 4;text-size-adjust: 100%;
}body {width: 100%;height: 100%;margin: 0;font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB","Microsoft YaHei", "微软雅黑", Arial, sans-serif;line-height: inherit;-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;text-rendering: optimizelegibility;
}a {color: inherit;text-decoration: inherit;
}img,
svg {display: inline-block;
}svg {// 因icon大小被设置为和字体大小一致,而span等标签的下边缘会和字体的基线对齐,故需设置一个往下的偏移比例,来纠正视觉上的未对齐效果vertical-align: -0.15em;
}ul,
li {padding: 0;margin: 0;list-style: none;
}*,
*::before,
*::after {box-sizing: inherit;
}a,
a:focus,
a:hover {color: inherit;text-decoration: none;cursor: pointer;
}a:focus,
a:active,
div:focus {outline: none;
}
body {background: pink;
}

index.scss

@use "./reset";

variables.scss

// src/styles/variables.scss
$bg-color: red;

上面导入的 SCSS 全局变量在 TypeScript 不生效的,需要创建一个以 .module.scss 结尾的文件
variables.module.scss

// 导出 variables.scss 文件的变量
:export {bgColor: $bg-color;
}

引用

main.ts 中配置

import { createApp } from "vue";
import "@/style.css";
import App from "@/App.vue";
// element-plus 引入icon
import { setupElIcons } from "@/plugins";
// 引入svg
import "virtual:svg-icons-register";
// 引入样式
import "@/styles/index.scss";
const app = createApp(App);
// 全局注册Element-plus图标
setupElIcons(app);
app.mount("#app");

vite.config.ts 中配置

// UserConfig,ConfigEnv 都是类型约束
import { UserConfig, ConfigEnv, loadEnv, defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// 配置vue使用jsx
import vueJsx from "@vitejs/plugin-vue-jsx";// 以下三项引入是为配置Element-plus自动按需导入
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";// 引入svg
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";// 引入路径
import { resolve } from "path";// 指定路径 使用 @ 代替/src
const pathSrc = resolve(__dirname, "src");// https://vitejs.dev/config/export default defineConfig(({ mode }: ConfigEnv): UserConfig => {return {resolve: {alias: {"@": pathSrc,},},plugins: [vue(),// jsx、tsx语法支持vueJsx(),AutoImport({// 自动导入 Vue 相关函数,如:ref, reactive, toRef 等imports: ["vue", "pinia", "vue-router"],resolvers: [// 自动导入 Element Plus 相关函数,如:ElMessage, ElMessageBox... (带样式)ElementPlusResolver(),],eslintrc: {enabled: true, //  默认 false, true 启用生成。生成一次就可以,避免每次工程启动都生成,一旦生成配置文件之后,最好把 enable 关掉,即改成 false。//  否则这个文件每次会在重新加载的时候重新生成,这会导致 eslint 有时会找不到这个文件。当需要更新配置文件的时候,再重新打开// 浏览器需要访问所有应用到 vue/element api 的页面才会生成所有自动导入 api 的文件 jsonfilepath: "./.eslintrc-auto-import.json",// 默认就是 ./.eslintrc-auto-import.jsonglobalsPropValue: true,},vueTemplate: true, // 默认 true 是否在vue 模版中自动导入dts: resolve(pathSrc, "typings", "auto-import.d.ts"), //  自动导入组件类型声明文件位置,默认根目录}),Components({resolvers: [// 自动导入 Element Plus 组件ElementPlusResolver(),],dts: resolve(pathSrc, "typings", "components.d.ts"), //  自动导入组件类型声明文件位置,默认根目录}),// 通过 createSvgIconsPlugin() 入参指定了svg 文件所在的目录和 symbolId。createSvgIconsPlugin({// Specify the icon folder to be cachediconDirs: [resolve(process.cwd(), "src/assets/icons")],// Specify symbolId format// symbolIdsymbolId: "icon-[dir]-[name]",}),],// vite.config.tscss: {// CSS 预处理器preprocessorOptions: {//define global scss variablescss: {javascriptEnabled: true,additionalData: `@use "@/styles/variables.scss" as *;`,},},},};
});

使用

HelloWord.vue

<script setup lang="ts">
import { ref } from "vue";
import variables from "@/styles/variables.module.scss";
defineProps<{ msg: string }>();const count = ref(0);
</script><template><div><el-button>Default</el-button><el-button type="primary">Primary</el-button><el-button type="success">Success</el-button><el-button type="info">Info</el-button><el-button type="warning">Warning</el-button><el-button type="danger">Danger</el-button><hr /><el-icon size="16" color="red"><Edit /></el-icon><hr /><svg-icon icon-class="refresh" spin />刷新<hr /><div class="test-css">测试是否引入了颜色</div><hr /><div :style="{ 'background-color': variables['bgColor'] }">测试全局使用</div></div>
</template><style scoped lang="scss">
.read-the-docs {color: #888;
}
.test-css {width: 100px;height: 100px;background-color: $bg-color;
}
</style>

效果展示

在这里插入图片描述

相关文章:

有来团队后台项目-解析7

sass 安装 因为在使用vite 创建项目的时候&#xff0c;已经安装了sass&#xff0c;所以不需要安装。 如果要安装&#xff0c;那么就执行 npm i -D sass 创建文件 src 目录下创建文件 目录结构如图所示&#xff1a; reset.scss *, ::before, ::after {box-sizing: border-…...

用户数据的FLASH存储与应用(FPGA架构)

该系列为神经网络硬件加速器应用中涉及的模块接口部分&#xff0c;随手记录&#xff0c;以免时间久了遗忘。 一 背景 我们知道&#xff0c;在FPGA做神经网络应用加速时&#xff0c;涉及到权重参数的存储和加载。通常在推理过程中&#xff0c;会将权重参数存储在外部DDR或片上S…...

Chrome的V8引擎 和操作系统交互介绍

Chrome的V8引擎是一个用C编写的开源JavaScript和WebAssembly引擎&#xff0c;它被用于Chrome浏览器中&#xff0c;以解释和执行JavaScript代码。V8引擎将JavaScript代码转换为机器代码&#xff0c;这使得JavaScript能够以接近本地代码的速度运行。 V8引擎与操作系统的交互主要体…...

Redis:持久化、线程模型、大 key

Redis持久化方式有什么方式&#xff1f; Redis 的读写操作都是在内存中&#xff0c;所以 Redis 性能才会高&#xff0c;但是当 Redis 重启后&#xff0c;内存中的数据就会丢失&#xff0c;那为了保证内存中的数据不会丢失&#xff0c;Redis 实现了数据持久化的机制&#xff0c…...

Linux 16个常用脚本(初级)练习

&#xff08;1&#xff09;编写脚本&#xff1a;提示用户输入用户名和密码,脚本自动创建相应的账户及配置密码。如果用户 #!/bin/bash # 编写脚本:提示用户输入用户名和密码,脚本自动创建相应的账户及配置密码。如果用户 # 不输入账户名,则提示必须输入账户名并退出脚本;如果用…...

接口测试及接口测试工具【Postman】相关的面试题

Postman是一种接口调试与http接口测试的工具&#xff0c;可以非常方便的模拟get、post或其他请求来调试和测试接口 文章目录 Postman优点Postman使用流程Postman参数化有哪几种方式Postman如何设置关联接口测试能发现什么问题如何分析bug是前端还是后端当一个接口出现异常时&am…...

android 怎么自定义view

首先了解view的绘制流程&#xff1a; 所以onmeasure ---测量view onlayout---确定view大小----》所以继承ViewGroup必须要重写onlayout&#xff0c;确定子view 而onDraw----是继承view时候需要操作的。 所以&#xff1a;自定义ViewGroup一般是利用现有的组件根据特定的布局…...

JavaScript的事件

JavaScript的事件 先写一个test测试函数以查看事件是否触发 function test(){var ddocument.getElementById("tid");console.log("测试成功"d) //控制台输出 }onclick 鼠标单击事件&#xff1a; <input type"button" id"tid" va…...

android 简单快速 自定义dialog(简单好用,不需要设置样式)

1.MyDialog代码&#xff1a; public class MyDialog{private Activity activity;private ViewGroup contentView;private View view;public MyDialog(Activity activity) {this.activityactivity;contentView activity.findViewById(android.R.id.content);viewLayoutInflate…...

JAVA代理模式梳理

什么是代理模式 代理模式&#xff1a;为其他对象提供一种代理&#xff0c;用以控制对这个对象的访问&#xff1b; 我们使用代理对象&#xff0c;可以在不修改目标对象的基础上&#xff0c;增强主业务逻辑&#xff1b;比如说我们的系统中有一个登录接口&#xff0c;我们要对这个…...

推荐几个线上兼职,每天两小时收入几十到一百

在当今数字化时代&#xff0c;居家兼职成为越来越多人的选择。借助互联网和技术的进步&#xff0c;我们能够轻松利用自己的时间和技能在网上赚取额外的收入。本文将为您介绍几个简单而有潜力的居家网上兼职小项目&#xff0c;帮助您实现财务自由。 1.千金宝库做任务赚钱 千金…...

excel封装和ddt D17

1&#xff09;excel封装 openpyxl的操作 2&#xff09;ddt 数据驱动测试 ## openpyxl的操作 1.安装&#xff1a;pip install openpyxl 2.导入 openpyxl&#xff1a; import openpyxl 3.workbook对象&#xff1a;工作簿&#xff0c;openpyxl.load_workbook() 4.sheet对象&a…...

PHP8编译安装

CentOS8编译安装PHP8 PHP&#xff0c;全称Hypertext Preprocessor&#xff08;超文本预处理器&#xff09;&#xff0c;是一种通用开源脚本语言。它特别适合于web开发&#xff0c;并能嵌入HTML中。现在主要用于PHP网站中实现动态网站功能&#xff0c;常规我们使用nginx、apache…...

3D Gaussian Splatting for Real-Time Radiance Field Rendering(慢慢啃,还是挺复杂的)

三个关键要素 从相机配准的过程中得到的稀疏点云开始&#xff0c;使用3D Gaussian表示场景; 3D Gaussian: 是连续体积辐射场能够防止不必要的空空间优化。对 3D Gaussion进行交叉优化和密度控制: 优化各向异性血方差对场景精确表示。使用快速可视感知渲染算法来进行快速的训练…...

二叉树<II>:二叉树的四种遍历方式代码实现Python3

今天我们来介绍的是二叉树的「前序」、「中序」、「后序」、「层序」四种遍历方式如何用代码实现。 还不知道这四种遍历方式原理的可以看另一篇文章&#xff1a;二叉树&#xff1c;I&#xff1e;&#xff1a;概念及二叉树的前序遍历、中序遍历、后序遍历原理 1. 相关题目 这…...

vite ts vue 项目提示 . Projects must list all files or use an include pattern.

vite ts vue 项目提示 . Projects must list all files or use an include pattern. 在引用一个 ts 的时候&#xff0c;提示如下&#xff1a; 需要在 tsconfig.node.json 文件中添加&#xff1a; {"compilerOptions": {"composite": true,"skipLibC…...

鲸鱼优化算法改进风储机组一次调频出力分配系数,以频率偏差最小为目标优化函数,结合鲸鱼算法WOA捕食过程,改进风储出力分配系数simulink与matlab联合

simulink与matlab联合 风机模糊控制 改善后的系统频率 simulink.采用风储联合数学模型...

C语言经典面试题目(七)

1、C语言中如何进行内存对齐和字节对齐&#xff1f; 在C语言中&#xff0c;内存对齐和字节对齐是为了优化内存访问速度和提高系统性能而进行的一种策略。内存对齐是指数据在内存中的存放位置必须是某个值的倍数&#xff0c;通常是数据类型的大小。字节对齐是指数据在内存中的存…...

2024华为春招Django面试题大全,最全知识点揭秘,面试必备!

为了帮助广大求职者更好地准备即将到来的面试&#xff0c;本文精心编撰了一系列涵盖InnoDB存储引擎关键知识点的面试题。这些问题不仅覆盖了InnoDB的基础知识&#xff0c;如其ACID特性、索引设计、锁机制等&#xff0c;还涵盖了性能优化、备份恢复策略等高级话题&#xff0c;旨…...

搜维尔科技:使用SenseGlove Nova手套操纵其“CAVE”投影室中的虚拟对象

创造了一种基于 PC 的创新型多边沉浸式环境&#xff0c;让参与者完全被虚拟图像和声音包围。 需要解决的挑战&#xff1a; 传统的 VR 系统往往缺乏真实的触摸反馈&#xff0c;限制了用户的沉浸感。AVR Japan 旨在通过将触觉技术融入到他们的 CAVE 系统中来应对这一挑战&#x…...

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

【深度学习新浪潮】什么是credit assignment problem?

Credit Assignment Problem(信用分配问题) 是机器学习,尤其是强化学习(RL)中的核心挑战之一,指的是如何将最终的奖励或惩罚准确地分配给导致该结果的各个中间动作或决策。在序列决策任务中,智能体执行一系列动作后获得一个最终奖励,但每个动作对最终结果的贡献程度往往…...

《Offer来了:Java面试核心知识点精讲》大纲

文章目录 一、《Offer来了:Java面试核心知识点精讲》的典型大纲框架Java基础并发编程JVM原理数据库与缓存分布式架构系统设计二、《Offer来了:Java面试核心知识点精讲(原理篇)》技术文章大纲核心主题:Java基础原理与面试高频考点Java虚拟机(JVM)原理Java并发编程原理Jav…...

文件上传漏洞防御全攻略

要全面防范文件上传漏洞&#xff0c;需构建多层防御体系&#xff0c;结合技术验证、存储隔离与权限控制&#xff1a; &#x1f512; 一、基础防护层 前端校验&#xff08;仅辅助&#xff09; 通过JavaScript限制文件后缀名&#xff08;白名单&#xff09;和大小&#xff0c;提…...

2025年- H71-Lc179--39.组合总和(回溯,组合)--Java版

1.题目描述 2.思路 当前的元素可以重复使用。 &#xff08;1&#xff09;确定回溯算法函数的参数和返回值&#xff08;一般是void类型&#xff09; &#xff08;2&#xff09;因为是用递归实现的&#xff0c;所以我们要确定终止条件 &#xff08;3&#xff09;单层搜索逻辑 二…...

Linux基础开发工具——vim工具

文章目录 vim工具什么是vimvim的多模式和使用vim的基础模式vim的三种基础模式三种模式的初步了解 常用模式的详细讲解插入模式命令模式模式转化光标的移动文本的编辑 底行模式替换模式视图模式总结 使用vim的小技巧vim的配置(了解) vim工具 本文章仍然是继续讲解Linux系统下的…...

【多线程初阶】单例模式 指令重排序问题

文章目录 1.单例模式1)饿汉模式2)懒汉模式①.单线程版本②.多线程版本 2.分析单例模式里的线程安全问题1)饿汉模式2)懒汉模式懒汉模式是如何出现线程安全问题的 3.解决问题进一步优化加锁导致的执行效率优化预防内存可见性问题 4.解决指令重排序问题 1.单例模式 单例模式确保某…...

项目进度管理软件是什么?项目进度管理软件有哪些核心功能?

无论是建筑施工、软件开发&#xff0c;还是市场营销活动&#xff0c;项目往往涉及多个团队、大量资源和严格的时间表。如果没有一个系统化的工具来跟踪和管理这些元素&#xff0c;项目很容易陷入混乱&#xff0c;导致进度延误、成本超支&#xff0c;甚至失败。 项目进度管理软…...