- 博客(76)
- 收藏
- 关注
RSS订阅
原创 面试原来喜欢问这些(vue篇)
由于疫情原因，原本每年的“金三银四”仿佛消失，随之而来的是找工作的压力，这里给要面试的小伙伴们总结了到目前为止我遇到的前端面试题，仅供参考哦，第一次写博客，如有错误之处，还请指出。一. vue方面1.vue-router是怎么传递参数的2.v-if和v-for一起使用的弊端以及解决办法3.beforeDestroyed里面一般进行什么操作4.vue同级组件间怎么传值5.vue中父组件如...
2020-03-19 19:27:18
734
3
原创 微前端qiankun(vue3) + 子应用vue2(vite) + 子应用umi4
【代码】微前端qiankun(vue3) + 子应用vue2(vite) + 子应用umi4。
2024-03-28 16:22:10
386
原创 element table表格展开内嵌表格并修改展开icon
先看下效果图……(o^^o)1. 可以使用:tree-props="{children: ‘children’, hasChildren: ‘hasChildren’}"直接实现表格的展开，可是这样就无法把icon单独放到一列，会直接放在第一例，就像官网实例一样，局限性比较大2.所以我使用自定义展开项expand，通过配置row-class-name来决定是否展示展开图标template部分： <el-table :data="tableData" :loading="loadi
2022-05-10 11:53:19
2955
原创 echarts数据量不大，但会有卡顿，随后直接展示
今天写echarts页面发现，windows系统下图数据量只有两百多都会显示卡顿，而查看echarts官方实例，数据量四千多都正常渲染，就很郁闷经排查，竟然是因为页面里同时渲染了图表和表格，而表格数据和echarts数据是放在接口返回结果里一起整理的，这就造成了图还没有渲染完成，就在等待表格数据渲染，因此会出现页面中看到的卡顿，然后再一次加载完成现象解决方法将图表数据和表格数据分开整理，谁先渲染谁先配置数据，比如我先渲染图表，我就在图标渲染完成后，在调用表格配置的函数判断图表是否渲染完成mount
2022-04-25 18:34:09
2232
1
原创 echarts图例中使用svg path
开发echarts时，经常会要求自定义icon，但是由echarts提供的icon类型比较有限，只有几种icon: ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’比如要实现以下格式的legend首先使用formatter自定义图例名称let legend = { itemGap: 24, itemWidth: 2, itemHeight: 16, top: 0, icon:
2022-04-24 16:45:13
4010
原创 echarts实现双坐标系图形叠加展示
先看效果图实现步骤安装echarts， 实例化echartshtml代码 <div id="main" ref="chart" style="width: 100%;height: 400px"></div>vue 的data和mounteddata() { chart: null}, mounted() { this.chart = echarts.init(this.$refs.chart) }进行各项配置1. legend 自定义文字和图例
2022-04-14 11:23:23
2658
原创 vscode超实用插件-REST Client
背景：作为前端开发，经常需要进行接口调试，比如常用的postman。Rest client则是vscode推出的一款直接在vscode编辑器内就可以进行接口调试的插件。可以帮助我们快速在编辑器中进行接口调试，而无需新打开一个postman之类的窗口，这样的操作更加方便快捷。安装：vscode插件库搜索REST Client使用：通过创建以.http 或 .rest为结尾的文件，进行http请求，例如：携带请求参数注意：post传参数，一定要双引号，否则会报错一个文件内写多个请求(通过
2022-04-10 16:29:47
5473
1
原创 解决npm install报错
解决npm install报错a complate log of this run can be found in xxxx (‘name’)主要原因 npm版本过高，与项目版本不匹配npm install npm@6.14.10 -g然后清除之前安装的node_modules和npm缓存npm cache clean --force最后重新执行npm install...
2022-03-07 16:22:53
1183
原创 canvas基础使用
创建一个画布canvas<canvas id="canvas" width="400px" height="400px">浏览器版本过低</canvas>通过js实现基础绘画功能获取canvas并获取canvas上下文var c = document.getElementById('canvas')var ctx = c.getContext('2d')了解画图实现过程及基本语法ctx.beginPath() // 开始ctx.moveTo(x1, y1) //
2022-03-02 16:43:26
291
原创 node相关知识
/** * 为什么javascript可以在浏览器中被执行 -> js解析引擎 * * node是什么： * 基于Chrome V8引擎的js运行环境 * 内置API： * fs, http, path, js内置对象... * * 浏览器是js的前端运行环境，node是js的后端运行环境 * node中无法调用DOM, BOM, AJAX等api，因为node中没有这些内置api * * node中执行js * 命令： node 要执行的js文件路径 * *
2022-02-08 16:38:40
231
原创 uniapp开发知识点
/** * 创建uni-app项目 * HBuilder -> 文件 -> 新建项目 -> uni-ui项目 -> 创建 * * hbuilder中配置微信开发工具 * 1. 工具 -> 设置 -> 运行配置 -> 小程序运行配置 -> 传入小程序在电脑中的安装地址(eg: D:\Software\微信web开发者工具\微信开发者工具.exe) * 2. 打开微信开发工具 -> 设置 -> 安全设置 -> 开启
2022-01-28 17:38:01
386
原创 微信小程序开发知识点
/** * pages页面组成 * -- .js、.json、.wxml、.wxss * * app.json: 全局配置 * * WXML: 小程序的标签语言，用来构建小程序的UI结构，类似于HTML但是和HTML有所不同 * WXML和HTML区别 * 1.标签名不同 * HTML(div, span, img, a) * WXML(view, text, image, navigator) * 2.属性节点不同 * <a href="">
2022-01-27 15:08:11
378
原创 vite两大插件 实现按需引入vant
之前按照vant官网推荐按需引入的方法进行配置，但是一直在报错啊！！！vite.config.js中配置import styleImport from 'vite-plugin-style-import'plugins: [ vue() styleImport({ libs: [ { libraryName: 'vant', esModule: true, resolveStyle: (name) =>
2021-12-21 15:24:04
3359
6
原创 typescript快速入门
环境准备（安装typescript）npm install -g typescript1. 类型声明// 先声明变量，再赋值let a:numbera = 1// 声明变量的同时并赋值let b:string = 'b'// 声明不符合类型的变量let c:boolean = 1 // 此时c会提示不能将number类型的变量分配给boolean类型// 正确赋值方法let c:boolean = false// 函数参数变量定义 (?表示可以忽略不传)，最后的number
2021-11-02 16:24:40
309
原创 vite中如何使用sprites雪碧图
1. 安装相关插件这里是引用npm install --save-dev vite-plugin-spritesmithnpm install del -D // 根据个人需求看是否需要每次删除再进行安装2. 配置vite.config.jsimport Spritesmith from 'vite-plugin-spritesmith'import del from 'del'const resolve = (dir) => path.join(process.cwd(), di
2021-10-28 16:06:22
1650
原创 VUE版手写日历组件
开发背景常用日历组件可能满足不了我们自定义的多种需求（比如样式），因此通常情况下我们可能需要自己手动开发款日历，先上图开发流程1. 根据常用日历样式，我们template部分可以分为三部分（上下月及当前月份展示；周日至周六展示；主体日期展示三部分）1） template部分代码<div class="date"> <div class="header"> <span class="pre_month" @click="onPreMonth"></
2021-10-22 14:42:15
1466
9
原创 antv移动端F2环形图自定义样式---------增加圆角、颜色渐变、插入图片等
啥也不说，先看效果1. 安装npm install @antv/f2 --save2. 在使用图标的页面引入 import F2 from '@antv/f2'3. template中构建要渲染的容器（这里我循环渲染两个图形，通过动态绑定id区别要渲染的图）<div class="common_wrap data_wrap"> <div class="common_item item" v-for="(item, index) in 2" :key="index">
2021-10-21 11:39:52
3030
原创 vite太香了~react项目webpack迁移为vite，超详细过程
之前使用react + webpack模式开发时，项目结构多了之后，每次本地开发启动项目时，毫不夸张的说，大约都要30s左右，所以决定将webpack改为vite， vite的优势查看vue项目迁移为vite第一步搭建react + vite项目目录结构npm init vite@latest my-react-app -- --template react将原有react项目中package.json所用到的安装包，复制到vite搭建的项目中（下面简称vite），并复制src到vite中复制完
2021-10-15 09:41:15
2286
原创 antd 图片封装成binary文件
背景react中使用antd上传图片，我们都知道，如果组件中写了action则直接将图片file传到服务器，但是当后端要求我们使用binary文件格式传递时，我们该怎么做呢？首先去除action，使用beforeUpload<Upload maxCount={1} // 限制上传的文件个数 listType="picture-card" // 文件排列展示方式 fileList={fileList} // 上传的文件列表数据 beforeUpload={this.beforeUpload
2021-10-11 17:27:53
1953
原创 富文本编辑器在react中的使用----自定义图片上传
开发背景react + antd + wangeditor开发流程按装富文本编辑器npm i wangeditor --save页面中初始化编辑器容器componentDidMount() { this.initEditor ()}// 初始化编辑器initEditor = (content) => { const editor = new E('#editor') // jsx中创建id为editor的div容器 editor.config.height = 160 /
2021-10-11 16:39:08
482
原创 vue2项目将webpack迁移为vite，并使用svg, 完美解决所有bug
背景1. vite是跟随vue3诞生的一个工具，它让我们在开发环境中的效率大大提升，其原因是因为它省去了我们在开发环境中的打包过程（因为我们在实际开发环境中是不需要打包的，但是webpack却会去执行打包，大大降低了开发效率），将ES 模块源码直接传输给浏览器，浏览器使用自带的<script module> 进行解析支持2. 但是vite其实是基于vue3进行开发的，很多时候我们的老项目使用的都是vue2版本的，这个时候想要使用vite应该怎么做呢过程1. 通过vite创建vue项目n
2021-09-28 17:55:36
9591
5
原创 vue+node+socketio实现多人互动，并发布上线全流程
一、背景1. 前端使用vue + vuex + socket.io-clientnpm install socket.io-client --save-dev2. 后端使用node + express + socketio搭建node开发环境npm init -y安装所需依赖npm install express --save-devnpm install socket.io-client --save-dev二、 socket.io相关用法概览1. 发送事件socke
2021-09-26 11:04:51
874
2
原创 datePicker根据接口返回日期，展示是否禁用
业务场景： 根据接口返回决定 “规定天数内哪些日期” 禁用，其余日期可选择案例：接口返回数据如下，周一、二、三禁用，其余日期可选择data() { return { disableDate = [ {label: '周一', value: 1}, {label: '周二', value: 2}, {label: '周三', value: 3}, ], pickerOptions : {} }}created() { _this.pickerOptions =
2021-08-27 14:58:42
158
原创 vue打包优化dist文件过大，导致资源加载多、首页白屏问题
dist打包后经常遇到包过大，有的甚至超过10M等，这会导致我们项目在首次进入时，由于资源加载过多而导致页面白屏的情况，针对这种情况，我们可以对以下几个方便进行优化一、设置productionSourceMap在vue.config.js文件中，设置productionSourceMap为 false；表示生产环境不生成sorce map文件（source map 就是资源地图。其作用就是定位，用于定位浏览器控制台输出语句在项目文件的位置，以便于出现问题时快速找到问题位置。）module.export
2021-08-20 16:16:20
3308
原创 vue中将px单位转成rem
1.首先安装需要用到的包npm install px2rem px2rem-loader lib-flexible -S2.编辑build/utils.js 如图位置增加代码如果将remUnit设置为100，相对于750的设计稿那么总宽度就是( 750 / 100 ) = 7.5rem这里根据实际设计稿宽度定3.在main.js中引入包import 'lib-flexible/flexible'4.重启项目，此时可以看到px转化后的rem...
2021-08-06 10:26:57
1857
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人