- 博客(14)
- 收藏
- 关注
RSS订阅原创 Pinia 持久化和解构
当在进行store 值解构时，可以使用toRefs 或者 storeToRefs，保证响应式一定存在，storeToRefs 是 Pinia 提供的工具函数，专门用于处理 Pinia store。Setup 风格的 Store（传入函数而非对象），此时插件默认会尝试持久化 return 的对象中的属性。如果你不返回 state，插件就找不到需要持久化的目标。保持结构一致性：返回的对象结构与原 Store 一致，但不含方法。这是最简单的用法，此时 state里的都将被持久化。当用 setup写法时。
2025-03-24 18:13:45
154
原创 vite CSS Modules
CSS Modules 会自动生成唯一的类名，避免样式冲突。在使用 TypeScript 时，Vite 会为 CSS Modules 生成类型定义文件（*.module.scss.d.ts），提供更好的开发体验。container 是类名，输入styles.container 输出生成的类名 会自动生成唯一的类名。xxx.module.scss 或者 xxx.module.css。:export导出的变量，ts不会自动生成类型文件，需要自己手动定义。创建css或者scss文件。
2025-03-17 16:20:36
174
原创 vue 父子组件样式事件传递
子组件的根元素是原生的HTML元素，比如一个button或div，这时候Vue会将@click绑定到该元素的原生click事件上，而不是自定义事件,这种情况下，父组件的事件会被直接触发，因为事件是原生的，通过DOM的冒泡机制传递。Vue 允许父组件修改子组件根元素的样式，例如，父组件可能需要调整子组件的外边距、内边距、宽度等布局样式 即便你加了scoped。如果子组件的根元素是自定义组件，父组件绑定的 @click 需要子组件显式触发。父组件的 @click 会直接绑定到子组件根元素div的原生点击事件。
2025-03-12 15:44:34
208
原创 js 图片预览
当需要预览图片 直接显示文件时，可以用createObjectURL，当需要读取文件的文本内容时。FileReader要把文件内容转换为Base64 字符串，当很大的文件要显示，用这种方案时，会占用很大的内存。相当于创建了一个变量指向了这个对象，当把这个对象给了img的src后，这个变量就可以清除了，因为src的指向也会指过去，这个变量存储的只是一个地址。URL.createObjectURL 会立即生成一个指向 Blob 或 File 对象的 URL，临时的 离开页面后 将不存在。
2025-03-04 15:56:49
148
1
原创 vue3 使用Iconify 图标库
方法1：使用unocss的@unocss/preset-icons在图标库里找到图标 复制类名加上前缀。默认i-使用这种方式，@unocss/preset-icons 会从 Iconify 的 CDN 加载图标（远程）也可以 安装 @iconify-json/streamline （某一个图标库）,在presetIcons配置使用本地图标库 （我没用过）方法2：使用@iconify/vue 这是一个vue的图标组件，组件不包含图标库，用什么复制什么，组件从cdn加载（远程）或者本地等其他地方加载@
2025-03-04 11:48:43
276
1
原创 element plus组件自动导入和手动导入
unplugin-element-plus虽然会自动导入样式，但是当一个element 组件也没有使用，但是需要使用element的组件api时，这时就需要手动的导入样式，因为一个组件也没用，unplugin-element-plus相当于没用。unplugin-element-plus会自动按需导入使用的组件和样式（组件api不会自动导入 ElMessage）组件类型文件也不会生成。不会自动导入组件的api，需要手动的导入组件api，然后调用，可以参考。
2025-03-03 11:43:37
300
原创 webpack自动导入svg+vite自动导入svg
总结 webpack和vite都可以自动导入svg，并把多个svg生成一个svg Sprite，webpack是每次运行打包代码到内存中，我们可以使用，vite因为每次运行不打包，所以有一个虚拟模块，这个虚拟模块里包含svg Sprite信息，并且插到页面的body里，这时页面也可以使用。不同的是它会生成一个虚拟模块，这个模块会把多个svg生成一个svg（和webpack 的那个loader类似）包含svg的信息，然后把他放在 内存里 （它会将生成的sprite插入到页面body的里。
2025-02-28 18:27:05
199
原创 vue3 自定义插件plugins
这两种方法都可以导出一个插件，原理就是 在use时，把全局的实例 app给你，你给app上挂载东西，然后就可以在能获取到实例的地方（组件里）直接使用，无法在工具方法文件里使用，因为没有app实例。如果插件是一个对象，且该对象有 install 方法，Vue 会调用 install 方法。如果插件是一个函数，Vue 会直接调用这个函数，并将 app 实例作为参数传递。（ 在按需加载的前提下）自定义插件一般用于 全局的给实例上挂载一些东西 组件 方法 等等。在 Vue 3 中 app.use 规则。
2025-02-25 11:22:50
214
原创 vue+vite 组件自动 按需导入 api自动引入
但是在ts项目里，需要手动生成组件的类型文件，unplugin-auto-import只会生成api的类型文件，并且unplugin-auto-import对ui组件的预设 支持的没有unplugin-vue-components多，unplugin-auto-import也无法自动导入自定义组件，因为它没有扫描功能。unplugin-vue-components是专门用于组件处理的，在ts项目里，会生成组件的类型文件，而用unplugin-auto-import导入组件，并不会生成组件的类型文件。
2025-02-21 12:06:32
385
原创 unocss 使用变量
sass变量在编译时被替换为具体的值，不能直接在uno里使用，打包编译时，css的处理有个先后顺序。变量用[]包起来 [var(–primary-color)]sass变量需要和css的变量结合起来 给uno用。把这个scss文件在用的地方导入。css变量 var。
2025-02-20 13:50:23
206
原创 vue unocss使用
先安装@unocss/transformer-directives （UnoCSS 的一个转换器 在 CSS 文件中使用 指令，例如 @apply 这是Tailwind的一个写法，uno也搞了一个 ，这个包的作用就是解析@apply的内容 转换为css）先安装unocss 在安装nuocss需要的的预设 预设呢就是我们在使用时是这么写的 text-red-500、bg-blue-200，这些类名对应的解析都在预设里，我们也可以自己编写一些预设。在uno.config.js配置后，即可使用。
2025-02-20 13:16:52
421
原创 vue2 webpack 批量导入模块
例如一个管理系统，在全局的状态管理中，store文件夹下面，我们通常会设计多个模块，例如user模块，tags模块，msg模块等多个，所以store/modules文件夹里有user.js tags.js msg.js等文件，在进行store模块导出时，我们需要使用import导入这些模块，在把这些模块加入到store，导出store。可以看到app tags msg 便是模块的名字，因此我们可以通过这个数组拿到模块名，例如app，在调用。在vue2+webpack的项目中，我们经常会看到如下代码。
2025-02-13 13:13:37
172
1
原创 eslint,prettier结合使用
运行eslint检查，fix修复，quiet过滤掉警告（我们在配置eslint时，不符合规范的，有一个严重程度，error，warn等） fix修复，我们配置了使用分号结尾，他会检查到有没有用分号结尾的，帮我们自动加上分号，大概就是做这些事情，修复不了的 就报错。vscode中有Prettier插件，安装Prettier插件，配置保存时自动格式化，或者手动格式化选择Prettier插件，Prettier会优先找到代码里配置的Prettier配置，如果没有，用插件默认的。现在配置好了，如何使用。
2025-02-13 10:34:20
337
原创 Husky , Lint-staged,commitlint
在进行commit提交时，我们需要明确本次提交的内容是什么，业内规范fix：开头的叫修改 bug，feat：新功能，因此呢，我们要验证commit 的描述是否合理，同样，在husky的钩子里进行验证，commit-msg钩子里，我们可以运行一些命令或者其他的校验规范来验证提交的描述信息是否合理，例如使用正则等校验判断。commitlint 是一个用于检查 Git 提交信息的工具，他有自己内置的规范，我们可以在commit-msg里调用commitlint 命令，由commitlint 进行校验。
2025-02-12 18:31:17
373
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人