- 博客(55)
- 收藏
- 关注
RSS订阅原创 Taro引入echarts【兼容多端小程序（飞书/微信/支付宝小程序）】
在开发项目中，components中创建Echarts文件，放入下载后的js包，并在该目录下创建wx-canvas.js，编写canvas构造函数代码，如下。在Echarts文件中，创建ec-canvas.vue文件，创建canvas对象。最后，需要进行各种各样的渲染与修改，可直接参看。希望此文对大家有帮助，也请大佬不吝赐教～
2024-04-27 23:13:30
1991
1
原创 Cannot find module ‘node-sass‘或者check python checking for Python executable python2 in the PATH的方案汇总
Cannot find module 'node-sass'或者check python checking for Python executable python2 in the PATH的方案汇总
2023-05-19 00:09:01
2778
原创 删除Node.js，安装nvm，看这一篇就够了(有坑)
nvm的作用就是可以任意切换Node.js的版本，所以在下载nvm之前，现将系统中的Node.js全部删除，若之前没有安装过，可忽略第一步。
2023-02-10 00:30:26
1400
原创 Vite构建速度快的秘密
这样的机制，无论你的项目有多大，它只会构建一开始必须要构建的内容，这让vite在构建时的速度大大提升了。不会在一开始就构建你的整个项目，而是会将应用中的模块区分为依赖和源码（项目代码）两部分，对于源码部分，它会根据路由来拆分代码模块明知会去构建一开始就必须要构建的内容
2022-11-02 10:39:14
330
原创 【亲测有效】nginx刷新页面出现404解决方案
方法一最为简单的，将router设置为hash模式！！！history模式的路由需要后端配置，hash模式便不需要，不同的框架所需不一样，看对应的文档。方法二找到nginx配置代码，进行修改，网上很多都是如下类型的代码location ^~ /api { proxy_connect_timeout 600; proxy_read_timeout 600; proxy_set_header x-real-ip $remote_addr; proxy_se
2022-03-17 14:16:12
9435
原创 【原创】vue中使用CKEditor5引入插件&ckeditor-duplicated-modules报错处理
在vue中使用了ckeditor5后，收到如下图的反馈：起初以为是小问题，像其他富文本一样加几个属性参数就有了，但是我发现我错了，错的离谱。那些参数加上去没有任何效果，后来查找下才知道是要下载插件。以下分为两部分，第一部分为引入并使用插件，第二部分为CKEditor -duplicate -modules报错的解决方案，根据自身情况查看。下载插件并引用因为我引入的方式是在vue页面中加入该代码引用import ClassicEditor from '@givebest/ckeditor5-cus
2022-03-15 14:16:35
6803
1
原创 echarts中国地图实现阴影效果&自定义设置
这要实现的重点就是 地图添加底部阴影的效果，原理就是在原有的地图下面再添加一个地图，下面是代码：html <div id="myEchart" ref="myEchart" style="height:600px;width:100%;"/>引入文件import echarts from 'echarts'import '@/../node_modules/echarts/map/js/china.js' // 引入中国地图数据jschinaConfigure.
2022-02-17 14:44:06
11771
4
原创 vue项目引入three.js实现基本的动画(含vue-cli2引入报错解决方案)
vue项目引入three.js实现基本的动画(含vue-cli2引入报错解决方案)
2021-12-03 14:03:12
1875
1
原创 （Vue）H5项目实现微信分享好友和朋友圈功能
先上需要的效果图哈如图所示，再vue项目中，分享携带头部标题、简介和缩略图等信息，下面进入正题：安装&引入// 再index.html中放入 <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>或者使用官方插件npm i weixin-js-sdk使用（再需要引用的页面）// npm安装的需要引入let wx = require('weixin-js-sd
2021-11-12 10:17:35
2915
原创 （原创）JS创建页面进度条（VUE）
需求：制作一个简单的H5邀请函页面，因为需要加载的图片较多，因此添加进度条来提高用户体验。HTML<div class="loading-area cell flex-col" v-if="rate<100"> <div class="progress"> <div class="rate"> <img src="../assets/img/progress.png" alt=""&
2021-11-10 15:29:59
816
原创 移动端适配插件——px2rem-loader
安装npm i lib-flexible --save引入// main.jsimport 'lib-flexible'安装插件npm i px2rem-loader --save-dev配置方法一、在vue-cli3的项目中，找到node_modules/@vue/cli-service/lib/config/css.js，加入代码rule .use('px2rem-loader') .loader('
2021-11-09 22:27:54
1018
原创 Vue轮播图组件使用——swiper
首先祭出 github地址 和 官网地址安装npm install swiper vue-awesome-swiper --save引入// main.jsimport Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper'// 如果Swiper 版本>=6.x 使用import 'swiper/swiper-bundle.css'// 如果Swiper 版本<=5.x 使用import 'swipe
2021-11-09 22:17:41
1594
原创 前端最常用的轮子&组件库
动画库如果想页面制作的好看，动画效果一定是少不了的。所以必须推荐动画插件。Animate.css 纯css的动画库，所以无论你前端使用什么框架，都可以非常方便的使用它，内置了超多的动画效果，并且预览起来也非常方便。网址：https://animate.style/常用效果组件所有介绍了一些UI组件库，组件库的组件大而全，但精细程度有时候是不够的，所以有时候我们还需要一些小而精的专属组件。轮播图组件：swiper，这个提供的轮播图效果太多了，中文文档齐全，还有交流QQ群。支持原生、JQuery、V
2021-10-13 21:44:28
639
原创 js设计模式总结 —— 常用六种
工厂模式在工厂模式中，我们在创建对象时不会对客户端暴露创建逻辑，并且是通过使用一个共同的接口来指向新创建的对象。class Product { constructor(name) { this.name = name } init() { alert('init') } fun1() { alert('fun1') } fun2()
2021-10-12 23:45:02
3198
原创 vue项目重构ssr，一看就懂
创建vue项目vue create ssr-demo安装router、vuexvue add routervue add vuex基础vue项目目录如下：重构成ssr项目1、修改路由配置// router/index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'Vue.use(VueRouter)// 工厂函数 每次请求返回一个Rou
2021-10-12 09:45:52
935
2
原创 uni-app实现新手引导功能(拿来即用)
先上需求图这里提供两种方法：第一种，直接用图片，虽然low了点，但是快。第二种，就是使用定位，找到对应的dom，然后再进行解释；思路来自插件市场，但这边已经进行了加功，升级。下面进入代码：<!-- guide.vue --><template> <view v-show="show" class="main"> <view class="rect-shadow" :style="{'width':width+'px','height':height
2021-06-08 00:03:12
5406
18
原创 webpack —— chunk，bundle，module的区别 & hash ，chunkhash， contenthash的区别
来看看两道概念题：问一：chunk，bundle，module的区别?chunk指的是经过webpack转化处理后的代码片段；bundle指的是经给webpack处理后输出的文件，统称 bundle文件；module： webpack中万物皆模块。问二：hash ，chunkhash， contenthash的区别？hash 是代码发生变化，整个项目的hash就会发生变化；但是仅有个别文件发生变化，显然缓存就没有了意义。chunkhash 是根据不同的入口文件(Entry)进行依赖文件解
2021-05-18 23:16:57
496
原创 webpack基础（二）核心配置
entry —— 可字符串，可对象，可数组打包入口 （spa【单页面应用 / 单入口】， mpa【多页面应用 / 利于seo】）output占位符： [name], —— 名字[hash] —— 类似时间戳，利于缓存 [hash:6]的形式限制位数 （内容发生变化，hash就变化）[chunkhash]例：const path = require('path')module.exports = { // 入口 entry: { // 多入口 index: './src
2021-05-01 09:43:59
93
原创 webpack基础（一）
安装// 局部npm install webpack webpack-cli -D// 全局npm install webpack webpack-cli -g启动npx webpacknpx webpack // 默认以生产模式发布打包 productionscript脚本命令// package.json中添加配置"scripts": { "test": "echo \"Error: no test specified\" && exit 1"
2021-04-28 08:44:33
79
原创 小程序云开发—— 订阅与发送消息
常见的功能，微信的允许订阅信息和发送信息到微信中，代码如下// html<button type="primary" bindtap="btnTestSubscribeMsg" style="margin-top:5px;">订阅消息</button><button type="primary" bindtap="btnSendSubscribeMsg" style="margin-top:5px;">发送订阅消息</button>上序两个方法如下
2021-03-13 21:59:10
347
原创 小程序云开发—— 生成二维码，保存本地
刚开始创建小程序云开发的项目，这里就不必多说了，我们直接进入正题。// index.wxml<canvas type="2d" id="myCanvas" style="height:300px;width:300px;"></canvas>创建一个云函数 getmpcode 小程序官网可能有人问，为什么要用云函数呢？因为这个必须要后台才能调用的。// 云函数入口文件const cloud = require('wx-server-sdk')cloud.init()
2021-03-13 16:23:36
613
5
原创 umi3、koa2搭建个人博客项目性能优化（实战）
首先说明下，我搭建的前提：前端使用的是umi3+ts，后端使用的是node.js的框架koa2，阿里云服务nginx部署。当网站正式上线，开始的速度惊到我了，如下图：优化方向初步分析下，有这几个方向可以执行：1.css和js包载入时间过长，按需加载是个方向，或异步加载js文件2.优化代码，删除没必要的东西，减少代码体积3.部分图片加载过时间过长，压缩图片4.压缩代码说干就干，第一步， 将用的本地图片，用ps全部压缩一遍，此步省略第二步，umi中实现前端按需加载，官网接口，主要就是在
2021-01-28 15:03:19
1141
原创 解决antd的Warning: Instance created by `useForm` is not connected to any Form element.问题
先描述下这个问题的由来：把form表单放在Modal中，当进入时报的错误，没有挂载到（连接到）这个表单，所以报错。网上很多的文章都说使用如下方法：可是这还解决不了问题，报警告还是一样。可以使用这个api解决 —— forceRender设置强制渲染给为true <Modal title="发布" visible={visible} onOk={handleOk}
2021-01-03 11:58:51
1785
5
原创 vue-router： RangeError: Maximum call stack size exceeded
以下两种报错分别表示：超过最大调用堆栈大小；（路由死循环问题）错误:重定向时，从“/主页/主页”到“/列表/列表”通过导航守卫。（重定向问题）以上两种都是路由导致的报错，我们先从第一个报错分析，在报错的文件中找到 permission.js文件，该文件是我设置全局的路由守卫咋一看，有token继续，没有返回到login页面没有什么问题呀！但是问题就出在这个返回login页面，为了看的更清楚，我们在next(’/login’)上面打印发现没错，它出来了，死循环了，情况就为每次进入login页
2020-12-04 11:01:36
7132
10
原创 vue项目使用router.replace后需要返回两次的解决方案
问题所在：a页面 push到 b页面， b页面 push到 c页面，c页面 replace到 b页面，这时候点击按钮(router.go(-1))，没有效果，需点击两次才能返回到a页面中！分析：页面跳转流程： a => b => c => b路由栈：a => b => b就路由栈说明：a到b，b到c就无需多说，下一步的c replace到b，本意为在栈中b页面替代了c页面，所以路由栈中不存在c路由，因此在我们在点击第一次返回后，其实是从一个b页面返回到另一个b页面，所
2020-12-04 09:42:32
2080
原创 （原创）react中context的使用方法与总结
Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。 ——react官网虽然redux可以实现一个状态state，整个项目使用，但是有时候，该state无需全局使用，用redux工具，显得有点杀鸡用牛刀的feel，并且还可能是父组件的state，其孙组件（子组件的子组件的级别）需要使用，但若为了给孙组件一个状态值，每一层组件都向下传递一个props且不使用，未免就太没必要了，因此context的表现时刻就到了。需求创建白天黑夜主题切换项目创建com.
2020-12-03 10:03:07
1216
原创 从redux衍生到react-redux的实战应用（一篇就懂）
在上篇，写了一个redux的简单demo，redux使用，这篇就结合react-redux与实际项目进行结合使用。加减按钮demo实现简单的点击加号，点击减号改变数字的项目，demo虽小，五脏俱全；安装 redux 和 react-reduxnpm i redux react-redux创建react项目 基本操作npx create-react-app my-appcd my-appnpm start再根目录下父组件 index.js中import { createStore }
2020-12-01 23:46:58
165
原创 redux制作demo——从基础了解redux
刚开始学习react，自以为redux是react中的东西，就像vue与vuex的关系一样，后来才知道我错了，错的很离谱，他们就拼写比较接近罢了。就如redux官网所说Redux 是 JavaScript 状态容器，提供可预测化的状态管理。下面引入redux，来理一理redux的实现思路创建文件夹，初始化并安装npm init-ynpm i redux引入reduxconst { createStore } = require('redux')创建store，并进行监听// 1 创
2020-11-28 17:54:12
186
原创 使用koa连接mongoDB，搭建服务器
搭建服务器安装npm i koanpm i nodemon -save // 便于修改文件 无需重新启动服务器写入代码const Koa = require('koa');const app = new Koa();app.use(async ctx => { ctx.body = 'Hello World';});app.listen(3000);访问本地端口3000，可以看到信息，下面进入正题创建mongoDB数据库没有账号的同学，mongodb官网创建一个账
2020-11-28 17:23:16
569
原创 Vue自定义组件component与自定义指令directive的应用
自定义组件业务场景： 自定义一个全局的loading页面，在需要请求数据的地方呈现。在项目中 创建一个common文件夹（放置全局的组件），创建loading.vue(以element-ui为例)<template> <div class="loading-page"> <i class="el-icon-loading"/> </div></template><script> export de
2020-11-14 16:35:50
1750
原创 Vue——provide-inject的使用理解
这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。 ——vue 官方这里的案例拿vue-element-admin的源码来说明：该项目架构中，App.vue代码如下：// App.vue 父级组件提供<template> <div id="app"> <router-view v-if="isRouterAlive" /> </div&g.
2020-11-14 15:55:39
197
原创 Vue高级接口extend，extends，mixin使用与对比
虽然在我们普遍的项目中，这些接口使用的几率极低，都有可以代替他们的方法，但这并不能成为我们不去了解接触甚至使用它们的接口。官方文档我普遍在在根目录中创建 utils文件夹，创建一个对象供后续方法使用// profile.js// 创建对象const profile = { template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', // 在此次案例中这段可有可无 data: function
2020-11-14 12:21:33
773
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人