weixin_44314609的博客

【代码】原生js实现上传图片按比例压缩方案【附带插件方案】

阿里云oss实现上传图片

cropperjs 裁剪图片

这样的机制，无论你的项目有多大，它只会构建一开始必须要构建的内容，这让vite在构建时的速度大大提升了。不会在一开始就构建你的整个项目，而是会将应用中的模块区分为依赖和源码（项目代码）两部分，对于源码部分，它会根据路由来拆分代码模块明知会去构建一开始就必须要构建的内容

方法一最为简单的，将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

在vue中使用了ckeditor5后，收到如下图的反馈：起初以为是小问题，像其他富文本一样加几个属性参数就有了，但是我发现我错了，错的离谱。那些参数加上去没有任何效果，后来查找下才知道是要下载插件。以下分为两部分，第一部分为引入并使用插件，第二部分为CKEditor -duplicate -modules报错的解决方案，根据自身情况查看。下载插件并引用因为我引入的方式是在vue页面中加入该代码引用import ClassicEditor from '@givebest/ckeditor5-cus

v-model

这要实现的重点就是 地图添加底部阴影的效果，原理就是在原有的地图下面再添加一个地图，下面是代码：html <div id="myEchart" ref="myEchart" style="height:600px;width:100%;"/>引入文件import echarts from 'echarts'import '@/../node_modules/echarts/map/js/china.js' // 引入中国地图数据jschinaConfigure.

vue项目引入three.js实现基本的动画(含vue-cli2引入报错解决方案)

先上需要的效果图哈如图所示，再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

需求：制作一个简单的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=""&

安装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('

首先祭出 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

动画库如果想页面制作的好看，动画效果一定是少不了的。所以必须推荐动画插件。Animate.css 纯css的动画库，所以无论你前端使用什么框架，都可以非常方便的使用它，内置了超多的动画效果，并且预览起来也非常方便。网址：https://animate.style/常用效果组件所有介绍了一些UI组件库，组件库的组件大而全，但精细程度有时候是不够的，所以有时候我们还需要一些小而精的专属组件。轮播图组件：swiper，这个提供的轮播图效果太多了，中文文档齐全，还有交流QQ群。支持原生、JQuery、V

创建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

先上需求图这里提供两种方法：第一种，直接用图片，虽然low了点，但是快。第二种，就是使用定位，找到对应的dom，然后再进行解释；思路来自插件市场，但这边已经进行了加功，升级。下面进入代码：<!-- guide.vue --><template> <view v-show="show" class="main"> <view class="rect-shadow" :style="{'width':width+'px','height':height

以下两种报错分别表示：超过最大调用堆栈大小；（路由死循环问题）错误:重定向时，从“/主页/主页”到“/列表/列表”通过导航守卫。（重定向问题）以上两种都是路由导致的报错，我们先从第一个报错分析，在报错的文件中找到 permission.js文件，该文件是我设置全局的路由守卫咋一看，有token继续，没有返回到login页面没有什么问题呀！但是问题就出在这个返回login页面，为了看的更清楚，我们在next(’/login’)上面打印发现没错，它出来了，死循环了，情况就为每次进入login页

问题所在：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页面，所

自定义组件业务场景： 自定义一个全局的loading页面，在需要请求数据的地方呈现。在项目中 创建一个common文件夹（放置全局的组件），创建loading.vue(以element-ui为例)<template> <div class="loading-page"> <i class="el-icon-loading"/> </div></template><script> export de

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。 ——vue 官方这里的案例拿vue-element-admin的源码来说明：该项目架构中，App.vue代码如下：// App.vue 父级组件提供<template> <div id="app"> <router-view v-if="isRouterAlive" /> </div&g.

虽然在我们普遍的项目中，这些接口使用的几率极低，都有可以代替他们的方法，但这并不能成为我们不去了解接触甚至使用它们的接口。官方文档我普遍在在根目录中创建 utils文件夹，创建一个对象供后续方法使用// profile.js// 创建对象const profile = { template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', // 在此次案例中这段可有可无 data: function

今天的项目中，正有一个需求就是上拉加载，下拉刷新，正好之前有了解了better-scroll，可以满足要求，立马动手，当我完成后，同事才跟我说，vant里面就有此ui（该项目已引入vant）。。。行吧，当做熟悉下better-scroll，但同时为了使项目小些，把辛苦写的代码删除了，用vant的list组件重新写了遍；发现一个大道理：还是别人封装好的香！！！better-scroll之前写了个入门体验文档，今天将两者都使用了，并对比下。安装npm i better-scroll<templ

心酸制作历程当刚接下这项目时，便开始研究如何实现轨迹回放的功能；而刚开始当然是直接查找百度的实例百度路书实例，如下图但是我们的需求是需要通过进度，速度来进行调整（如下图），显然难以达到这个目标。因此，在查看了多个文档后，选择了一个勉强达到需求的办法，就跟canvas的方式一样，每秒清除地图上的所有覆盖物，然后车重新定位地图中心点，画出运行到的轨迹，虽然可行，但是整个车运行的过程中，就宛如地图在移动，车一直钉在地图中心。直到一位大佬把这问题迎刃而解（我打辅助，多多学习）查找路书的源码在找到一篇

根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新

公司这次的一个项目，对时间处理，相互转化，弄得我烦不胜烦，因此，都记录下来，方便自己也方便他人。若有什么遗落的，望提醒，我补充！注：使用框架的朋友，为了代码的整洁与后期维护，使用引入的方式更佳在开始之前给兄弟们一些备注：时间戳：1593436890378中国标准时间： Mon Jun 29 2020 21:21:59 GMT+0800 (中国标准时间)标准时间： 2020-06-29 00:00:00时间戳转标准时间export default { // js时间戳转化成日期格式 ti

首先，better-scroll官网是不能少的；创建一个html页面中，引入cdn<script src="https://unpkg.com/better-scroll/dist/bscroll.min.js"></script>当然，vue中用npm引入；然后我们来体验下，代码如下：// html<div class="wrapper"> <ul class="content"> <li>...</li>

近日，公司需要重构一款引用google地图的app，本想用uni-app下手，发现web-view的坑真的爬不出来，挣扎一番后，弃之投vue。google账号想要制作google地图，账号是必须的，还有翻墙软件，参考谷歌官网 或者网上搜下很多，这里就不多说。而且需要开通结算账号，否则地图就会有一层水印遮罩层。项目中引入地图首先引入谷歌地图 详细可看npm官网npm install vue2-google-maps在main.js中引入// main.jsimport Vue from '

最近公司的一个项目到来了，百度地图的引入以及对车辆轨迹的查看、纠偏等需求是这项目的重中之重，之前对百度地图不熟悉，踩了不少坑，希望通过分享，能助迷茫的兄弟一臂之力。在此之前，先放出两个有帮助的网站：百度地图实例 ， Vue Baidu Map引入百度地图npm install vue-baidu-map –save在index.html中添加 script至于ak秘钥，需要自己申请下，这...