追逐ぢ-CSDN博客

原创 vue国际化vue-i18n搭配i18n-ally实现多语言国际化

通过 i18n-ally 插件，我们可以更轻松地实现多语言国际化，提高应用程序的可用性和用户体验。希望这篇简易指南能够帮助你更好地使用 i18n-ally 插件，为你的应用程序增添多语言支持。i18n-ally 是一款 VS Code 插件，为开发者提供了一套强大而简便的工具，以轻松实现国际化（i18n）。本文将介绍如何使用 i18n-ally 插件，实现应用程序的多语言支持。首先，在 Visual Studio Code 中搜索并安装 i18n-ally 插件。一:安装vscode插件。

2024-09-10 19:27:55 406

原创 vue3+vite项目优化。

最近开发的一个vue3+vite+ts项目，build后发现体积过大，所以针对于项目体积进行一次优化。

2023-05-05 11:38:38 1507

原创微信小程序实现身份证识别-ocr

由于我们的业务是自定义上传图片识别出身份信息后进行对应的业务操作，所以采用自定义调用ocr api能力的方式来进行开发。项目中有一个识别身份证的需求，经过调研，最后决定使用微信小程序orc插件进行开发。利用van-uploader上传身份证图片后拿到file对象，调用api进行识别。这种方式可以进行扫描，并且可以支持上传身份证图片进行扫描。3:添加完后，需要领取免费额度，100次/天。ocr识别有两种方式，一种是按照官方文档。注意:如果没购买的话，调用会报错。2:在业务组件中引入插件。2:添加ocr插件。

2022-12-29 17:49:40 9437 7

原创主流跨域方式解析！

实现原理和nginx差不多，只不过这个代理服务器是我们自己编写实现自定义端口为8082的代理服务器，设置跨域cors响应头，请求转发给端口为80的无跨域处理服务器 ↓。

2022-09-01 17:51:33 806

原创使用nvm管理node npm 版本

nvm （node.js version management）是一个nodejs的版本管理工具。通过它可以安装和切换不同版本的nodejs。下面列出下载、安装及使用方法。因公司之前项目使用node和npm版本较低，而新项目所需node和npm版本较高，手动切换版本不是程序猿的做法，所以安装nvm来管理node版本。一：下载方法。首先切记，安装nvm之前全局卸载node,打开软件卸载程序卸载node(1) C:\Program Files (x86)\Nodejs(2) C:\P..

2022-04-29 17:41:28 2444

原创手摸手带你用宝塔部署前端项目。

宝塔Linux面板是提升运维效率的服务器管理软件，支持一键LAMP/LNMP/集群/监控/网站/FTP/数据库/JAVA等100多项服务器管理功能。有30个人的专业团队研发及维护，经过200多个版本的迭代，功能全，少出错且足够安全，已获得全球百万用户认可安装。运维要高效，装宝塔。本文使用阿里云服务器，其他服务器部署流程也大同小异。一:首先购买一台云服务器。这里操作系统我选择的是CentOS 7.5 ，此处需要注意，CentOs8+下载宝塔会有问题。并且进行重置服务器密码操...

2022-02-24 17:54:46 4940 2

原创 vue3.0+启动报错Error: Cannot find module ‘vue-loader-v16/package.json‘

最近在开发vue3项目中npm run serve 报错：原因是npm安装依赖的时候vue-loader-v16有部分资源需要科学上网才能下载下来，所以我们只需要使用国内镜像下载一次即可正常启动。cnpm i vue-loader-v16

2021-09-26 14:14:38 399

原创从零到一带你使用nginx部署vue项目到阿里云服务器

一:注册购买阿里云服务器。操作系统根据需要选择,我选择的是CentOs。二:下载xshell和xftp使用xshell连接服务器连接服务器成功三:安装nginxNginx是C语言开发，建议在 Linux 上运行，当然，也可以安装 Windows 版本，本篇则使用CentOS 7 作为安装环境。1:gcc 安装安装 nginx 需要先将官网下载的源码进行编译，编译依赖 gcc 环境，如果没有 gcc 环境，则需要安装：yum install gcc-c++2:PCRE pcre

2020-12-07 18:11:30 1424 1

原创 js文件下载兼容主流浏览器+ie10+标准版！

