- 博客(40)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 檢測項目簡體字
可在項目package.json 配置scripts，方便執行。它就能把項目中的簡體字找出，並且告訴你他對應到繁體字。在項目根目錄創建 st.config.json 文件。某些項目可能要求代碼中不允許使用簡體字。安裝stcheck檢查。
2023-10-26 16:30:07
428
原创 react-router-dom 实用技巧及3种传参方式
在传统网站中，浏览器从 Web 服务器请求文档，下载并评估 CSS 和 JavaScript 资源，并呈现从服务器发送的 HTML。当用户单击链接时，它会在新页面上重新启动该过程。客户端路由允许您的应用程序通过链接点击更新 URL，而无需从服务器再次请求另一个文档。相反，您的应用程序可以立即呈现一些新的 UI 并发出数据请求，以fetch使用新信息更新页面。这可以实现更快的用户体验，因为浏览器不需要请求全新的文档或重新评估下一页的 CSS 和 JavaScript 资源。
2023-09-12 22:12:17
376
原创 redux中间件的简单讲解
数据源 --------> 中间件 --------> 中间件 --------> 中间件 --------> 目标数据。中间做各种处理，有利于程序的可拓展性，通常情况下，一个中间件就是一个函数，且一个中间件最好只做一件事情。如果你执行的是异步操作 你在触发action的时候 给我传递一个函数 如果执行的是同步操作 就往下执行。当前这个中间件西数不关心你想执行什么样的异步操作 只关心你执行的是不是异步操作。异步操作代码要写在你传递进来的函数中。
2023-09-09 22:36:21
545
原创 规范化 Redux 使用
reducers 文件夹下创建 root.reducer.js 文件, modal.reducer.js 文件、todoList.reducer.js 文件。store 文件下 创建 actions 文件夹，并创建 modal.actions.js 文件。store 文件下 创建 const 文件夹，并创建 modal.const.js 文件。src 目录下 新建 store 文件夹，并创建 index.js 文件。创建 TotoList.js、 Modal.js 两个文件。
2023-09-09 22:35:05
388
原创 react-redux 的使用
它使得你的 React 组件能够从 Redux store 中读取到数据，并且你可以通过。组件，这使得 Redux store 能够在应用的其他地方使用。去更新 store 中的 state。React Redux 包含一个。放在了全局的组件可以够得到的地方。方法，可以将方法映射组件。最后指定要映射的组件。
2023-09-09 22:33:52
314
原创 React16入门到入土
README.md:这个文件主要作用就是对项目的说明。: 这个文件是webpack配置和项目包管理文件。：这个文件用一句话来解释，就是锁定安装时的版本号，并且需要上传到git，以保证其他人再时大家的依赖能保证一致。gitignore: 这个是git的选择性上传的配置文件。:这个文件夹就是我们项目的依赖包。public：公共文件，里边有公用模板和图标等一些东西。src： 主要代码编写文件index.js: 这个就是项目的入口文件index.css：这个是index.js里的CSS文件。
2023-09-05 10:50:32
858
原创 Webpack的基础教程
根目录下创建src文件夹，接着在里面创建 index.js 文件, 并写个简单的代码 hello word。 通过查看源代码，可以发现依旧是使用ES6的写法，为了兼容低版本浏览器使用，需要做转化。 修改 index.html 文件，点击保存， 页面会发生变化。 根目录下创建配置文件 webpack.config.js。 修改配置文件 webpack.config.js。 修改配置文件 webpack.config.js。 在 index.js 文件中写一段ES6的代码。
2023-07-13 10:22:24
46
原创 Element Plus Tree 树形控件 嵌套 Dropdown 下拉菜单 无感刷新
element plus 的 tree 组件虽然是比较好用的，但是并不能满足传统OA系统的对 树 的操作，浏览了整个element plus，Tree 树形控件 嵌套 Dropdown 下拉菜单。当然，如果简单的嵌套，似乎没什么难度，所以我给自己上了点难度，不仅要完美实现效果，还要做到无感刷新。注意：每一个方法都应该配合后端来实现的，无感刷新的原理是，前端手动更改了树，而不是每掉一次后端接口就刷新获取数据。组件的示例代码搬过来，运行，可以有以下效果。上代码，讲解放代码注释里。
2023-07-07 10:04:34
746
原创 利用 NVM 切换node 版本
当安装完成后，打开命令行输入查看本地安装的所有版本。有可选参数available，显示所有可下载的版本。上述步骤没问题后，可以直接输入命令安装对应版本 如：nvm install 14.21.3。如果出现 nvm 不是可运行命令…就要配置一下环境变量。（一般来说他会自己配置好）可以无脑点默认，需要主要的是留意一下安装地址，一会可能用的上。我们直接选择 nvm.setup.zip。下载完解压可以直接安装。
2023-06-07 14:31:18
136
原创 vue 3.0 + Typescript + Element plus 搭建项目
vue 3.0 + Typescript + Element 搭建项目
2023-02-08 00:24:12
224
原创 vue 单元测试
前言：网上一大堆的单元测试，但是很少针对vue的单元测试，不过也有一些视频简单的讲解了，这里为了方便各位前端朋友快速上手，简单过一遍 单元测试这里不举例我自己的页面，怕大家看不懂，以下代码片段，有部分会来自网上1. 创建页面在根目录下找到 tests文件夹在iview文件下创建以实际测试文件路径相仿的文件比如我在 src/iview/Home 下 有一个 Home.vue那么我们的 单元测试文件就要tests/iview/Home/Home.spec.js如果外面那个 Home.vue 要
2021-12-16 17:15:45
2229
2
原创 Vue jest 单元测试 常⽤技巧 和 命令
技巧只运⾏某个测试，可以加快速度it.only 例如跳过某个测试，紧急发布的时候可以⽤it.skip例如命令运⾏某个测试⽂件npm run ut "测试⽂件的地址"运⾏某个测试⽂件并且监听，如果有修改⾃动再次运⾏单元测试npm run ut:watch "测试⽂件的地址"查看测试覆盖率npm run ut:coverage监听 + 查看测试覆盖率npm run ut:wc --path=你的地址，去掉src/和后缀...
2021-12-10 09:41:49
445
原创 vue 使用 Lodash 的模块化方法处理 array、number、objects、string
安装 Lodashnpm i --save lodash使用 以深拷贝为例// 引入import { cloneDeep } from 'lodash-es'// value为要拷贝对象cloneDeep(value)官方网站
2021-12-07 10:37:34
679
原创 Vue 浅拷贝 深拷贝
浅拷贝 深拷贝 简单概括浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象浅拷贝// 拷贝对象{..objValue}// 拷贝数组[...arrValue]深拷贝1 （不推荐）// value为要拷贝对象JSON.parse(JSON.stringify(value))JSON.parse(JSON.stringify())复制时间对象、Error对象、正则表达式，函
2021-12-07 10:13:01
1692
原创 Vue 使用 Day.js 获取想要的日期（某年月日，某格式）
Vue 使用 Day.js 获取想要的日期（某年月日，某格式）引入npm install dayjs --save使用在需要用到的页面直接引入import dayjs from 'dayjs'简单使用获取年 ： dayjs().year()月 ： dayjs().month()日 ： dayjs().date()星期 ： dayjs().day()时 ： dayjs().hour()分 ： dayjs().minute()秒 ： dayjs().second()毫秒 ： d
2021-12-05 22:17:38
7414
原创 vue 使用 currency.js 处理 小数的相加减 精度问题
vue 使用 currency.js 处理 小数的相加减 精度问题安装 currency.jsnpm install --save currency.js或者yarn add currency.js引入在需要用到的地方import currency from 'currency.js'使用// number1,number2 就是你想要相加的数currency(number1).add(number2)其他需求详情可参考 currency.js 官网...
2021-12-03 14:19:55
1961
原创 从 JavaScript 到 TypeScript
本人是大学的专业是软件技术，学过JAVA，安卓，ios，Linux，HTML5，甚至 PS，unity 3D 也略有所学。虽说学的多，但是杂而不精是必然的，我相信很多开发专业的同学都有这样的经历，学而不精的后果就是工作很迷茫，甚至容易被拒之门外。所以我还是非常建议大家专精一个，后面的再考虑，贪多嚼不烂。之所以选择前端，不仅仅是入门容易，而且相对的市场需求比较大，首先前面提到 安卓，ios 已经没什么人做了，16年以前，一个中小城市的ios开发实习生都能有 6k月薪 的工资，现在人家只需要 3k工资 的前端
2021-11-30 11:06:12
4756
原创 vue 3.0 + Typescript + Element 搭建项目
vue 3.0 创建项目创建项目选择自行配置配置Babel：使用babel，便于将我们源代码进行转码（把es6=>es5）TypeScript：使用TypeScript进行源码编写，使用ts可以编写强类型js，对我们的开发有很大的好处Progressive Web App(PWA)：使用渐进式网页应用（PWA）Router：使用vue-routerVuex：使用vuex状态管理器CSS Pre-processors：使用CSS预处理器，比如：less，sass等Li
2021-11-23 16:23:05
2761
原创 vue 固定范围内随机位置生成 图片（可其他东西）
vue 固定范围内随机位置生成 图片（可其他东西）先说一下思路：在一个范围内（主要是为了确认随机生成的图片中心点在范围内）拿到图片半径（可随机，看需求）随机生成xy坐标 (left,top)第一个判断：判断是否在规定范围内x (随机点的X) - r (半径) >=0 && y(随机点的Y)-r>=0x+r<= W(范围宽) && y+r<=H (范围高)判断最新生成的 图片 范围内是否 有其他的图片假设我们生成的图片集合成一个
2021-07-28 16:30:09
1957
原创 React 路由 封装
React 路由 封装主要目录路由列表在App.jsx页面引用路由组件注意鸽了一段时间，终于回归React的阵营中，后面会完整制作一个项目，今天先讲一下路由，后续会和项目一并讲解。主要目录我发现很多博主讲封装，一是转载别人的，二又不说明 哪个打哪个文件的代码，云里雾里。我们一般把 页面组件（页面）放到 component 里面的 pages 里，相当于 vue 的 view文件，因为在React里面，页面也算是组件，所以，pages 理应放到 component 里面。我们每创建一个页面都必须先
2021-05-08 17:32:43
3757
7
原创 TypeScript 入门 之 第一个 TypeScript 程序
在项目根目录新建一个 app.ts 文件（ .ts 为TypeScript 文件 ）打开输入代码const hello : string = "Hello World!"console.log(hello)保存 调出 命令通过 tsc 命令编译tsc app.ts我们得到一个 app.js文件运行node app.js这样我们第一个TypeScript 程序就成功运行了...
2021-03-19 20:19:30
160
原创 TypeScript 入门 之 安装
TypeScript 安装在已安装node的前提下直接调出命令输入npm install -g typescript检查是否安装成功及版本tsc -v
2021-03-19 20:05:03
83
原创 vue 3.0 创建项目 慢、卡死、创建失败 解决
vue 3.0 创建项目 慢、卡死、创建失败 解决有很多朋友创建 3.0 项目时，往往会遇到 项目创建项目慢，卡死等一系列问题。毕竟习惯 2.0时用命令去创建这里提供一个解决方法用 视图去创建在命令输入 vue ui 打开视图vue ui创建项目根据自己需求安装依赖注意选中 3.0如果还没升级3.0，可以查看我上一篇文章点击创建项目，等待 一会，就创建 成功了...
2021-03-07 21:56:21
1787
1
原创 Vue 2.0 升级到 3.0 及 创建项目
Vue 2.0 升级到 3.0 及 创建项目vue 3.0 已经发布一段事间了，现在才开始学习 3.0 似乎有点迟，拖更一下其他的，抓紧时间学习 3.0（鸽就硬鸽）1. 将vue 2.0 升级到 vue 3.0先升级 npmnpm install -g npm卸载原本的 vue cli （虽然vue 3.0 新出了 vite，但是这里先不细讲）npm uninstall -g @vue/cli下载最新的vue cli版本npm install -g @vue/cli如图：2. 创
2021-03-06 21:58:32
1199
原创 项目详解 & 目录
从零开始的微信小程序 点餐小程序 开发第2章 【准备工作】项目详解 & 目录初始图解打开项目根目录 在pages文件夹内删掉 index在app.json文件删掉 “pages/index/index” 然后ctrl + s 保存重新加上 “pages/index/index”, 这段话，然后ctrl + s 保存你会发现 index文件重新出来了。这里解释一下：小程序 添加新的页面只需要 在app.json 页面添加 “pages/文件名/文件名” 即可。删除页面 要
2021-02-19 22:42:41
170
原创 在微信公众平台创建第一个小程序并构建项目
从零开始的微信小程序 点餐小程序 开发第1章 【准备工作】 在微信公众平台创建第一个小程序并构建项目很基础很基础的教学，有一定基础的可以跳过这一章在浏览器打开微信公众平台没有账号的先注册选择小程序请按步骤 注册 并记住 账号密码注册完成后登录在左侧找到 开发 - 开发管理然后选中 开发设置 拿到 AppID打开 微信开发者工具 没有点击 下载选择好 项目 的目录填写 AppId我们选择不使用云开发 （一会在开启）点击新建，这样一个简单的小程序项目就创建好了.
2021-02-19 22:05:30
312
原创 vue 在 html标签上 做三元运算
众所周知，在js 中 a<b?‘方法一’:‘方法二’ 这种 三元运算 是比较方便快捷，那么如何在html标签上直接使用呢？在 标签包裹中，一半为内容，可以直接使用例如：<p class="price">{{price>100?'涨价了':'降价了'}}</p>在 标签内，如 class、style、data- 等等 都需要简单处理例如：<template v-for="(item,index) in selcoursesList"> <
2020-12-24 11:07:29
7636
2
原创 使用 iview 原生方法 带自定义参数 且 能拿到方法的 event 或 file 等等
吐槽一下章节标题，希望能读得懂正片在一些情况下，我们既希望拿到原生方法的 event 值，也想 传递自己的值，如 index 标识， 时就会陷入两难的地步，因为通常，方法是死的，多个值时，他没有办法得知我们赋予他的是哪个值，那个值又是 方法的event值。方法： beforeUpload方法的参数：file自定义值：index我们可以通过 :before-upload="(file)=> beforeUpload(file, index)" 来解决示例：定义方法Upload 是ivi
2020-12-23 15:49:31
395
原创 微信小程序 接口封装附带 封装 微信支付
准备 工作一、根目录下创建文件夹 request二、创建 3个 js 文件，分别是：config.js、api.js、request.js三、有做微信支付需求的创建 requestPayment.js如图：封装 接口域名config.js// 正式接口const baseURL = "https://*****.com/";// 测试接口// const baseURL = 'https://*********.com/';export{ baseURL}根据自己的需求把
2020-12-17 16:32:48
482
原创 微信小程序 订单列表 倒计时（多个）实现
先看效果一，在js页面 获取系统当前时间戳 onShow: function () { //拿到服务器时间 var serverLocalDate = new Date().getTime(); //调用函数开始计时 this.serverLocalDate(serverLocalDate); }, *************************** //服务器系统时间开始计时 serverLocalDate: function (server
2020-12-17 15:07:18
1543
原创 iview /deep/ 的使用及注意事项
iview /deep/ 的使用及注意事项iview 组件不能常规修改样式的原因：在使用vue构建项目的时候，引用了第三方组件库，只需要在当前页面修改第三方组件库的样式以做到不污染全局样式。通过在样式标签上使用scoped达到样式只制作用到本页面，但是此时再修改组件样式不起作用。解决方法：1.通过 >>> 穿透scoped2.通过 /deep/ 穿透scoped选择 /deep/ 的原因：有些Sass 、Less之类的预处理器无法正确解析 >>>注意事项
2020-12-16 18:16:00
537
原创 vue axios 网络请求的封装
vue axios 网络请求的封装为了代码更容易管理，对网络请求进行一系列的封装安装依赖npm install axios --save封装~在src目录文件下新建 reqest 文件夹~reqest文件下 新建reqest.jsrequest.js 代码import axios from "axios";export function request(config) { // 1.创建axios的实例 const instance = axios.creat
2020-07-05 22:22:17
277
转载 vue cli2 项目的目录结构
vue cli2 项目的目录结构简单的说一下 vue cli2 项目的目录结构。1. 创建项目vue cli2 创建项目2.目录结构先看图文件结构细分1.build——[webpack配置]build文件主要是webpack的配置，主要启动文件是dev-server.js，当我们输入npm run dev首先启动的就是dev-server.js，它会去检查node及npm版本，加载配置文件，启动服务。2.config——[vue项目配置]config文件主要是项目相关配置，我们常用的
2020-07-03 21:01:23
2049
2
原创 vue cli2 创建项目 及各种 命令详解
vue cli2 创建项目 及各种 命令详解由于新的公司用到 vue cli2 脚手架，我个人惯用 cli3 故整理一下 cli2 基础。1. 创建项目创建前请先确定脚手架版本vue -V如果不是 2.x.x ，3以上的版本请做兼容处理可以根据我上一篇文章简单处理vue cli3 使用 cli2若无其他问题，则在自己存放项目文件内创建项目请在红色框框内输入 cmd 调出命令vue init webpack projectNameProject name //这里再次输入
2020-07-03 20:31:47
3358
1
原创 关于vue lic3 使用 cli2 脚手架 的可行性
关于vue lic3 使用 cli2 脚手架 的可行性解：没有问题！1. 检查node.js 的版本是否在 8.9 或更高版本 (推荐 8.11.0+)node -v2. 检查vue cli 脚手架 的版本vue -V升级cli版本:1.npm uninstall vue-cli -g //卸载vue-cli旧版本2.npm install -g @vue/cli //安装新版本3.vue -V //版本号现在应该是4
2020-07-03 18:04:23
159
原创 小程序无人点单效果实现
小程序无人点单效果实现废话不多说，直接上源码: https://github.com/Unscientific-net-a-porter/-以下皆为参考博客，可以了解一下。微信小程序Tab切换,滑动切换： https://blog.csdn.net/fatong3/article/details/89950933微信小程序实现商品数量加减案例： https://blog.csdn.net/...
2019-08-28 17:30:38
1323
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人