关注
分享
所有的知识最终都应该应用到项目中才能获得价值，当然，在项目中也会发现自己的知识还存在很多欠缺的地方，所以本专栏主要记录一些在实际项目开发中遇到的问题及其解决方案。
不开花的玫瑰
放荡不羁，瑀瑀独行。
展开
-
PC调试手机上APP的多种方式
与Web端调试相比，移动端调试似乎有很大难度，之前尝试过使用alert，页面引入vconsole的方式，最近又发现了其他更加方便的调试，顺道整理下来。1.Chrome浏览器Inspect调试1）在x5内核下，访问debugx5.qq.com/，点击信息，勾选 ‘打开TBS内核Inspector调试功能’；2）手机打开开发者模式，允许USB调试；3）谷歌浏览器地址栏输入：chrome://inspect/#devices，下方可以看到4）在可以翻墙的基础上，点开inspect，就可以看到自己的界面以原创 2020-12-11 19:48:20 · 3003 阅读 · 0 评论 -
Mac本地向服务器（经跳板机）上传文件的多种方案
在项目开发的过程中，偶尔会遇到需要手动把本地的文件上传到服务器的情况，本次整了一下上传的多种方案，做一下总结。1.Mac下可以使用rz和sz由于服务器的登陆需要经过跳板机，所以采用rz和sz的方式，但是需要自己配置，具体配置过程可以参考：我是可以点击的哦，但是在安装ruby时，耗费的时间巨长，而且可能由于网络的原因会安装失败。2.可视化工具YummyFTP或FileZilla需要知道服务器的用户名密码及端口3.fis3【需要服务器支持】1)安装低的Node版本，如6.10.02)安装fis3：原创 2020-11-28 20:42:54 · 2304 阅读 · 0 评论 -
HTML页面通过iframe嵌套Vue项目
之前都是在Vue项目中通过iframe嵌套外部写好的HTML页，但是最近接触了一个需求，是需要在HTML页面中嵌入Vue项目。Vue项目打包完成之后会形成一个包含所有静态资源的文件夹，点击HTML页可以运行（后端解决的跨域），现在需要新建一个test.html页去嵌套Vue打包后形成的HTML页，在test.html中有几个input框，输入完成之后点击搜索按钮，Vue项目会显示出来，同时请求了后端接口数据进行显示（接口是在Vue项目中请求的，参数是通过window.location.href获取的）。原创 2020-11-22 22:40:09 · 3967 阅读 · 4 评论 -
bug修复---同时触发mousedown事件和touchstart事件
这两天遇到一个bug，每次点击下方键盘时，点击一次数字，文本框中会出现两次重复值，如下所示：而且console中还有以下报错信息：查看项目代码，代码如下：<ul> <li v-for="(item, index) in keys" :key="index" v-html="item.name" @mousedown="handleKeyboardClick(item.val, index)" @touchstart="handleKey原创 2020-11-20 20:21:03 · 2181 阅读 · 1 评论 -
使用icomoon引入字体图标及扩充字体图标的方法
何为字体图标？在说字体图标之前，我们先说一下图片，图片可能让我们的界面更加美丽，但是图片也是有缺点的，比如图片会增加总文件的大小，还会增加额外的HTTP请求，这都会降低网页的性能的。更重要的是图片不能很好的进行缩放，因为放大和缩小可能会使图片失真，所以我们就开始使用字体图标。字体图标可以做出跟图片一样的事情，但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等，而且本身体积更小，但携...原创 2020-05-03 11:16:32 · 2197 阅读 · 3 评论 -
Vue项目优化：从3.19MB到684KB的优化之路
前言项目优化是我们前端开发人员必备的技能，本文以Vue项目为例，详细阐述优化的过程，看看如何使文件大小从3.19MB缩小到684KB，同时欢迎大家提出自己的优化方案。项目技术栈阐述本项目采用Vue前端框架、ElementUI组件库优化之前优化步骤1.新建vue.config.js，添加main-dev.js、main-prod.js文件，设置不同的入口文件利用Webpack打包...原创 2020-05-05 21:21:13 · 901 阅读 · 0 评论 -
前端项目通过Jenkins部署并持续构建的方法
前言项目在测试以及最终上线的时候，都需要部署到服务器上来供大家访问，但是无论是测试还是线上，都避免不了代码的修改，那么可以持续构建就方便了许多。项目发布流程1）Jenkins创建任务2）服务器上配置NginxJenkins创建任务1）登录Jenkins，创建新任务 2）输入任务名称，选择自由风格软件项目，同时也可以复制已经存在的项目3）开始进行项目配置了到这里，选择保存之后就可以看到自己新建的任务了，Jenkins上的配置也就告一段落了。服务器上配置Nginx1）连接原创 2020-05-20 14:45:12 · 577 阅读 · 0 评论 -
ElementUI对于表格的二次封装
前言最近在做的项目中，有大量界面用到了表格(el-table)组件，但是里面具体显示的内容不同，是从后端获取过来的，如果每一个界面写一下el-table的代码的话，会造成代码量大且不易维护的后果，所以就对el-table表格进行了二次封装。过程先看一下最终效果代码实现1.抽出来的子组件的代码：<template> <div> <!-- 表格部分 --> <el-table :data="tableData" stripe border原创 2020-06-14 21:10:43 · 2910 阅读 · 4 评论 -
ElementUI自定义修改列的内容（一列显示多个文本）
背景ElementUI组件库中的表格，每一列默认只能显示一个文本，但是在项目需求中，需要一列显示两个文本内容，如下图所示：这样应该如何实现呢？????方式一：render-headerElementUI中暴露了render-header属性，我们可以使用这个属性来实现这个功能。<el-table-column prop="address" label="地址" :render-header="renderHeader"></el-table-column>method原创 2020-05-28 21:27:11 · 2194 阅读 · 0 评论