随笔分类 - 前端
前端开发中学到的知识，遇到的坑都收录于此
摘要：目录定制颜色自定义颜色（覆盖默认颜色）添加新的颜色使用默认颜色 定制颜色 工具：UI Colors 定制好颜色后点击导出，选择需要的格式复制。 自定义颜色（覆盖默认颜色） 在TailwindCSS中使用自定义的，可以再theme.colors中加入自定义颜色，这样会覆盖默认颜色。 /** @type
阅读全文
摘要：在vue项目中使用 创建vue项目 pnpm create vue@latest 安装Tailwind CSS 安装及其对等依赖，然后生成tailwind.config.js和postcss.config.js文件 pnpm add -D tailwindcss postcss autoprefix
阅读全文
摘要：css多行文本省略 line-clamp 一行文本内容溢出的省略例子： <div class="container" style="width: 200px;outline: 1px solid red"> <div class="description" style="overflow: hidd
阅读全文
摘要：目录安装配置使用在powershell中使用报错 pnpm避免了幽灵依赖的问题，且减少了磁盘占用，pnpm 使用了共享的存储策略，来存储所有项目的所有包版本以及每个项目所需的符号链接。 这意味着，如果多个项目依赖于同一个包的同一个版本，pnpm 只会在磁盘上存储一次。 幽灵依赖指的是在项目中虽然没有
阅读全文
摘要：目录创建项目扩展组件uni-ui安装配置easycom安装pinia报vue.hasInjectionContext is not a function 更具该文档创建好的模板：GitHub仓库地址，克隆下来安装依赖即可 创建项目 官方文档--创建uni-app 以创建vue3+ Typescrip
阅读全文
摘要：目录定义mixin引用mixin参数传递多值参数传递内容指令简写 混合指令mixin是可以重用的一组CSS声明。mixin有助于减少重复代码，只需声明一次，就可在文件中引用。它有点类似于变量，但与变量不同的它可以定义一个样式片段，还可以像函数那样定义参数。 定义mixin 混合指令的用法是在 @mi
阅读全文
摘要：目录@if@for@each基本用法高级用法一: 同时遍历多个列表高级用法二: 遍历maps的key和value@while @if sass中的条件控制指令用法同JavaScript中的if语句用法大致一样。例如： $cond:14px; body{ @if $cond < 0px{ @error
阅读全文
摘要：内置函数 详情查看菜鸟教程 自定义函数 自定义函数需要使用@function定义函数，通过@return指令返回数据。例如： @function double($width){ @return $width * 2; } body{ width:double(5px); } 调试 调试指令可以在编译
阅读全文
摘要：目录继承继承的作用域占位符 % sass中的继承使用@extend标识符，一次可以继承一个或多个样式。 继承 可以一次继承一个或多个样式。例如： .alert{ height:30px; width:100px; } .title{ color:yellow; } .success{ @extend
阅读全文
摘要：目录数据类型运算颜色值运算字符串运算插值语句 # 数据类型 sass支持以下6中主要类型: 数字，1, 2, 13, 10px 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz 颜色，blue, #04a3f9, rgba(255,0,0,0.5) 布尔型，true, fals
阅读全文
摘要：目录变量局部变量全局变量变量默认值多值变量用法一用法二 列表列表函数maps映射有关maps的其它函数map-has-key(map,key)map-keys(map) 变量 定义一个变量(以$号开头)：$name:green 使用定义好的变量：color:$name 变量也可以用在属性选择器上：#
阅读全文
摘要：目录选择器嵌套属性嵌套父选择器引用 &@at-root跳出嵌套高级用法 选择器嵌套 选择器嵌套可以简化后代选择器的书写，它允许我们将拥有相同父选择器的选择器写在一起。例如： div { width:100px; height:200px; .head{ height:50px; background
阅读全文
摘要：Element.animate()实现 <div id="app"> <button @click="startAmi">开始</button> <p>{{msg}}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.
阅读全文
摘要：目录css中使用百分比时的参照padding&margin css中使用百分比时的参照 padding&margin 使用百分比值时，参照的是父元素的宽度，例如 利用该特性可以实现根据父元素宽度变化，父元素内部的图片依然保持正方形的效果，下面是一个通过flex布局实现两列布局的例子： <!docty
阅读全文
摘要：安装 pnpm add pinia 创建一个pinia实例（根store）并将其传递给应用： import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' const p
阅读全文
摘要：目录简介flex容器基本概念flex-direction:决定主轴的方向(即元素的排列方向)flex-wrap: 指定弹性盒子的子元素换行方式justify-content：定义了元素在主轴的对齐方式align-items:设置弹性盒子元素在交叉轴（与主轴垂直）方向上的对齐方式align-conte
阅读全文
摘要：backdrop-filter：为元素后面区域添加图形效果 该属性可以让你为一个元素后面区域（即背景区域）添加图形效果（如模糊或颜色偏移）。它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。作用于元素背后的区域所覆盖的所有元素 与filter的区别：filter作用于元素本身
阅读全文
摘要：绝对定位居中 设置水平居中 先设置子元素左侧移动到水平中心位置 left: 50%; , 再设置 margin-left: -40px 向左移动 50% ; /* 绝对定位元素 - 水平居中 */ .top { /* 子元素设置绝对定位 父元素需要设置相对定位 */ position: absolu
阅读全文
摘要：文本换行设置 word-wrap word-wrap:normal | break-word; normal：默认值，当一行剩余空间无法容纳下一个字（英文是指单词）时，会换行 break-word：针对英文的文本，这个值可以让一个单词拆分开来换行。 word-break word-break:nor
阅读全文
摘要：使用夜神模拟器调试 1. 配置环境变量 复制adb.exe所在文件目录的路径， G:\HBuilderX\plugins\launcher\tools\adbs ，配置到系统环境变量path中。 2. 配置HbuilderX 打开模拟器端口设置界面 夜神模拟器adb路径为 D:\Program Fi
阅读全文
