
Vue折腾记
文章平均质量分 59
Vue的系列教程,可以跟着我写一些你想接触的组件;让你爬坑路上稍微快步走
crper
对设计、交互、产品都有自己的见解和追求;更多关于我:https://www.yuque.com/crper/blog/about_me
展开
-
Vue 2.x折腾记 - (22) Vue 打包图片在safari不显示的问题
前言图片不显示这个问题在safari上会出现,不管是PC还是手机端的safari。而其他浏览器是可以正常预览问题效果图safari(桌面、手机)不显示图片,其他浏览器都是正常的。代码如下<script>import png_no_message from '@assets/layout/message/no_message.png';export default...原创 2019-06-14 21:05:12 · 1361 阅读 · 2 评论 -
Vue 2.x折腾记 - (21) CNZZ统计在引流页中的应用姿势
前言因为单页面开发,所以统计代码的封装和考虑点是我们需要着手设计的(比如维护性)。cnzz提供的js注入有四种方式,如下我这边用的是第一种,为了方便定位问题,采取问答式来写这篇水文。实现cnzz js的注入最普通的就是我们直接去操作html的head,然后手动复制那么一段进去;若是我们要考虑下维护性,基于 vue cli 3 构建项目的小伙伴可以用脚手架封装的特性来...原创 2019-06-13 00:03:21 · 1467 阅读 · 0 评论 -
Vue 2.x折腾记 - (20) JSX在业务中的具体实践以及跟React书写的差异化
前言Vue JSX:让Vue支持JSX来书写代码的一个开发构建依赖。最近已经到1.0 正式版了,稍微梳理下,就落实到具体业务去尝试。更多的姿势可以看上面仓库的README,这里只说说我用到的。差异化这里仅仅列出我写这篇文章时候脑海能回忆起来的React写JSX很自然,毕竟是自家倡导的类名需要做classname化props的传递可以直接 {...props}节点的传递,通过{...原创 2019-05-30 12:36:21 · 562 阅读 · 0 评论 -
Vue 2.x折腾记 - (19) 基于Antd Design Vue 封装一个符合业务的树形组件
前言原型上有个权限分配的功能;仔细翻了下对应的文档(antd vue),发现有那么一个树形控件,但是没有上面部分全局控制的功能。那么只能自己动手改造出一个符合业务的了,有兴趣的看官可以瞅瞅。效果图实现的思路首先先梳理下要实现的功能点要考虑默认值的传递以及产生的联动全局开关对树控件产生的影响子项操作要反馈给全局实现联动;最后避免太多服务器资源(若是勾选一次触发一次有点大)...原创 2019-04-23 14:25:07 · 4358 阅读 · 0 评论 -
Vue 2.x折腾记 - (18) 用Vue的Inject Provide结合Event Bus来实现局部的状态维护
前言原型有个东西,看着是几个功能组件的组合体;想拆分成对应的组件(全部写在一起是贼恐怖的事情),又不想用Vuex这类来实现。那最终的方案就是Vue的eventbus了效果图只展示部分功能,实际原型要复杂的多;原型大体是这样的实现原理其实就是各个组件独立维护自己的状态,组件的默认值从外部传入;而内部通过watch在immediate立即触发复制一份到data,再watch...原创 2019-04-18 17:57:07 · 1054 阅读 · 2 评论 -
Vue 2.x折腾记 - (17) 基于Ant Design Vue 封装一个配置式的表单组件
前言在写这个的时候,还是不信邪的用了vue jsx的风格去写东西,当组件的东西多了起来之后,各种报错;没错,最终我又回归到传统的写法;上一篇写了个搜索的封装,到写这个的时候发现有所可以优化的地方。效果图实现思路和功能基础的功能直接配置上来渲染,而上传组件就不大合适了;所以选择了slot来实现,如何保证传入的form-item的布局一致,则是拿slot-scope我这边选型用的...原创 2019-04-16 22:12:51 · 6959 阅读 · 0 评论 -
Vue 2.x折腾记 - (16) 基于Ant Design Vue 封装一个配置式的表单搜索组件
前言这次的后台管理系统项目选型用了Vue来作为主技术栈;因为前端时间用过React来写过项目(用了antd),感觉很棒棒。这次就排除了Element UI,而采用了Ant Design Vue;分析整个项目原型后,发现又可以抽离类似之前的React表格搜索组件React 折腾记 - (6) 基于React 16.x+ Antd 3.封装的一个声明式的查询组件(实用强大)效果图响...原创 2019-04-10 12:11:22 · 7186 阅读 · 1 评论 -
Vue 2.x折腾记 - (15) 捣鼓一个中规中矩loading组件
前言最近有一个新的项目,UI大佬不知道从哪里找来了一张GIF丢到蓝湖,说作为全局的页面loading ,但是想了想,还是还是自己画一个。一开始想过用svg,canvas;最终还是选择了css3+js来实现这个效果;gif的缺点挺多,至于为什么又排除了svg和canvas;是因为css3+js可控性更强,不管是大小还是颜色,还是响应式(我的项目走的vh,vw)那套来适配;可以借助打包插件...原创 2019-04-01 19:45:12 · 2891 阅读 · 5 评论 -
Vue 2.x折腾记 - (14) Nuxt.js 2 正式版升级采坑以及部署姿势改动
前言记录下过程遇到的一些问题及修正知识;之前用的nuxt 1.4, 仅做备忘录,有兴趣瞧瞧,没兴趣止步;问题开发模式正常,部署模式下找不到静态资源因为我这边用的nginx, 这个需要配置下nginx静态资源识别 location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|mp4|ico)$ { expires 7d; access_l...原创 2018-09-30 19:40:05 · 3475 阅读 · 1 评论 -
Vue 2.x折腾记 - (13) Nuxt.js写一个常规音频的播放组件,动态注入微信,新浪微博的js-sdk
前言只是一个常规的播放组件,需要考虑微信,微博这类环境的播放微信和微博,若没有用其官方的js-sdk初始化,没法播放….我的文章从来都不推崇copy,仅供参考学习..具体业务具体分析定制才是最合理的前置基础vue &amp;&amp; vuexES5+Nuxt的基本用法 这篇文章的内容需基于上篇内容的,要用到一些设备信息 Vue 折腾记 - (...原创 2018-08-25 15:03:29 · 1586 阅读 · 0 评论 -
Vue 2.x折腾记 - (12) Nuxt.js写一个校验访问浏览器设备类型及环境的中间件
前言这个需求非常常见,分享出去的页面的有时候在手机访问,有时候别人是PC打开的;若是不是共享同一个页面的情况,就需要拦截跳转了;当然你要共享同一个页面也可以(放大化到PC也需要添加某些CSS,也需判断设备)思路本质上还是校验UA, 只是这次是从req拿到,而不是从客户端获取再做处理客户端的处理的姿势拿到window.navigator.userAgent写一...原创 2018-08-24 13:48:39 · 4710 阅读 · 9 评论 -
Vue 2.x折腾记 - (11) @Vue/Cli 3.0.0 图形化项目管理,相当人性化
前言@vue/cli v3从开始到现在已经经历了四个月的迭代(目前RC2),除了终端初始化的姿势,还引入了一个新的项目初始化姿势;Web端的初始化,体验了一下,效果很不错;所以记录一下.后方多图,感兴趣的可以瞧瞧,不感兴趣的请止步,免得浪费你的时间,谢谢..安装npm i -g @vue/cli 常规命令大体中文注释下 Usage: vue...原创 2018-06-16 12:36:06 · 10164 阅读 · 1 评论 -
Vue 2.x脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)
前言文章内容覆盖范围,芝麻绿豆的破问题都有,不止于vue; 给出的是方案,但不是手把手一字一句的给你说十万个为什么!有三类人不适合此篇文章:“喜欢站在道德制高点的圣母婊” – 适合去教堂“无理取闹的键盘侠” – 国际新闻版块欢迎你去“有一定基础但又喜欢逼逼的人” 得得得,老子知道你厉害了,你好牛逼,这些问题那么简单,都是小白看的这种傻瓜文,简直浪费老子的时间!对于以上三类人,走吧,这里原创 2017-11-07 18:22:45 · 14504 阅读 · 2 评论 -
Vue 2.x折腾记 - (10) 给axios做个挺靠谱的封装(报错,鉴权,跳转,拦截,提示)
前言不推荐完全copy过去,可以看看我是如何针对我这边业务; 做的一个axios的封装及实现的思路需求及实现统一捕获接口报错弹窗提示报错重定向基础鉴权表单序列化实现的功能统一捕获接口报错 : 用的axios内置的拦截器弹窗提示: 引入 Element UI的Message组件报错重定向: 路由钩子基础鉴权: 服务端过期时间戳和token,还有借助路由的钩子表单序列化: 我这边原创 2017-08-27 10:55:43 · 20700 阅读 · 4 评论 -
Vue 2.x折腾记 - (9) 写一个挺靠谱的typeahead组件
前言之前那个typeahead写的太早,不满足当前的业务需求 而且有些瑕疵,还有也不方便传入数据和响应数据.. 于是就推倒了重来,写了个V2的版本看图,多了一些细节的考虑;精简了实现的逻辑代码效果图实现的功能1: 鼠标点击下拉框之外的区域关闭下拉框 2: 支持键盘上下键选择,支持鼠标选择 3: 支持列表过滤搜索 4: 支持外部传入列表JSON格式的映射 5: 支持placeholder的原创 2017-08-25 13:59:16 · 1962 阅读 · 0 评论 -
Vue 2.x折腾记 - (8) 写一个挺靠谱的多地区选择组件
前言这个不是三级联动的地址组件;这是在这个基础需求上增加多地区选择的功能;我也不想这么个玩意的,但是产品需求就是有这么个东东.上基友社区找了下,又木有这类型的组件…只能自己动手丰衣足食了..原创 2017-08-20 22:46:15 · 5120 阅读 · 3 评论 -
Vue 2.x折腾记 - (7) 写一个挺不靠谱的Vue-Echarts组件
上基友社区看了下,发现对echarts的封装都是打包进去的…想想就还是算了.. 图表这货.说实在的,若不是整个系统大量用到,打包进去没必要…CDN是个好东西,我们完全可以写一个异步加载JS然后封装按需调用…至于你能学到什么,见仁见智了…不过有所收获就是我这文章的意义所在了原创 2017-07-25 18:08:30 · 10288 阅读 · 3 评论 -
Vue 2.x折腾记 - (6) 写一个不大靠谱的backToTop组件
返回顶部这个功能用jq实现,好容易实现,一个animate配合scrollTo就搞定了今天我们来试试vue封装一个原生js实现的返回顶部; 写起来够呛,借助github,看了别人的gist,稍微封装了下;当然不是用scrollTo直接调位那种,没有过渡效果怎么说得过去!!还是捣鼓出来了.废话不多说,看效果图原创 2017-07-24 22:22:22 · 4327 阅读 · 0 评论 -
Vue 2.x折腾记 - (5) 写一个不大靠谱的selectSearch组件
前言这个功能在网站中也很常见;下拉选择带搜索 基于之前的typeahead组件的基础上完善, 把过滤计算放在了computed ,其他逻辑也有所优化,代码更好理解效果图实现逻辑原创 2017-07-22 14:15:25 · 1452 阅读 · 0 评论 -
Vue 2.x折腾记 - (4) 写一个不大靠谱的 loading 组件
前言有需求,就要动手丰衣足食…公司考虑兼容IE9,那么css3 animation写的loading就无缘了 因为keyframes IE10+ , 那么要实现会动且可控的(颜色,大小),好像就剩下svg大佬了;依旧不废话,看效果图2017-07-26: 调整了样式,加入了可控的提示文字效果图先说说实现的思路一个遮罩层,一个显示loading…通用法则svg动效的loading直接git上原创 2017-07-21 12:13:51 · 2377 阅读 · 0 评论 -
Vue 2.x折腾记 - (3)写一个不大靠谱的typeahead组件
typeahead在网站中的应用很多..今天跟着我来写一个不大靠谱的typeahead;你能学到什么? 自定义事件遍历的思想功能细节的考虑原创 2017-07-20 15:17:05 · 1139 阅读 · 0 评论 -
Vue 2.x折腾记 - (2)写一个不大靠谱的面包屑组件
前言这个组件比侧边栏的简单许多.. 那么这个你能学到什么,见仁见智哈….原创 2017-07-18 13:47:30 · 6895 阅读 · 1 评论 -
Vue 2.x折腾记 - (1)写一个不大靠谱的二级侧边栏
前言本来想写个新手系列教程..发现这种东西一搜索一大把; 那就写点实战类的吧;这篇文章你能学点什么? 当然是一些常见内置指令的用法,组件过渡,遍历的思路等等效果图实现思路原创 2017-07-14 18:34:31 · 10708 阅读 · 4 评论 -
Vue折腾记-(1)初探
前言组件化的框架太多,比如angular , react ,vue;为什么选择学习Vue , 原因有这么几个(个人);1. angular我个人感觉很臃肿,比较合适大型项目; 2. react语法变动有点快..在观望中(0.10 0.11 0.12 15.1)…看的我吐血;书白买了 3. Vue相对来说较轻量, 而且语法看起来还比较好上手什么是Vue原创 2016-04-26 11:40:12 · 11547 阅读 · 0 评论