Xiuji957

为什么要使用 PiniaPinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。 如果您熟悉 Composition API，您可能会认为您已经可以通过一个简单的 export const state = reactive({}). 这对于单页应用程序来说是正确的，但如果它是服务器端呈现的，会使您的应用程序暴露于安全漏洞。 但即使在小型单页应用程序中，您也可以从使用 Pinia 中获得很多好处： dev-tools 支持 跟踪动作、突变的时间线 Store 出现在使用它们的组件中 time travel 和 更容易的调试 热模块更换 在不重新加载页面的情况下修改您的 Store 在开发时保持任何现有状态 插件：使用插件扩展 Pinia 功能 为 JS 用户提供适当的 TypeScript 支持或 autocompletion 服务器端渲染支持 安装1pnpm i pinia main.ts中引入pinia，将pinia挂载到vue实例上 123456789101112131415161718192021222324/* * @Desc ...

webpack优化项目打包后体积Webpack 是一个强大的模块打包工具，可以将多个模块打包成一个或多个文件，提高前端开发的效率和性能。下面是一些常见的 Webpack 优化打包技巧： 减少打包文件的体积：可以通过压缩代码、移除未使用的代码、使用 Tree Shaking 技术等方式减小打包文件的体积。 使用代码分离：将代码拆分成更小的模块，可以实现按需加载，提高页面加载速度。 使用缓存机制：通过给打包文件加上 hash 值，可以实现浏览器缓存，减少不必要的网络请求。 使用 DLLPlugin 进行依赖分析：可以将不经常变化的依赖单独打包，避免重复打包浪费时间。 配置 externals：将一些不需要打包的依赖通过 externals 配置排除在打包之外，可以减小打包文件体积。 使用 ParallelUglifyPlugin：使用多进程并行压缩代码，加快打包速度。 使用 Happypack：使用多进程并行处理文件，加快编译速度。 使用 CDN：将一些公共资源通过 CDN 加载，可以减轻服务器压力，提高访问速度。 开启 Scope Hoisting：将模块的作用域提升到最高级别，减少函 ...

为什么手写webpack目的只有一个：加深对webpack的了解，方便以后灵活运用webpack 初始化项目结构参照vue-cli创建的初始项目创建如下目录： 12345678├── public│ └── index.html├── src│ ├── App.vue│ ├── assets│ ├── main.ts│ └── views└── webpack.config.js 执行如下命令初始化项目: 12pnpm inittsc --init 安装基础依赖12345678910111213141516171819202122232425262728293031323334{"name": "wepack-diy","version": "1.0.0","description": "","main": "index.js","scripts": {" ...

我曾梦到过你 不止一次的梦到过 每一次都深深的陷入那双眼睛 期盼又专注 温柔又绵密 明亮又热烈 我木纳的说不出一句话 我把所有秘密全都藏在了等待的过程 却希望你懂

Electron-渲染进程和主进程通信渲染进程调用ipcRenderer进行发送 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152<!-- * @Description: * @Author: xiuji * @Date: 2023-01-11 10:22:30 * @LastEditTime: 2023-01-17 14:43:58 * @LastEditors: Do not edit--><script setup lang="ts">import { ref } from 'vue'import {ipcRenderer} from 'electron'defineProps<{ msg: string }>()const count = ref(0)const send = () ...

electron踩坑排错项目启动项目框架，依赖及插件版本如下： "vue": "^3.2.45" "vite": "^4.0.0" "electron": "^22.0.2" "vite-plugin-electron": "^0.11.1" 项目首次运行 删除package.json文件中"type":"module"，添加"main": "dist/index.js"后提示缺少入口文件，修改vite.config.ts123456789101112131415161718/* * @Description: * @Author: xiuji * @Date: 2023-01-16 09:35:31 * @LastEditTime: 2023-01-16 09:50:43 * @LastEditors: Do not edit */impor ...

使用vite构建electron项目创建一个vite项目1pnpm create vite electron-demo 选择Vue+TypeScript 安装electron12pnpm i electron -Dpnpm i vite-plugin-electron -D 文件根目录新建electron文件夹，新增index.ts 修改vite.config.ts1234567891011121314151617/* * @Description: * @Author: xiuji * @Date: 2023-01-11 10:22:30 * @LastEditTime: 2023-01-11 11:14:17 * @LastEditors: Do not edit */import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import electron from 'vite-plugin-electron' / ...

h函数h接受三个参数 type元素的类型 propsOrChildren 数据对象, 这里主要表示(props, attrs, dom props, class 和 style) children子节点 h函数的多种组合方式 123456789101112131415161718192021222324252627// 除类型之外的所有参数都是可选的h('div')h('div', { id: 'foo' }) //属性和属性都可以在道具中使用//Vue会自动选择正确的分配方式h('div', { class: 'bar', innerHTML: 'hello' }) // props modifiers such as .prop and .attr can be added// with '.' and `^' prefixes respectivelyh('div', ...

我还可以见到她 所以这不算传统意义上的离别 我看似是个粗心大意的人 但我只是把自己观察到的一切都藏在心里 我渐渐发现她是一个很上进的人 既开朗又优秀 我渐渐发现她也会失意 既孤独又无助 我想一步不离的陪着她 三个月过去了 每每想到她只觉我的心像是射入了一束光 我开始沉思 思考自己的过失 思考现在的自己与未来的路 我悟到了 她就是我的光

什么是css原子化CSS原子化的优缺点 减少了css体积，提高了css复用 减少了起名的复杂度 增加了记忆成本，将css拆分为原子后，开发者必须记住一些class才能书写，即使类似tailwindcss提供了完善的工具链，开发者写background，也要记住开头是bg 项目接入unocsstips：最好用于vite项目中，webpack搭建的项目中unocss属于阉割版功能很少 安装 1pnpm i -D unocss vite.config.ts 12345678910111213141516171819202122232425262728293031/* * @Description: * @Author: xiuji * @Date: 2022-07-12 16:30:05 * @LastEditTime: 2023-01-10 14:00:09 * @LastEditors: Do not edit */import { defineConfig } from 'vite'import vue from '@vitej ...