有朋的博客

1.tailwincss 使用攻略1.1 插件安装 yarn add tailwindcss postcss autoprefixernpx tailwindcss init -p 2.调整 tailwind.config.js 中 content 的内容 content: [ "./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", ], 3.根样式文件引入 @tailwind base;@tailwind components;@tailwind utilities;

1.自定义指令初定登记项目版本import type { Directive } from 'vue';import imgNoPermission from '../assets/images/noPermission-bg.png';const hasPermissionDirective: Directive = { mounted(el, binding) { if (binding.value === undefined) return; const arr = ['测试1']; const permission = binding.value[1]; const type = binding.value[0] as string; // 类型 按钮 组件 if (!arr.includes(permission) && type === 'button')  ...

1.不同的生产环境部署解决不同生产环境的上线地址问题 1.根文件html文件<script src="%VITE_APP_BASE%config.js"></script>2.所有的这个.env环境变量文件增加属性VITE_APP_BASE = "/data-registry/"3.viteconfig文件import { defineConfig, loadEnv } from 'vite';import { fileURLToPath, URL } from 'node:url';import { defineConfig, loadEnv } from 'vite';import vue from '@vitejs/plugin-vue';import VueDevTools from 'vite-plugin-vue-devtools';export def ...

该配置是包含了打包配置，根目录设置，静态文件别名设置，打包环境去掉console.log 组件按需引入，配置mock，以及使用，跨域，按需引入，gzip压缩 线上1.vite打包路径，打包之前是绝对定位，打包之后是相对路由，在vite.config里面配置base:”./“，如果不配置的话本地访问不到 base:"./" 设置根目录使用必须先下载node的声明文件yarn add --dev @types/nodeimport { resolve } from "path";resolve: { //设置别名 alias: { "@": resolve(__dirname, 'src') } }, 静态资源设置别名 “/icon”: “./src/assets”, 打包环境去掉打印console.log1.先安装 npm i terser --legacy--peer-de ...

类型声明node 声明文件1.如果 TypeScript 无法自动找到 Node.js 内置模块的类型声明，可以手动安装 `@types/node` 包。你可以使用 npm 或者 yarn 进行安装：npm install --save-dev @types/node# 或者yarn add --dev @types/node vue 别名声明文件1.在 TypeScript 中，如果你想要为 Vue 组件提供类型声明文件，通常需要创建一个 `.d.ts` 文件来描述组件的类型。对于通过别名引入的组件，你可以通过在 `src` 目录下创建一个与组件文件名相同的 `.d.ts` 文件，并在其中定义组件的类型。// src/components/HelloWorld.d.tsdeclare module '*.vue' { import { DefineComponent } from 'vue'; const component: DefineComponent<{}, {&# ...

1.再封装好的emqtt.js中实时监听数据，数据库中数据发生变化的时候，mqtt收到信号，处理返回来的信息2.将返回的数据发送仓库store中进行存储3.组件使用watch监听仓库中数据的变化4.拿到数据，进行更新

1.安装 npm i mitt 或者 yarn add mitt 2.创建文件并引入 mitt 并导出 文件名字 eventBus.tsimport mitt from "mitt";// 创建一个事件总线实例const eventBus = mitt();export default eventBus; 3.使用到的组件引入该文件 import eventBus from "./eventBus";发送eventBus.emit("myEvent", { message: "Hello, EventBus!" }); 4.其他组件 // 监听事件eventBus.on("myEvent", (data) => { console.log("Event received:", data);});

该文章目前整理，递归查找树结构的数据，深拷贝数据，数组去重的一些常用姿势点，后续还会持续更新 1.递归findOptionByValue(cascader, valueToFind) { for (let item of cascader) { if (item.value === valueToFind) { console.log(item) } else if (item.children) { // 继续递归查找子级 this.findOptionByValue(item.children, valueToFind) } } }this.findOptionByValue(this.Cascader, val) 2.深拷贝deepCopy(obj) { re ...

控制台输入$env:NODE_OPTIONS="--openssl-legacy-provider"

该文档整理了项目中的代码规范性问题，以及前端需要安装的软件以及插件，还有前端人员所需要的常见网站，常见的 UI 组件库，项目的构建，vue3 组合式的使用，后续还会补充一些项目经常使用的知识点。1.前端代码规范性问题1.函数命名规范 采用小驼峰 语义明确2.类名命名规范 采用 名词-语义3.ts 类型命名规范 采用大驼峰命名4.正则验证命名规范 一一导出，采用的是平常无大小写命名5.组件名命名规范 采用小驼峰命名6.hooks 命名规范 采用 use + 小驼峰命名 2.前端安装软件以及插件1.vscode 插件https://code.visualstudio.com/2.vscode 插件2.1 chinese 中文插件2.2 Prettier 代码格式2.3 Live Server 浏览器编译2.4 Auto Rename Tag 自动化标签，修改一段另一端自动修改2.5 Easy less 预编译器2.6 Error Lens 错误警示2.7 px to rem 像素转自适应2.8 vue-official vue 插件2.9 ES7 + React react 插件 前端 ...