本文的换肤方案灵感来自于 element-ui 需求：网站换肤，主题切换。网站的主题色可以在几种常用颜色之间进行切换，还有相关图片、图标也要跟随主题进行切换。 不多说，先看下最终的实现效果：文章由两部分组成：css切换，图片图标切换 css切换 1.在 static 目录下新建一个 styles 文件夹，在 styles 下新建一个 theme.scss 文件（项目使用了sass，会自动编译成css文件，如果没有使用这些预处理工具可以直接新建 theme.css），将需要...
前言 本文是对bar进度条实现的2种方案进行分享，第一种是很简单，纯css的实现，第二种是echart的实现。 css的实现 css实现很简单。代码如下：<template><div class="haoroomflex"><div v-for="(item,index) in barData" :key="index" class="onebar"><div class="bar"><span class="progress" :style="{height:`${item.value*100}%`}" /></div><div class="sfont">{{ item.date }}</div></div></div> </template> <script>export d...
前言 本文的目标是通过下文介绍的适配方案，使用vue或react开发移动端及H5的时候，不需要再关心移动设备的大小，只需要按照固定设计稿的px值布局，提升开发效率。下文给出了本人分别使用create-react-app搭建的react（create-react-app）项目和使用vue-cli 2.x 搭建的vue项目中的 亲测可用 配置方案。 px2rem或postcss-px2rem 在移动端中，为了设配不同的设备，通常使用rem来做适配。rem是通过根元素进行适配的，网页中的根元素指的...
缘起最近实验课上需要重构以前写过的一个项目（垃圾堆），需要添加发生邮件提醒的功能，记得以前写过一个PHP版的实现，所以想把PHP写的功能整理成一个服务，然后在前端调用。但是这个项目是JavaWeb，也就是说我需要面对跨域的问题。不过本篇文章，讲的并不是如何解决这样的跨域问题，而是我在找如何解决这个问题的路上遇到的坑。其实，在前端工程化大行其道的现在，前后端已经分离开来，前端为了提高工作流效率往往自己开一个小型的...
前言：众所周知，Vue SPA单页面应用对SEO不友好，当然也有相应的解决方案，下面列出几种最近研究和使用过的SEO方案，SRR和静态化基于Nuxt来说。 1.SSR服务器渲染； 2.静态化； 3.预渲染prerender-spa-plugin； 4.使用Phantomjs针对爬虫做处理。1.SSR服务器渲染关于服务器渲染：Vue官网介绍 ，对Vue版本有要求，对服务器也有一定要求，需要支持nodejs环境。 使用SSR权衡之处： 开发条件所限，浏览器特定的代码，只能在某些生命周期钩...
当我们在做后台管理系统时，经常会遇到非常复杂的表单： 表单项非常多在各种表单类型下，显示不同的表单项在某些条件下，某些表单项会关闭验证每个表单项还会有其他自定义逻辑，比如 输入框可以插入模板变量、输入字符数量显示、图片上传并显示、富文本 。。。在这种错综复杂的情况下，完成表单的验证和提交可以查看具体例子：例子中省略了很多琐碎的功能，只保留整体的复杂表单框架，用于展示解决方案方案1： 在一个 vue 文件中 所...
vue微信网页授权，基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios，开发的微信授权方案。项目地址：vue-wechat-auth 参考了[vue-wechat-login]，思路有些不同，本文基于进入所有页面都必须先授权的操作。 与之前写的授权不同之处 这次的逻辑全部在router的beforeEach进行，相较更加简洁明。之前是在一个中间页author.vue中，加上微信授权要跳转很多次 在这里你能找到 微信网页授权前端解决方案，官方文档 如何使用Na...
由于新建项目发版打包时间大概需要 30分钟 ，发版时 严重 拖慢 下班 时间，所以特意查看了相关文档来优化打包速度，争取早点下班，^_^。 分析打包文件 要优化，先分析。我们先要知道到底是哪里拖慢我们的打包速度呢？ 打包后生成文件分析 可以利用 webpack-bundle-analyzer 插件来分析我们打包后生成的文件 安装npm i webpack-bundle-analyzer -D使用修改 webpack.prod.conf.js 文件const BundleAnalyzerPlugin = require(webpack-...
日常开发中经常遇到的一个场景，父组件有很多操作，需要弹窗，例如： <template><div class="page-xxx">//点击打开新增弹窗<button>新增</button>//点击打开编辑弹窗<button>编辑</button>//点击打开详情弹窗<button>详情</button><Add :showAdd="false"></Add><Edit :showEdit="false"></Edit><Detail :showDetail="false"></Detail></div> </template> 子组件： <div class="page-add"><el-dialog :visible="dialogVisible" @clo...
前言 有echarts使用经验的同学可能遇到过这样的场景，在window.onresize事件回调里触发echartsBox.resize()方法来达到重绘的目的，resize事件是连续触发的这意味着echarts实例会连续的重绘这是非常耗性能的。还有一个常见的场景在input标签的input事件里请求后端接口，input事件也是连续触发的，假设我输入了“12”就会请求两次接口参数分别是“1”和“12”，比浪费网络资源更要命的是如果参数为“1”的请求返回数据的时间晚于参数...
去年年底自己搭了一个vue在移动端的开发框架，感觉体验不是很好。上个星期又要做移动端的项目了。所以我花了两天时间对之前的那个开发框架做了以下优化 自定义vuex-plugins-loading路由切换动画 + keep alive 动态管理缓存组件better-scroll与vue的最佳实践(better-scroll的vue化)自定义指令（vue-finger:包括点击，长按，双击，拖拽移动，多点触控，滑动，旋转，缩放手势）移动端适配方案如何分情况处理页面置顶路由懒加载自定义 ...
方案1： 直接引入js （自己 写的动态改变fontsize的js） function htRem() {var ww = document.documentElement.clientWidth;if (ww > 750) {ww = 750;}document.documentElement.style.fontSize = ww / 7.5 + "px";}htRem();window.onresize = function() {htRem();}; 在main.js中import引入即可 方案二：手淘的 lib-flexible + rem 配置 flexible 安装 lib-flexible 在命令行中运行如下安装： npm i lib-flexible --save 引入 l...
前言最近一直在忙着一个用vue来做的权限管理的项目，其实在此之前，我也研究过vue的权限如何实现，并且也为之写过一篇博客，但当真正应用在项目中的时候，还是发现了许多问题，所以此篇也会就着我在项目中遇到的一些问题，拿出来和大家分享一下，当然示例代码还是我的github仓库中的ant-design-vue-ms （本地下载）。 权限问题解决思路对于一个前后端分离的项目而言，权限不再是仅仅靠后端来控制，后端只能控制接口的权限，前台的页...
前言 为什么选择VScode？ 在之前我用过sublime、webstorm、atom、Brackets、eclipse、HBuilder、notepad++等等。应该还有一些用过几次的编辑器，记不起来的，这些编辑器的作用不外乎一点——为了开发迅速。基本都会自带代码提示插件。随着项目越来越大，出了一系列问题，而这些问题会大量浪费我们的时间（我们只想简单的编程），故而编辑器插件的数量和支持程度成为了我们选择编辑器的重要条件，这就是为什么选择VScode，它拥有大量...
实际上关键词叫 微信pushState只能分享落地页 更贴切一点 应用场景： vue + vue-routervue-router使用hash模式（history模式没试过）不使用微信的js-sdk（因为我这个项目是可配置域名的商城，比较特殊，不能使用微信sdk）这个方案并不是最优秀的，会对性能造成一定的影响HTML5 history.pushStatevue-router的内部是通过 history.pushState 和 history.replaceState 实现的。但是iOS设备的微信浏览器不会去检测它们的变化。但是我们...