tailwindcss使用笔记
tailwind v4简介tailwind是一款高效开发的 css 原子化框架,它快速、灵活、可靠——无需运行时间。
安装
基于 vite 创建的项目
安装
1$ pnpm install tailwindcss @tailwindcss/vite
配置插件
12345678$ # vite.config.ts$ import { defineConfig } from 'vite'$ import tailwindcss from '@tailwindcss/vite'$ export default defineConfig({$ plugins: [$ tailwindcss(),$ ],$ })
配置 css
1$ @import "tailwindcss";
更多使用方法 👉tailwind
使用函数和指令
@theme定义自定义主题变量,整个项目可用,tailwind 会自动识别此类,可以像其他类一样使用。
123456$ @theme & ...
状态管理
pinia 状态管理介绍Pinia 是 Vue 的专属状态管理库,同时适用于 2he3,它允许你跨组件或页面共享状态。可以搭配持久化插件一起使用,如:pinia-plugin-persistedstate
特点
去除mutations,比较于 Vuex 更加简单
状态管理更简单,更易用
支持options api和composition api
全面的TypeScript支持
轻量
兼容性 服务端渲染支持
安装1pnpm install pinia
创建实例与引用
12345import { createApp } from "vue";import pinia from "./stores";import App from "./App.vue";createApp(App).use(pinia).mount("#app");
使用定义存储库./store,在文件夹下创建 index.ts 作为总导出文件,再创建 modules 文件夹,创建对应的模块文件,如user.ts
定义 ...
消息推送
信息推送
本文介绍 subs tracker + clloudflare workers 完成信息的推送功能
前置条件
拥有一个谷歌账号
将subs tracker fork 到自己的 github 仓库
创建 worker
登录 cloudflare 账号
创建一个 worker
将 substracker 下的 index.js 复制到 worker 中
创建 kv 存储键值对,将值设置为SUBSCRIPTIONS_KV
添加绑定并部署
首次登录默认账号admin,密码password (或者 admin admin123)
配置提醒Telegram(推荐)
从 botFather 创建一个 bot 用于提醒
获取 bot 的 token
获取 bot 的 id
企业微信机器人(可选)
创建一个企业微信群,并添加机器人
获取机器人的 webhook url
邮件通知(可选)(Resend)
获取 Resend 的 api key,官方教程
发件人邮箱(必须是已在 Resend 验证的域名邮箱)
收件人邮箱
测试
添加新订阅
点击测试
查看测试信息
测试信息中会显示订阅 ...
gemini for Andrio
Gemini For Andrio
Gemini 是谷歌旗下的人工只能模型,是当下最受欢迎的 AI 之一,在各个领域都有着优越的表现。
手机上的 AI 模型还不是很成熟,本篇将介绍如何在手机上即开即用,使手机可以拥有两个模型。这里以小米(小爱同学)为例,其他收集原理稍作修改即可。
前提条件
由于谷歌是在外网环境,所以需要有科学上网环境。
手机得有谷歌框架
拥有一个谷歌账号(个人账号)
下载应用访问谷歌商店,下载 Google Gemini 和 Google
开始修改
登录 Gemini如果有提示是否从 assistant 切换到 gemini,请选择 gemini之后选择 switch -> use gemini
更改系统设置设置-> 应用设置 -> 其他设置 -> 默认应用设置 -> 助手和语音输入 -> 数字助理应用 -> Gemini
设置完成,开始起飞,从左下或者右下向内滑动即可唤醒 Gemini。
优化: 可以将 Gemini 进行后台锁死和设置开机自启动,提升体验。
ps: 由于数据是实时通信的,对数据敏感的请不要轻易尝试哦 ...
初入vitepress
VitePressvitepress 是一个静态站点生成器,基于 Vue 3 的。很多框架的文档都是基于 vitepress 生成的。官方网址:vitepress
快速开始:
现在管理包主推 yarn 和 pnpm,所以推荐使用 pnpm 安装。
创建项目
1$ pnpm add vitepress@latest file-name
初始化项目
1234$ pnpm vitepress init$$ # 过程中会有几个填空,默认就行$ # 建议第一项写上文件名,便于管理之后的所有文档
启动项目
1$ pnpm run docs:dev
现在,vitepress 会在本地创建一个热重载服务器一般访问localhost:5173就能访问文档站点了
配置配置完成后站点才能更灵活。配置文件在总目录下,默认目录:
12345├─ file-name│ ├─ .vitepress│ │ └─ config.js│ └─ index.md└─ package.json
配置文件config.js
123456789101112131415161718export default ...
在 vite 中自动生成路由
自动生成路由手动目录结构和 Routes.ts 的配置路径存在一定的耦合性,如果目录结构发生变化,需要手动修改 Routes.ts 中的配置。
可以采用 umijs 的方法,使用约定大于配置的方式,实现自动生成路由。
vite 使用 import.meta.globwebpack 使用 require.context
由于目录信息不充足,可以采用小程序的做法,在每一个页面下添加一个 meta.ts 文件,里面只包含一个对象,里面包含路由信息
12345export default { title: "name", path: "/name", menuOrder: 1, // 菜单排序};
1234567891011121314151617181920212223// 只存在于编译时态const pages = import.meta.glob("./**/meta.ts", { eager: true, import: "default",});cons ...
正则表达式
简介正则表达式是一种描述字符组合的模式,能匹配、替换、提取文本,多用于验证表单输入,解析文本文件等任务。
在线测试工具菜鸟工具
语法教程参考菜鸟教程
常用操作符
操作符说明实例
.标识任何单个字符[abc]表示a,b,c,[a-z]表示a-z单个字符
\d匹配数字\d表示匹配一个数字,[0-9]表示匹配0-9
\D匹配非数字\D表示匹配非数字,[^0-9]表示匹配非0-9
\w匹配字母数字下划线\w表示匹配字母数字下划线,[a-zA-Z0-9_]表示匹配a-zA-Z0-9_
[]字符集,对单个字符给出取值范围
^匹配字符串开头
$匹配字符串结尾
*匹配前面的字符零次或多次
+匹配前面的字符一次或多次
?匹配前面的字符零次或一次
{n}匹配前面的字符n次ab(2)c->abbc
{n,m}匹配前面的字符n到m次ab{1,2}c表示abc、abbc
|逻辑或
()分组
进阶包含一个或多个数字,包含多个任意的字符
12/^\d+[a-z]+[A-Z]+$/<!- ...
sass基础
简介sass 是一个 CSS 预处理语言,完全兼容CSS,扩展了CSS的能力,增加了变量、嵌套规则、混合(Mixins)等功能。SASS有两种语法:缩进式(Indented)和紧凑式(Strict)。缩进式语法类似于Python,使用缩进来定义块;而紧凑式语法则更接近传统的CSS。
安装1pnpm install -g sass
安装完成后,你可以使用sass命令来编译SASS文件。例如,如果你有一个名为styles.scss的SASS文件,你可以运行以下命令来生成对应的CSS文件:
1sass styles.scss styles.css
使用变量Sass的变量功能允许我们存储和重用数据,以便在样式表中使用。
12345678 // 定义一个变量$primary-color: #3366ff; // 使用变量body { background-color: $primary-color;}
嵌套Sass的嵌套功能允许我们定义规则,使其更易于阅读和理解。嵌套规则会自动继承父规则的属性,除非我们显式地覆盖它们。
12345678910.containe ...
Hello World
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
Quick StartCreate a new post1$ hexo new "My New Post"
More info: Writing
Run server1$ hexo server
More info: Server
Generate static files1$ hexo generate
More info: Generating
Deploy to remote sites1$ hexo deploy
More info: Deployment
vue3组件库undraw-ui
项目简介Undraw UI是一个基于vue3的UI组件库,主要功能有折叠,评论,锚点,搜索,聊天等组件。
效率 Efficiency* 简化流程: 设计简洁直观的操作流程;
* 清晰明确: 语言表达清晰且表意明确,让用户快速理解
进而作出决策;
* 帮助用户识别: 界面简单直白,让用户快速识别而非回
忆,减少用户记忆负担。
可控 Controllability* 用户决策: 根据场景可给予用户操作建议或安全提示,
但不能代替用户进行决策;
* 结果可控: 用户可以自由的进行操作,包括撤销、回退
和终止当前操作等。
安装与使用安装12$ npm i element-plus2.6.0 undraw-ui@1.2.1$ # elements-plus可以选择需要版本进行安装
导包12$ #按需导包,下载导包依赖$ npm install -D unplugin-vue-components
1234567891011// 修改 vite.config.ts 或 vue.config.js 的配置。import Components from 'unplugin ...










