- 博客(25)
- 收藏
- 关注
RSS订阅原创 vue2转vue3方案
1. 方案一 vue-codemod1.1 文档1. [第三方文档](https://originjs.org/guide/tools/vue-codemod/)2. [官方仓库](https://github.com/vuejs/vue-codemod)1.2 来源来源为官方**vuejs**仓库，文档标明为实验阶段1.3 转换输出输出转换占比及文件可以在输出得文件日志中查看已转换文件和未转换文件1.4 更新周期github最近更新时间为2021-07-20npm最新发
2022-04-29 14:44:59
3088
原创 ts中得&和 |
1. 问题type Foo = { name: string age: string}type Bar = { name: string age: string gender: number}type a = keyof Foo | keyof Bartype b = keyof Foo & keyof Bar 今天在做**type-challenges**时，发现个自己之前忽略得东西，那就是**&**和**|**有什么不同2. 类型key中上面**
2022-03-30 10:25:46
1635
1
原创 vue3+vite+element-plus+husky+commitzen搭建项目
1.1 编辑器统一编码规范# http://editorconfig.orgroot = true[*] # 表示所有文件适用charset = utf-8 # 设置文件字符集为 utf-8indent_style = space # 缩进风格（tab | space）indent_size = 2 # 缩进大小end_of_line = lf # 控制换行类型(lf | cr | crlf)trim_trailing_whitespace = true # 去除行首的任意空白字符in
2022-02-21 20:57:58
934
原创 学习简单打包器的实现
学习地址本文代码地址1. 读取文件首先我们需要一个创建函数，并且读取我们指定文件的内容function createAssets(filePath) { const source = fs.readFileSync(filePath, { encoding: 'utf8', })}2. 生成语法树通过安装@babel/parser来将文件的内容解析成ast抽象语法树 const ast = parser.parse(source, { sourceType: 'mo
2022-01-24 19:50:18
694
原创 发布属于自己的npm包
1. 配置我们想要将我们的库或者包发布到**npm**上时，首先要将**package.json**进行配置，{ "name": "cli-demo", "bin": "./bin/index.js", "files": [ "bin", "package.json" ],}其中，**bin**就是就是我们整个包的入口位置，我们将运行文件的再放**bin**配置的位置，别人在使用的时候就会去执行我们的**bin/index.js**文件2. 入口文件#! /us
2021-12-12 18:11:27
412
原创 使用esbuild创建自己的cli-总结
1. ejs渲染我们可以通过**ejs**模板引擎来去渲染我们的ejs文件import ejx from 'ejs'const indexTemplate = fs.readFileSync( path.resolve(__direname, '../template/index.ejs') )const code = ejx.render(indexTemplate.toString(), { // ...})2. 绝对路径在**esbuild**中，没有**__d
2021-12-12 18:10:30
633
原创 Vite当中的scss配置踩坑
1. 场景今天想要给vite项目，添加全局的scss变量文件引用，这样我们在使用scss变量和函数的时候就不需要每个组件都取引用了2. 官方代码export default defineConfig({ css: { preprocessorOptions: { scss: { additionalData: `$injectedColor: orange;` } } }})3. 问题在如上面代码所示进行配置的时候，在vite进行
2021-12-06 19:25:32
3475
原创 Props中的default
1. 默认使用props: { obj: { type:Object, default:() => ({}) }, arr: { type:Array, default:() => ([]) }}2. 为什么需要通过函数的形式因为对象和数组都是属于我们的复杂类型，在进行访问指向的时候我们使用的是对象和数组的地址，而不像基础数据类型那。如果我们没有通过函数的形式去设置对象和数据类型的默认值，而是直接采用{}和[],如果多个使用该组件的地方因
2021-11-16 22:51:03
7590
1
原创 HMR(Hot Module Replacement)
就是我们俗称的热更新，在更新代码的时候只更新当前被修改的模块1.配置：module.exports = { target:"web", devServer: { hot: true, // 开启热更新 }}最好和target进行搭配,表示要打包成哪个平台2. 使用仅仅写了上面的配置的时候，我们模块的更新还是会刷新整个页面，而不能做到局部，因此我们需要在入口文件中进行判断配置下import ‘./a.js’if (module.hot) { module.hot.acc
2021-11-16 20:33:04
191
原创 Vite2的服务器原理
实现方式Vite2采用的是Connect进行连接和转发(Vite1使用的是Koa)转发步骤通过请求对应的文件，如果是JS后缀的文件那么直接进行返回，如果是不能被浏览器直接识别的文件，那么就通过Connect进行一层转发本地服务器去查找对应源代码，然后通过Vite的一些编译和转换，将不能直接识别的文件，转换为ES6的JS代码，然后将这个JS代码在发送给浏览器浏览器就完成更新和渲染页面...
2021-11-16 20:28:47
432
原创 ESModule
在比较新的版本的浏览器当中，我们可以通过下面的代码使用ES6中的import和export，本质就是把每一次导入导出当作一次浏览器的请求HTML:JS:import ‘./module.js’// 必须加上js后缀，此时还没有打包工具来帮我们配置查找后缀但是浏览器只能识别js,如果我们想要识别其他后缀的文件，例如ts,vue,less,scss等，就不能做到再者如果我们使用import的形式引入了第三方包中的一个A文件，如果该文件还依赖了其他的js文件的话，那么在浏览器请求加载A文件的时候，
2021-11-16 20:27:03
198
原创 vue实现图片的拖拽预览和放大缩小
html<div class="img-preview" v-else-if="fileType === 'image'" ref="imgPreviewRef"> <img :src="src" alt ref="imgRef" :style="`transform:scale(${imgScaleSize})`" /> </div> <div class="img-opt-btn"> <el-button c
2021-08-05 16:14:41
802
原创 将指定目录下的指定文件后缀的内容统一复制到指定文件
const fs = require('fs');const path = require('path')const ergodicDir = (Path, format, folderNameNew) => { fs.readdir(Path, (err, files) => { // err && console.warn('路径读取出错', err); //遍历读取到的文件列表 files.forEach((filename) => {
2021-08-05 09:41:16
446
原创 promise多个链式执行
promise情况下多个异步请求链式请求场景今天碰到文件上传，上传多张只会收到一张，由于调一次接口只能上传一张图片，原本我是用循环调接口，并行的请求，后来后端要求单个并且链式调用，等前一个接口返回了才调下一个解决由于不定个数肯定是只能通过数据遍历的形式去调用接口，顺序+数组我就想到了reuduce方法，虽然自己的想法没有成功，试错过程发现：js数组的高阶函数这些的函数体执行了异步代码时，即使使用async await，也是所有循环的同步代码执行完，采取执行异步代码(高阶函数就是类似ma
2021-07-22 15:38:15
275
原创 typescript中的高级类型
typescript中的高级类型Partial将一个类型所有参数转换为可选type Partial <T> { [P in keyof T]?:T[P]}type Man { sex:string, age:number}type ManPartial = Partial<Man> // 这样我们就可以在后续中使用空对象定义一个带有类型的值let obj:ManPartial | any = {}Exclude取出T中除了U以外的，即取出T有U没有的
2021-06-04 14:56:07
259
原创 el-table上下键高亮当前行
el-table上下键高亮当前行数据值定义data () { return { // 表格跳过的行高 skipRowHeight: {}, // 超出视口高的索引 overViewIndexArr：[], // 当前行索引 currentchangeData:0， // 表格数据 tableData：[] }}添加键盘监听activated () { document.addEventListener('keydown'
2021-05-10 19:49:40
849
原创 路由搭建
搭建权限管理系统-02路由搭建目录结构路由结构代码import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'import Layout from '@/view/layout/index.vue'const lazyImport = (path: string) => { return () => import(`@/view${path}`)}console.log(laz
2021-03-27 15:45:25
952
原创 搭建权限管理系统-01安装
搭建权限管理系统-01安装vue+typescript+vue-router+vuex+element-plus安装脚手架vue create admin-test选择vue3.0typescriptrouterstorejestcss-process(node-sass) 官方貌似建议使用dart-sasseslint安装Element-plus这里一开始使用添加插件的形式 vue add element-plus,安装完成之后webpack在编译之后出现了根目录下的main
2021-03-27 15:43:59
195
原创 vue解析展示有组件的字符串
vue解析展示有组件的字符串今天是()月()号？对上面的文字做成填空题的形式，括号能够进行输入1.解析字符串let str = '今天是(_)月(_)号？'let reg = /(\(_*\))/glet res = Array.from(str.match(reg))res.forEach((item, index) => { // 这里就是双向数据绑定的答案对象，有由于不知道有几个空采用$set的形式就行设置 this.$set(this.blankAnswerObj,
2021-01-20 15:55:23
1266
原创 promise工作中应用
promise工作中的实际应用这周在工作开发中碰到了一个场景，就是a函数的请求参数依赖于b函数的请求返回结果代码：methods:{ getId(){ this.$http(url).then(res =>{ console.log(res) }).catch(err => console.log(err)) }, getData(){ this.getId() //相关请求 }}上面代码的意思表示，getData()函
2020-08-21 21:27:50
370
原创 el-table行内编辑
el-table的行内编辑本周开发遇到了需要能够在element-ui的el-tabe组件中实现行内编辑啥也不说先放代码html<el-table :data="tableData" style="width: 100%" @row-click="handleRowClick"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-c
2020-08-21 21:26:14
3195
1
原创 vue中表单赋值无法响应式，输入框无法改变值
开发中碰到，使用element-ui输入框时无法赋值，输入无反应原因：1.细节性错误使用el-form标签时，其中的el-form-item对应的prop属性值，v-model绑定值，data对象中的字段值三者出现不一致代码示例html:<el-form-item prop="name"> <el-input v-model="form.name"></el-input></el-form-item>js:data(){ retu
2020-08-15 12:47:14
11456
10
原创 封装小程序的请求
对小程序官方的wx.request进行再次封装最近在学习小程序的时候，学习到了对于官方的请求方法的再次封装话不多说上代码let times = 0export const myRequest = (params) =>{ times++ wx.showLoading({ title: '加载中', mask: true, }) return new Promise((resolve,reject)=>{ wx.request({ .
2020-06-19 23:07:54
158
原创 src和href的区别
src和href的区别src的会先将使用该属性的标签引用资源加载完成之后再进行下面的加载，如<script>拿“script”标签举例来说，当浏览器解析到这个标签时，会暂停其他资源的加载，知道script标签加载完毕之后才会继续加载其他内容，这也是为什么建议将该标签放在页面后方打的原因href则在加载引用资源的同时会继续对问当进行处理，如<link href="index.css" rel="stylesheet">处理css时，浏览器会并行下载资源不会停止对文档的加载
2020-06-08 15:44:17
171
原创 js函数作用域中的优先级
js函数作用域中的优先级首先直接上结论：变量提升 < 传参 < 函数体 < 首行赋值变量提升function fn(){ console.log(a) var a = 1}fn() //输出为 undefined如果将var替换成ES6中的let和const会因为暂时性死区而报错传参function fn(a){ console.log(a) var a = 1}fn(2) //输出为2从而可以得出，变量提升的优先级低于函数传参函数体
2020-05-31 13:32:29
835
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人