- 博客(103)
- 收藏
- 关注
RSS订阅原创 Tauri 实战总结 系列二（窗口定制）
Tauri 生成的窗口顶部会有默认的标题栏，默认的效果有时候不符合我们项目需要，接下来我们来实现下如何自定义标题栏。
2023-01-02 18:58:39
2448
1
原创 JS 中数组、树常用方法总结
数组数组转树/** * 数组转树-递归版本 * @param list * @param pid * @returns {*[]} */export function listToTree (list, pid = -1) { const tree = [] for (let i = 0, total = list.length; i < total; i++) { const item = list[i] if (item.pid === pid) {
2021-10-04 11:57:06
324
原创 Verdaccio npm 私服配置总结
前言npm 私服，我想是每个团队都会实践经历的一个阶段。实现私有 npm 的方式有很多，例如 nexus、NPM Org 、Verdaccio 等。综合对比下来， Verdaccio 配置简单，易上手，是目前（2021年）极力推荐的私服搭建工具。Verdaccio 是什么？官网：https://verdaccio.org/zh-cn/Verdaccio 是一个 Node.js创建的轻量的私有npm proxy registry安装、启动Verdaccio 的安装启动过程较为简单。首先是全局安
2021-08-07 17:58:41
6370
原创 Brotli 运用实践总结
介绍Brotli 是 Google 推出的开源压缩算法，通过变种的 LZ77 算法、Huffman 编码以及二阶文本建模等方式进行数据压缩，与其他压缩算法相比，它有着更高的压缩效率，性能也比我们目前常见的 Gzip 高17-25%，可以帮我们更高效的压缩网页中的各类文件大小及脚本，从而提高加载速度，提升网页浏览体验。需要说明的是 Brotli 压缩只在 https 下生效，因为 在 http 请求中 request header 里的 Accept-Encoding: gzip, deflate 是没有
2021-05-25 09:30:24
3507
2
原创 Ant Design Vue 实现左右树穿梭框
Ant Design Vue 实现左右树穿梭框最近碰见一个需求，要实现权限树左右树穿梭的功能。Ant Design Vue 官网中有穿梭框 Transfer 组件，但提供的示例是左侧是树，右侧则是平铺列表。只能在其基础上进行修改实现了。效果图Options API 实现新建文件 options-transfer.vue<template> <a-transfer :data-source="dataSource" :target-keys="targetK
2021-05-21 09:34:49
7966
21
原创 Vite 2.0 配置总结
Vite 2.0 配置总结GitHub 仓库地址：https://github.com/vitejs/viteVite 官网地址：https://cn.vitejs.dev/1. 环境变量配置项目根目录新建，.env.production.env.developmentNODE_ENV=development VITE_APP_WEB_URL=YOUR WEB URL.env.productionNODE_ENV=production VITE_APP_WEB_URL=
2021-03-15 21:31:56
11646
原创 Vue 3.0 项目中集成腾讯云TRTCCalling
2021年1月1日，祝大家新年快乐！大吉大利！2020年疫情原因，在线直播、实时音视频技术也更加火热起来。公司项目业务中也有需要音视频的地方。技术选型使用了腾讯云TRTCCalling，以下展示在Vue 3.0 项目中如何配置使用。在线demo地址：https://wkl007.github.io/trtc-calling-webGitHub地址：https://github.com/wkl007/trtc-calling-web1. 安装依赖yarn add tim-js-sdk trtc-cal
2021-01-01 13:03:45
2561
7
原创 Vue 3.0 + Three.js 学习总结
Vue 3.0 + Three.js 学习总结最近在学习Three.js相关的技术，恰逢Vue 3.0正式版也已推出。现总结一下在Vue 3.0 + TypeScript中如何使用Three.js，如有不足，望在评论区说明。项目使用Vue 3.0+ TypeScript+Ant Design Vue搭建。使用Options API与Composition API两种方式来使用Three.js。最终展示效果如图：Options API<template> <div id="th
2020-11-10 21:23:43
2452
原创 前端上传文件到金山云存储
前端上传文件到金山云存储获取签名封装方法使用运行结果获取签名上传文件之前公司文件都是用的腾讯云或阿里云的对象存储，现在有个项目甲方要使用金山云存储。在网上找了一下，暂时没有踩坑文章，现记录总结一下。目前在项目中使用POST Object的方式上传，相关文档参考：对象存储(KS3)POST Object-金山云获取签名import request from '@/utils/request'export default class CommonServer{ // 获取金山云上传签名 st
2020-07-30 10:42:08
985
15
原创 Ubuntu 20.04安装配置Nexus
Ubuntu 20.04安装配置Nexus介绍Nexus Repository Oss是什么？支持的工具列表准备安装开启启动修改启动JDK版本(可选)修改默认端口（可选）开始使用参考链接介绍Nexus Repository Oss是什么？官网简介:The free artifact repository with universal format support.包存储仓库的免费工具，可以用来存储jar, docker, npm等软件包，也可以存储其他文件格式，不依赖mysql等，下载包可直接运
2020-06-21 12:21:09
2195
原创 Ubuntu 20.04安装配置GitLab
Ubuntu 20.04安装配置GitLab介绍GitLab CE或Community Edition是一个开源应用程序，主要用于托管Git存储库，以及其他与开发相关的功能，如问题跟踪。它旨在使用您自己的基础架构进行托管，并为您的开发团队提供部署内部存储库的灵活性，与用户交互的公共方式，或者为贡献者提供托管自己项目的方法。GitLab项目使用简单的安装机制在您自己的硬件上设置GitLab实例变得相对简单。在本指南中，我们将介绍如何在阿里云Ubuntu 20.04服务器上安装和配置GitLab。前提条
2020-06-20 20:00:53
22236
1
原创 Git 修改 commit 作者信息
Git 修改 commit 作者信息问题在家和办公室使用不同的git name跟email，结果commit的时候忘记修改配置导致commit的个人名称跟邮箱都不对了。解决方法修改 git 配置git config --global user.email "[email protected]"git config --global user.name "your name"但是补救措施只对以后的 commit 起效, 如果想修改之前的作者信息，Github 给出了官方指南：Changin
2020-05-30 10:26:19
1416
原创 Vue中使用animate.css V4
Vue中使用animate.css V4最近把公司官网项目依赖进行了升级，里面用到了animate.css。目前版本4.1.0。目前4.x版本相比之前3.x的breaking change如下：Animate.css v4 brought some improvements, improved animations, and new animations, which makes it worth upgrading. But it also comes with a breaking change
2020-05-29 12:45:14
4202
3
原创 wangEditor 实现上传图片到阿里云OSS
wangEditor 实现上传图片到阿里云OSS最近做了一个后台管理系统，里面用到了wangEditor富文本编辑器。里面实现了图片上传到阿里云OSS的功能，现总结一下用法。新建oss.js文件import { OSS_URL } from '@/utils/constants'import CommonServer from '@/api/common'import axios fro...
2019-12-20 11:44:13
3607
6
原创 Linux 配置 oh-my-zsh 总结
文章目录Linux 配置 oh-my-zsh 总结oh my zsh安装 zsh安装 oh my zsh配置 oh-my-zsh关于主题关于插件incrautojumpzsh-autosuggestionsautoswitch_virtualenvzsh-syntax-highlighting参考文章Linux 配置 oh-my-zsh 总结oh my zshshell的类型有很多种，lin...
2019-10-29 20:21:53
3106
原创 在前端项目中使用Git Hooks
在前端项目中使用Git Hooks具备基本工程素养的同学都会注重编码规范，而代码风格检查（Code Linting，简称 Lint）是保障代码规范一致性的重要手段。使用 Lint 会有什么好处呢？在我看来至少具有如下 3 点：更少的 Bug更高的开发效率，Lint 很容易发现低级的、显而易见的错误更高的可读性很多时候我们lint的校验是放在持续集成阶段，大概流程如下：代码提交 ...
2019-05-10 14:56:48
2939
4
原创 Taro开发总结
文章目录Taro开发总结数据请求库封装利用Decorator快速实现小程序分享封装UIcon组件封装HtmlParse组件分环境打包项目打包压缩配置alias配置Taro开发总结之前做小程序一直用的mpvue，用了一段时间发现mpvue有一些诟病，而且现在官方的维护力度显得力不从心。相比之下Taro做的就相当不错。现总结一下在使用Taro中各种奇技淫巧。目前使用Taro版本1.2.26数据...
2019-05-10 10:26:06
5062
原创 微信小程序吸底区域适配iPhone X
微信小程序适配iPhone X主要针对fix定位到底部的区域，比如详情页或购物车底部的按钮栏，会与iPhone X的Home Indicator横条重叠，这样在点击下方按钮时很容易误触发手势操作，如下图：mpvue中适配方法：1.获取设备信息/** * 获取设备信息 * @returns {Promise&lt;any&gt;} */export function wechatGe...
2019-03-06 15:32:23
9045
3
转载 ES6、ES7、ES8知识点
概述ES全称ECMAScript，ECMAScript是ECMA制定的标准化脚本语言。目前JavaScript使用的ECMAScript版本为ECMAScript-262。ECMAScript 标准建立在一些原有的技术上，最为著名的是 JavaScript (网景) 和 JScript (微软)。它最初由网景的 Brendan Eich 发明，第一次出现是在网景的 Navigator 2.0 ...
2019-01-08 14:46:18
1199
原创 vue-cli 3.0 配置
最近上手试了试vue-cli(v3.0.0-rc.5)，小结一下1.环境变量相关在一般项目中我们针对不同的开发环境会配置不同的环境变量：开发环境（development）测试环境(production)发布环境（release）1.在项目根目录下新建三个文件：.env.development，.env.production，.env.release//.env.de...
2018-07-18 15:48:30
6811
4
原创 mpvue开发小程序小总结
最近用mpvue开发了一个小程序，现总结一下碰见的问题及解决方案1.项目中数据请求用到了fly.io，封装成request.js如下：import wx from 'wx'import Fly from 'flyio'import store from '../store/index'const fly = new Fly()fly.config.baseURL = proce...
2018-07-09 10:26:30
1404
2
原创 react-native-splash-screen 3.0.7配置使用
最近在把之前写的一个react-native项目升级到最新版本，项目中使用了react-native-splash-screen。在最新版本的react-native-cli中按照文档配置导致报错。主要是gradle版本太低的问题，现总结一下： 源码：reactSplashDemo 1.先查看版本（截止到2018.6.7）...
2018-06-07 17:38:00
764
原创 create-react-app配置总结
&amp;amp;amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;a
2018-05-31 09:43:54
15544
7
原创 vue分环境打包
在项目开发中，我们的项目一般分为开发版、测试版、Pre版、Prod版。Vue-cli的默认环境一只有dev和prod两个，之前每次要发布测试版或Pre版都是修改了源码中API地址后打包，这样很麻烦。如果能根据不同环境打包就完美了。代码如下：1.config/prod.env.js文件修改如下：'use stri...
2018-04-22 14:37:56
1492
原创 vue 微信分享至朋友圈&&分享至朋友代码封装
1.新建share.js文件import {shareSDK} from "../api/common";//分享apiimport wx from 'weixin-js-sdk'export const shareTitle = '测试';export const shareUrl = '测试连接';export const shareImg = '测试图片';export co...
2018-04-01 17:20:05
4735
5
原创 vue移动端微信授权登录插件封装
1.新建wechatAuth.js文件const queryString = require('query-string')//应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息）const SC...
2018-03-29 15:40:45
19923
35
原创 React Native中集成友盟统计的功能
1.集成准备首先我们需要到友盟官网申请一个开发者账号。然后创建一个应用并获取appkey。2.集成SDK获取到appkey之后呢，我们接下来就来集成集成SDK。Android友盟支持AndroidStudio的Gradle配置，所以我们用AndroidStudio打开React Native项目根目录下的android目录如图： 然后在/android/app/bui...
2018-02-08 16:05:47
1953
原创 react native中引入antd-mobile
1.安装antd-mobile与babel-plugin-importyarn add antd-mobile react-domyarn add --dev babel-plugin-import2.编辑 .babelrc{"plugins": [["import", { "libraryName": "antd-mobile" }]]}3.使用import Rea
2018-01-30 17:01:40
3850
原创 react-native学习笔记
1.安装1.jdk安装 http://blog.csdn.net/siwuxie095/article/details/53386227 环境变量配置 变量名: JAVA_HOME 变量值: D:\Java\JDK\jdk 变量名: CLASSPATH 变量值: .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\
2018-01-29 15:56:48
325
原创 js下载base64格式的图片
直接看代码 //下载图片 download() { let imgData = 'data:image/png;base64,iVBORw0KGgoAAAANSUh........'; this.downloadFile('测试.png', imgData); }, //下载 downloadFile
2018-01-18 11:42:07
23982
11
原创 vue项目中实现扫码功能
最近在项目中碰见一个打开摄像头扫码的功能，项目最后打包成app，用的是hBuilder打的包，刚好hBuilder打包集成H5+sdk,就可以直接用人家的sdk了。 demo地址：vue-scan-demo 以下是代码实现：&amp;lt;template&amp;gt; &amp;lt;div class=&quot;scan&quot;&amp;gt;
2018-01-02 14:49:02
51156
85
原创 Koa搭建本地测试服务器
1.在项目根目录安装koa、koa-routernpm install --save-dev koa koa-router2.新建server.js文件const Koa = require('koa');const Router = require('koa-router');const app = new Koa();const router = new Router();//首页————广
2018-01-02 12:07:16
2246
原创 对Fetch进行简单的二次封装
新建HttpUtils.jslet qs = require('qs');export default class HttpUtils { static get(url) { return new Promise((resolve, reject) =&gt; { fetch(url, { credentials: 'include', header
2018-01-01 10:12:44
1457
原创 封装简单的axios库
1.新建http.js文件，封装axios get post 方法import axios from 'axios'import qs from 'qs'import 'es6-promise'axios.defaults.baseURL = '/api';export function get(url, params) { return new Promise((reso
2017-12-15 09:38:07
6112
8
原创 react学习笔记
最近几个月自己一直是用vue做项目，深感自身知识面有些匮乏，遂开始学习react。一下记录下自己在学习中的一些知识点及注意事项。1.create-react-app脚手架在package.json文件中设置proxy代理"proxy": { "/api": { "target": "http://localhost:8080" } }
2017-12-05 17:48:39
324
原创 解决vue-cli npm run build之后vendor.js文件过大的问题
问题&amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;nbsp;vue-cli npm run build命令默认把dependencies中的依赖统一打包，导致vendor.js文件过大，出现首屏加载过于缓
2017-11-22 09:15:54
24506
25
原创 JavaScript ES6中export及export default的区别
相信很多人都使用过export、export default、import，然而它们到底有什么区别呢？ 在JavaScript ES6中，export与export default均可用于导出常量、函数、文件、模块等，你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用，但在一个文件或模块中，export、import可以有多个，e
2017-10-19 10:33:24
1689
原创 在Vue项目中使用easyScroll滚动条插件
插件github地址：https://github.com/GarveyZuo/EasyScroll/1.插件采用jsx语法，使用前需要安装vue-jsx插件：npm install\ babel-plugin-syntax-jsx\ babel-plugin-transform-vue-jsx\ babel-helper-vue-jsx-merge-props\ babel-pre
2017-09-20 16:21:04
13205
2
原创 微信小程序图片链接加入正常，控制台报404错误解决方案
代码如下<image class="head-img" src="{{movie.movieImg}}" mode="aspectFill">控制台报错如下错误原因及解决方案错误出现的原因就是初始的时候image中url没有值，导致src=" http://178867013.debug.open.weixin.qq.com/pages/movies/movie-detail/movie-detai
2017-08-31 15:28:28
10540
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人