随笔分类 - 前端知识
摘要：在vue3中，我用 reactive声明了一个属于form表单的state，我需要在提交时对其中的某些属性进行验证通过后调用emit方法提交数据到父组件，这时我对emit里面提交的数据做了如下处理： const ok = (ruleFormRef: any | undefined) => { if
阅读全文
摘要：父传子： <script> /** * @type {string} * 类型注释要这么写，相当于vue和react的props */ export let title; </script> <div> <!-- 如果你需要引用传递到组件中的所有道具，包括未使用export声明的道具，可以利用$$p
阅读全文
摘要：<el-form :model="state" validate-on-rule-change="false"> <el-form-item :key="item.key" :label="item.field" :prop=//这里要使用：数据集合list.index.input组件绑定的值的名称
阅读全文
摘要：如果没配置自定义的路由配置文件router.options.ts（配置问题详见：https://www.cnblogs.com/llcdbk/p/16882258.html），你可以按照官网的写法去定义布局、中间件等，但是如果你在项目中配置了路由文件，你会发现按照官网的写法写了以后会失效，除非是全局
阅读全文
摘要：这里没啥特别的，要注意的是本地的js要配置再public 的目录下，举个例子如图： 其中代码解释如： useHead({ title: "红馆演唱会", script: [ { src: '/js/b.js',//不写pulic是因为路径已经有约定规则了 body: true,//true就是配置再
阅读全文
摘要：刚安装的nuxt框架搭配vue3使用路由的时候除了按照约定的规则配置路由以外，还可以使用基于vue-router写法的路由文件去做配置，需要如图所示的位置编写文件： 其中这样的路由要注意一下： { name: "group-team-demo-name", path: "/group-:team/d
阅读全文
摘要：我用的是webpack5，在react18中配置css module后导致antd全局样式失效，这时候可以考虑css单独配置不用模块化，less也单独有一套自己的配置，启用模块化，less用于业务代码，css用于第三方代码，配置如下： const path = require("path"); co
阅读全文
摘要：很多人都认为webpack的 compression-webpack-plugin 插件压缩后的gzip文件可以起到优化发布后请求包大小这个作用， 但是实际上这只是一部分，你会发现请求的时候并没有请求到gzip的文件，原因是nginx要配置启动gzip压缩， 然后请求数据部分如果有如图部分的标记就说
阅读全文
摘要：这个工具每次执行脚本内容都会覆盖代码文件，他可以用于yapi和swagger，关于yapi api的教程可以查看官方文档，https://fjc0k.github.io/yapi-to-typescript/handbook/ 这里主要介绍一下swagger需要踩的坑，首先，安装这个插件 npm i
阅读全文
摘要：组件部分： import { h } from "vue"; const Test1 = (props, context) => { //context.slots 类似react的props.children,但是这里代表插槽，ccname是具名插槽的名字，没有就写.default() const
阅读全文
摘要：本章介绍一下qiankun的主和子应用之间的通信，原理其实是发布订阅模式，类似vue的eventbus，首先主和子应用里面都要有一个初始化的action，如下： import { initGlobalState } from "qiankun"; /** * 初始的state */ const st
阅读全文
摘要：qiankun是对single-spa的扩写，目前支持的是vue2，对于vue3的支持不是很成熟，而且不支持vite 本章介绍大概的搭建思路，具体的搭建套路可以查看文档： https://qiankun.umijs.org/zh/guide/getting-started 新建一个父级的项目叫bas
阅读全文
摘要：purgecss-webpack-plugin 的作用是在webpack打包的时候排除没用到的css样式，这里如果在css上设置了模块化 module就会导致module的样式在打包的时候被排除，尽管它会有被用到，这时候的解决方案可以做如下处理： { loader: "css-loader", op
阅读全文
摘要：使用webpack提供的 asset/resource 做图片的打包处理，但是只能识别css中的路径，如： .title { color: red; background: url('/src/assets/imgs/456.jpeg'); width: 100%; height: 100vh; }
阅读全文
摘要：在编写node 自定义的一些脚本命令的时候，使用 npm link打开bin的执行文件，本意是要执行执行文件里面的内容，却发现最后文件本身被打开了，后来发现是要做一个声明再执行文件头部，例如： #!/usr/bin/env node // 我们对于创建等命令的设定以及一些交互流程等都会在这个入口文件
阅读全文
摘要：最近再自制搭建一个脚手架，用这个库出现了两个错误，分别谈一下解决方案： 1.Error: 'git clone' failed with status 128 解决：地址要保证使用的是https模式，地址加前缀，例如： direct:https://github.com/luochenLing/XX
阅读全文
摘要：1.再要做CDN的JS组件库文件的时候要使用 rollup-plugin-external-globals 这个插件，但是不做CDN的时候要关闭注释掉，不然引入插件后可能会报一些依赖库的全局变量未声明的错误，比如Vue is not defined 这样的错误， 建议再打包的时候可以用环境变量控制一
阅读全文
摘要：再vue2里面做可以这么写： <keep-alive> <router-view></router-view> </keep-alive> 但是报一个警告： vue-router.mjs:35 [Vue Router warn]: <router-view> can no longer be use
阅读全文
摘要：首先你需要全局安装 nodemon ，然后要做一个launch.json的配置： { "version": "0.2.0", "configurations": [ { "name": "Launch server.js via nodemon", "type": "node", "request"
阅读全文
摘要：let retArr: any = []; /** * 递归找ID * @param str * @param arr */ const findPId = (str: any, arr = data as any) => { let curPId = str; for (var idx in ar
阅读全文