最近项目中有需求兼容到ie10,其中涉及到文件下载，奉上代码给大家分享一下。如有不对之处，请多指教。之前是采用a.click方式来执行下载，但是在windows7 - ie10上下载无反应，后面才写的以下方式。download.js 如下import util from "@/js/util";function download(url, filename, responseBlod) { // responseBlod 没有文件名情况下传入"bold"自动读取response响应头数

2020-10-14 15:38:50 722 2

原创 antv/f2开发仪表盘！

最近开发了一款类似于支付宝财富的h5项目，内嵌App中，项目使用的是react+hook+typescript , 需求中基金详情页面需要仪表盘类型的效果，前期经过调研最终选择antv/f2,奉上链接：https://f2.antv.vision/zh先放上效果图，给大家分享一下思路。需求分解1:首先需要最外层刻度270度半圆弧2:其次需要270度内圆渐变半圆弧最开始的想法是在f2生态圈中找找类似的效果因为f2生态资源不是很丰富，所以后面就自己从0开始了。1:首先循环出最...

2020-05-14 16:40:50 1649

原创 redux-persist管理redux, 解决刷新react-redux数据丢失！

在我们实际开发react项目中可能有某些需求需要持久化报错redux里面的数据，比如登录状态，这时候就可以用到redux-persist 这款插件解决这个问题，它的原理是使用sessionstorage来持久化数据。1：安装redux-persist这款插件npm install redux-persist --save//yarn add redux-persist...

2019-12-25 13:39:17 3813 2

原创使用create-react-app搭建项目运行start启动报错解决办法！

开发过程中运行项目报以下错误,当前webpack版本超前。There might be a problem with the project dependency tree.It is likely not a bug in Create React App, but something you need to fix locally.The react-scripts pac...

2019-12-09 15:12:33 1077 1

原创 TypeScript类型怎么写？

* 1.1 ts 如何声明一个boolean, number, string类型的值 */// 在js中，定义 isFlag 为true, 但是后面还可以重新给它赋值为字符串，而ts中就不行，同理，声明number, string 也一样let bool: boolean = true;// 会报错：不能将类型“"str"”分配给类型“boolean”。// isFlag = "st...

2019-11-04 15:33:00 1904

原创 js排序算法集合

一:快速排序1：先从数列中取出一个数作为“基准”。2：分区过程：将比这个“基准”大的数全放到“基准”的右边，小于或等于“基准”的数全放到“基准”的左边。3：再对左右区间重复第二步，直到各区间只有一个数。var quickSort = function(arr) { //快速排序 if (arr.length <= 1) { return arr; } var pi...

2019-09-20 10:47:20 457 1

原创 vue-cli3.0项目与安卓ios交互。

由于公司项目需要，所以使用vue开发了一款内嵌原生app的H5项目。接下来把开发之中的坑给大家分享一下。H5页面整体就不细述，着重于与原生端的交互上。业务逻辑：基本逻辑就是H5项目内嵌原生app 原生端通过点击入口按钮进去H5页面 > H5页面调用原生方法拉取用户登录信息,如果用户未登录，调用原生login方法跳转登录页面，原生端登录完...

2019-09-12 15:14:47 1453

原创 vscode vue settings.json 代码格式化配置！

{ // 換行 "editor.wordWrap": "on", // 代码缩进修改成2个空格 "editor.tabSize": 4, // 不檢查縮進，保存后統一按設置項來設置 "editor.detectIndentation": false, //保存的时候自动格式化 "editor.formatOnSave": true,...

2019-08-27 09:45:17 2452

原创递归组件实现Element树形Menu菜单

分享一波动态生成侧边栏并且着重分享一个大坑！1：模拟菜单数据（开发情况下获取后台数据）const menuList = [ { title: '首页', key: '/home', icon: 'el-icon-s-home' }, { title: '表单', key: '/for...

2019-08-08 13:35:02 4652 3

原创 React-Redux实现计数器案列!

首先复习一下redux和vuex的区别Redux，本身就是一个单纯的状态管理者，我们不追溯它的历史，从使用角度来说：它提供一个全局的对象store，store中包含state对象用以包含所有应用数据，并且store提供了一些reducer方法。这些方法可以自定义，使用调用者得以改变state的值。state的值仅为只读，如果需要更改则必须只能通过reducer。VUEX，吸收了Redux的...

2019-08-06 15:09:45 306

原创 window安装mongodb后利用bat文件启动mongodb

实在太方便了给各位分享一波一：首先页面新建文本文档二：输入内容路径自行更改三：点击另存为桌面mongo.bat文件四：双击bat文件即可打开mongodb...

2019-07-24 10:26:42 943

原创 css+js实现文字向上无缝轮播！

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...

2019-07-23 15:32:04 552

原创 javascript 使用小技巧！

1. 短路求值使用三元运算符可以很快地写出条件语句，例如：let res = 100 == '100' ? 'yes' : 'no' // 'yes'let res = 100 === '100' ? 'yes' : 'no' // 'no'但有时候三元运算符仍然很复杂，我们可以使用逻辑运算符 && 和 || 来替代，让代码更简洁一些。这种技巧通常被称为“...

2019-07-23 14:25:29 117

原创 js实现点击下划线跟随的效果！

闲来无事，写了一个小demo,练一练许久没写的原生js，具体实现上代码<template> <div class="container"> <div class="content manpower"> <ul class="react-sticky" id="oul"> ...

2019-07-23 10:27:06 1507 1

原创手摸手！带你搭建react移动端项目环境。

最近有需求,需要开发一套react的webapp项目。所以自己搭建一套环境。具体如下一：react项目构建使用脚手架：create-react-app 执行以下命令搭建项目npm install -g create-react-appcreate-react-app my-appcd my-appnpm start创建后的结构如下。此处注意！...

2019-07-17 14:10:11 3364 1

原创 echarts图表如何友好的展示在移动端中！

最近接到新的需求要把现有的后台管理系统驾驶舱，挑出关键性的数据展示在移动端设备中在开发过程中遇到的一些问题给大家分享一下。1:如下图所示当X轴的文字块数量较多的时候在移动端就会出现显示不完全的问题给用户不好的体验。我的思路是当内容过多我只显示第一个和最后一个文字块。这三个属性就是控制显示最大数和最小数其中interval是控制间距的但这样又会出现上上图的...

2019-07-16 11:10:18 2850

转载程序员必备网站！

MDN开发者文档：https://developer.mozilla.org/zh-CN/菜鸟教程：https://www.runoob.com/W3CSchool：http://www.w3school.com.cn/JavaScript教程网：https://zh.javascript.info/一行代码搞定bug监控：https://www.fundebug.com/?tdsourc...

2019-07-09 10:16:36 350

原创 element表格内嵌进度条实现

<template> <div class="table-demo"> <el-table :data="tableData" :header-cell-style="{background:'#DCDFE6'}" border style="width: 100%" > <...

2019-06-18 11:23:05 7366 1

原创 vue 实现 echarts 日历坐标系

前段时间有需求做echarts 图表的日历坐标系，于是就基于日历坐标系来探讨一下。1：npm install echarts //安装echarts这里说到一点官方很多echarts图表实例不全直接拷贝下来会发现无法使用且日历坐标系与其他的echarts图表有所不同运用到vue中涉及很多this指向的问题2：mian.js挂载到全局上import echarts ...

2019-06-18 08:58:27 2159 2

原创手撸数据双向绑定！

一：通过Object.defineProperty实现效果也就是Vue的数据双向绑定原理<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input ...

2019-05-31 14:14:45 252

原创记vue生成二维码

纯纯的Javascript版，不依赖任何第三方包，就可以轻松地生成二维码了，支持各种自定义，可以通过自定义颜色生成各种漂亮的、有个性的二维码。1:npm安装$ npm install qrcanvas2. 在用的页面引入import { qrcanvas } from 'qrcanvas';3:html (tepmlate)<div id="qrcode" >...

2019-05-24 13:55:50 3200 2

原创不为人知的Javascript.........................

当我开始学习JavaScript时，我把我在别人的代码、code challenge网站以及我使用的教程之外的任何地方发现的每一个节省时间的技巧都列了一个清单。在这篇文章中，我将分享11条我认为特别有用的技巧。这篇文章是为初学者准备的，但我希望即使是中级JavaScript开发人员也能在这个列表中找到一些新的东西。1..过滤唯一值Set对象类型是在ES6中引入的，配合展开操作...一起...

2019-05-24 08:43:00 442

转载前端实际开发中可能遇到的问题集锦......

参考：https://segmentfault.com/a/1190000019022842页面两个div之间有一个小margin，样式怎么改都去不掉解决：html中div换行了，把两个div放到同一行可以解决，还有一种好办法就是使用flex。app上点击有背景解决：全局添加样式-webkit-tap-highlight-color: rgba(255, 255, 255, 0);...

2019-04-30 08:35:41 5806

原创 react虚拟DOM

虚拟DOMReact为啥这么大？因为它实现了一个虚拟DOM（Virtual DOM）。虚拟DOM是干什么的？这就要从浏览器本身讲起。如我们所知，在浏览器渲染网页的过程中，加载到HTML文档后，会将文档解析并构建DOM树，然后将其与解析CSS生成的CSSOM树一起结合产生爱的结晶——RenderObject树，然后将RenderObject树渲染成页面（当然中间可能会有一些优化...

2019-04-23 13:49:17 151

翻译 node-sass 安装失败的原因及解决办法

npm install 时偶尔遇到报错：没有安装python或node-sass 安装失败的问题，百度之后发现是被墙了，但根据百度的方法换了淘宝镜像和用了vpn都安装失败，最后发现原来是因为没有卸载之前安装失败的包导致的。作者本人最后的解决方案是npm uninstall node-sass，然后使用VPN重新安装了一遍就成功了。不能翻墙的同学请看下文node-sass 安装失败的原因np...

2019-04-23 11:33:36 7331

转载移动端常见兼容性问题集合

参考：https://www.open-open.com/lib/view/open1449325854077.html随着手机的普及，移动端的开发也成了一个重要的方向，但由于设备的不统一会造成一些兼容性问题，1、安卓浏览器看背景图片，有些设备会模糊。用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？经过研究，是devicePixelRatio作怪，因为手机分辨率太...

2019-04-19 08:26:23 1704

翻译 less开发常用知识点总结

一：变量1.1 变量概述：变量通过为你提供在同一个地方管理这些值的方法让你的代码变得更容易维护：// 变量@link-color: #428bca; // sea blue@link-color-hover: darken(@link-color, 10%);// 用法a,.link { color: @link-color;}a:hover { ...

2019-04-15 13:50:59 348

翻译解释forEach、filter、map、some、every、find、reduce间的区别

从最开始学的for循环遍历方法，到后来层出不穷的各种遍历方法，其实最大的区别就是应用场景的不同。我们最需要记住的就是，什么情况下用哪一种方法比较合适。从挑土豆开始这里有一堆土豆，如果换成代码，可以表示如下：var potatos = [{ id: '1001', weight: 50 },{ id: '1002', weight: 80 },{ id: '1003', we...

2019-04-12 09:20:53 882

原创记vue中如何使用better-scroll滚动插件

这款插件是基于iscroll插件做的重新封装，改善了一些bug，增加了一些拓展功能，有兴趣的小伙伴们可以自行下载体验体验。很多人已经用过 better-scroll，我收到反馈最多的问题是：better-scroll 初始化了，但是没法滚动。不能滚动是现象，我们得搞清楚这其中的根本原因。在这之前，我们先来看一下浏览器的滚动原理：浏览器的滚动条大家都会遇到，当页面内容的高度超过视...

2019-04-11 16:03:21 842

原创使用http-server配置在本地开启http服务器

搭建本地服务器运行项目1.简介:http-server是一个简单的零配置命令行http服务器。它对于生产使用来说是足够强大的，但它的测试，本地开发和学习足够简单易用。2.安装：安装通过npm：进行全局安装npm install http-server -g这将http-server全局安装，以便它可以从命令行运行。3.使用：打开cmd，移动进入当前文件夹，在当前文件夹内输...

2019-04-09 09:58:41 921

原创无痕刷新

最近遇到一个需求，需要刷新当前页面来更新数据，网上找了很多方法，在这里做个总结。这里主要记录三种方法，分别是：强制刷新、伪造刷新、无痕刷新。强制刷新window.location.reload()，原生 js 提供的方法；this.$router.go(0)，vue 路由里面的一种方法；这两种方法都可以达到页面刷新的目的，简单粗暴，但是用户体验不好，相当于按 F5 刷新页面，页...

2019-04-08 08:25:31 1242