- 博客(26)
- 收藏
- 关注
RSS订阅
原创 vue3.0&qiankun2.0极速尝鲜，微前端进阶实战！
wl-mfe基于 vue3.0-beta 及 qiankun2.0 极速尝鲜！微前端进阶实战项目。项目地址：wl-mfe微前端实战详细入门教程及解放方案请转至我另一篇文章：微前端实战看这篇就够了 - Vue项目篇。项目地址：wl-micro-frontends [wl-qiankun] && 在线访问最终效果项目启动npm run cinit // 使用c...
2020-04-28 18:32:26
6837
2
原创 微前端实战看这篇就够了 - Vue项目篇
wl-micro-frontends [wl-qiankun]本项目采用 vue + qiankun 实践微前端落地。同时qiankun是一个开放式微前端架构，支持当前三大前端框架甚至jq等其他项目无缝接入。项目启动npm run cinitnpm run init下载依赖，因为是批量下载所有应用下的依赖，推荐cinit节省下载时间npm run serve 运行项目，同样，批量...
2020-04-07 15:46:56
2806
2
原创 微前端实战看这篇就够了 - Vue项目篇
qiankun + vue + element 的微前端架构项目，主项目与子应用均使用vue。支持三大前端框架可根据自己需求调整。微前端 qiankun微前端是什么、为什么要做微前端、qiankun是什么这些笔者将不再叙述，在前端微服务话提出的两年里已经有过了很多次的讨论和“定义”。qiankun有兴趣的可以搜一下。暂时还对这方面未有过了解的同学-> 传送门：可能是你见过最完善的微前...
2020-01-10 15:13:08
9024
7
原创 wl-gantt：一个简单易用且高度可配置的甘特图进度计划项目管理插件
wl-gantt简介目前市面上最有名的几个gantt插件占据江湖了非常久远的时间，它们古老又强大。但无一例外的是：它们收费或极其难用并且依赖非常古老的技术，其中有些技术现在入行的新手甚至从未听闻。【jQueryGantt】【plusgantt】【dhtmlx】不可否认它们都非常的强大，不管是从性能还是功能性。但是大多的业务需求并不需要如此庞然大物才能满足需求。另一方面古老的技术稀缺的文...
2019-11-26 19:37:12
9506
10
原创 美化nwjs生成的桌面程序安装包
上期讲到用nw.js打包vuecli3创建的项目为桌面程序：传送门：使用nw.js将vue项目打包为可在xp系统运行的桌面程序。打包完成之后却发现打包出来的是一个文件夹，里面有可执行程序exe和一堆环境或资源文件，这么一个文件夹丢给客户安装显然太不优雅。这期就讲下如何将这一堆东西美化成一个.exe安装包。本文先粗浅研究美化程序在vuecli3项目上的实现，主要参考不爱吃西红柿的文章：用 vue2 和 webpack 快速建构 NW.js 项目(3)，并将其修改为在vuecli3项目上的实现。美化nwjs
2021-03-03 09:26:58
494
原创 使用nw.js将vue项目打包为可在xp系统运行的桌面程序
前情提要在nw.js入门最如丝般润滑的教程一文中，作者介绍了简单的使用nw运行html文件为桌面程序以及将html文件打包为桌面可执行文件exe。看vuecli创建的工程打包成exe文件可直接从【在vuecli创建的项目基础上增加nw插件无缝转化为桌面程序】目录开始。本文主题以上文运行和打包方式将vue项目打包为桌面可执行程序在vuecli创建的项目基础上增加nw插件无缝转化为桌面程序可在xp系统运行支持自动更新将vue项目打包为桌面可执行程序将vue项目打包生成的dist目录下的
2021-03-03 09:26:26
1541
1
原创 nw.js入门最如丝般润滑的教程
nw.js入门下载nw.js您可以从官网获取最新版本的文件,或通过源代码构建.进入官网后点击下载按钮你会看到下面这个图片显示的内容，选择最新的sdk版下载后的文件解压缩后你会看到如下图的文件目录使用nw.js运行你的代码为桌面程序新建你的代码存放的文件夹，比如说‘app’文件夹在app文件夹内新建index.html你可以任意新建你的文件夹、html的名字和路径，只要你在下面package.json中的main字段配置一致即可在app文件夹内新建package.js
2021-03-03 09:25:49
517
原创 每日情话之跟着大佬学撩妹，哦不node邮件服务器
node-mail-service基于node的邮件服务 定时每日给女朋友们发送情话嘿嘿嘿 就是照着大佬学习的Github项目地址启动服务git clone 本项目yarn install 或 npm installyarn serve 或 npm run serve创建你的邮件服务找一个你喜欢的文件夹执行 yarn init 创建一个package.jsonyarn add nodemailer axios node-schedule 下载要用到的三个依赖：获取情话、邮件
2021-03-03 09:24:48
351
原创 使用脚本一键打包并上传docker镜像
笔者搞了一年多微前端项目，一个团队管理十个微应用，换成docker镜像部署后，发布操作一下从原来的脚本直连服务器的1分钟变成了几十分钟，尤其上传每个应用到各自的阿里云仓库。这里就再写个脚本一键打包docker镜像并上传阿里云。本文只讲怎么制作一个脚本帮助去减轻开发人员负担，关于docker-compose的配置见：使用各种姿势舒服的部署微前端项目（上：打包与上传）效果图[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jqCTmRA6-1614155603461)(http
2021-02-24 16:33:49
899
原创 使用各种姿势舒服的部署微前端项目（上：打包与上传）
微前端作为解决巨石应用模块化和降低技术框架变动风险的神器，我觉得是当下前端发展的一大方向，可以在未来5-10年内保持生命力。作者从2019年12月第一次使用qiankun框架落地微服务以来已经过去了一年多的时间，形成了、脚手架、工程结构设计、日常开发维护、性能优化、部署等一整套流程。之前有两篇文章讲了qiankun的入门文章：qiankun微前端实战看这篇就够了 - Vue项目篇:这篇文章编写的较早，大致在19年12月份当时qiankun还在1.x版本，现在关于微应用注册及应用间通信的部分已经和现版本
2021-02-24 16:33:02
1499
2
原创 使用各种姿势舒服的部署微前端项目
微前端作为解决巨石应用和降低技术框架变动风险的神器，我觉得是当下前端发展的一大方向，可以在未来5-10年内保持生命力。作者从2019年12月第一次使用qiankun框架落地微服务以来已经过去了一年多的时间，期间也产出了两篇入门文章：qiankun微前端实战看这篇就够了 - Vue项目篇 和 vue3.0&qiankun2.0极速尝鲜，微前端进阶实战！，有兴趣或者刚接触微前端的同学可以去看下。经过拆分之后，一个巨石应用变成了几个甚至几十个子应用，那么这么多应该该如何友好又舒服的部署呢，下面就来详细
2021-01-25 19:13:48
509
原创 一个基于 elementUi的树形下拉框组件vue
wl-vue-select，wl-tree-select简介用于vue框架的树形下拉框及带全选的普通下拉框。Tree drop-down box for vue framework and ordinary drop-down box with select all.本组件提供全选下拉框和树形下拉框功能。wlVueSelect这是一个基于 elementUi 的 el-select 组件...
2020-04-01 10:34:42
2547
原创 一个基于vue和element-ui的树形穿梭框组件
#el-tree-transfer##简介·请先阅读文档及版本说明因为公司业务使用vue框架，ui库使用的element-ui。在市面上找到一个好用的vue树形穿梭框组件都很难，又不想仅仅因为一个穿梭框在element-ui之外引入其他重量级插件，因此就有了el-tree-transfer。轻量，易用，无需投入其他学习成本。el-tree-fransfer是一个基于VUE和element-u...
2020-03-30 16:15:53
4018
13
原创 用于vue框架的文件管理器插件，云盘、网盘。
wl-explorer简介用于vue框架的文件管理器插件，云盘。File manager plug-in for vue framework, cloud disk.入行三年的小前端带你三天撸一个文件管理器云盘系列：一个基于Vue和ElementUi的文件管理器插件，提供类似某云盘操作台的功能。此组件较为复杂，并且有些设定可能太贴合原来的项目。初次使用建议clone项目做对照，另有q群回复...
2020-03-30 16:13:43
6817
5
原创 手摸手教你在vue项目中使用mockjs模拟数据入门
简介话不多说，把手拿来。珍爱生命，远离后台。背景在前后端分离模式项目开发过程中，前端的界面展示、交互逻辑往往需要后台接口数据支撑，然而万恶的后台总跟不上有我们美丽的前端小姐姐进度。于是我们不由得仰天长叹，难道就没有即无需依赖后台又能完美展示界面数据，即能保证前端交互的完整性又不太费事儿的方法吗？答案当然是有的~~~~ 下面就请我们的主角登场Mockjs介绍Mock官网首页是这么定...
2020-03-05 18:45:43
993
1
原创 一个用于在浏览器上展示bim模型的vue插件
wl-bim-viewer一个用于在浏览器上展示bim模型的vue插件，可以预览转化后的CAD文件。基于vue和autodesk forge viewer写成。目前支持单模型加载及多模型顺序加载。其他特性正在扩展中。在线访问快速上手npm i wl-bim-viewer -Simport wlBimViewer from "wl-bim-viewer";`import "wl-b...
2020-02-21 18:12:39
5948
1
原创 如何让scss变量能够当做js变量来使用
如何让scss变量能够当做js变量来使用当前我们使用scss变量有两个痛点：需要手动导入无法与js建立联系或者很难，后续不能在此基础上做一些骚操作为了解决这两个问题，我们以创建js文件以json格式定义scss变量，然后通过配置webpack的解析规则来达到即能像普通scss一样使用，又能作为js变量使用的目的。scss变量使用规范变量创建所有scss变量在style/varia...
2020-01-20 11:37:55
5505
2
原创 wl-mapper：一个js对象映射类，尝试解决前后端分离大量字段名不对应问题
wl-mapper在前后端分离的开发环境下，前后端并行开始时势必会产生双方定义字段完全不统一的问题。比较规范的公司会在代码开发前先进行前后端详细设计文档的编写和评审，但是一方面实行此流程的公司不多又繁琐，一方面后端也不保证写好文档后在后续的开发中就一定不再更改字段名。在笔者的开发过程中此问题尤为突出：1. 编写文档耗时耗力，且不为开发重视，敷衍了事2. 开发周期实在太短，测试的时间都被优...
2020-01-02 14:16:00
1233
原创 Vue项目前后端分离下的前端鉴权方案
Vue项目前后端分离下的前端鉴权方案技术栈前端Vue全家桶，后台.net。需求分析前端路由鉴权，屏蔽地址栏入侵路由数据由后台管理，前端只按固定规则异步加载路由权限控制精确到每一个按钮自动更新token同一个浏览器只能登录一个账号前端方案对于需求1、2、3，采用异步加载路由方案首先编写vue全局路由守卫排除登录路由和无需鉴权路由登录后请求拉取用户菜单数据在vue...
2019-11-28 18:08:21
1829
原创 一个基于vue和element-ui的甘特图组件，gantt、项目管理。
# wl-gantt# 简介 目前市面上最有名的几个gantt插件占据江湖了非常久远的时间，它们古老又强大。 但无一例外的是：它们收费或极其难用并且依赖非常古老的技术，其中有些技术现在入行的新手甚至从未听闻。 【jQueryGantt】【plusgantt】【dhtmlx】 不可否认它们都非常的强大，不管是从性能还是功能性。但是大多的业务需求并不需要如此庞然大...
2019-11-26 19:29:18
6614
11
原创 crypto-js解密buf-8格式报错问题
`Malformed UTF-8 data at Object.stringify `https://segmentfault.com/a/1190000021108162搜了网上资料都是在说加密数据必须是8的整数倍，并给出了相应的解决方案，但是我经过排查发现我的报错并没有出在加密数据上，而是因为加密的key不是偶数！##快速上手`npmiwl-explorer-S````jsvascriptimportwlExplorerfrom"wl-explorer";`import"wl-explorer/lib/wl-explorer.css"Vue.use(wlExplorer);```...
2019-11-11 17:19:50
11593
1
原创 一个基于elementUi的省市县三级联动地址插件，数据本地化
# wl-address## Project setup```npm install```### Compiles and hot-reloads for development```npm run serve```### Compiles and minifies for production```npm run build```...
2019-10-17 20:54:56
857
原创 一个基于 elementUi的vue树形下拉框组件
# wl-vue-select#简介本组件提供全选下拉框和树形下拉框功能。`wlVueSelect`这是一个基于 elementUi 的 el-select 组件的二次封装的下拉框，提供了全选功能和默认选中功能；`wlTreeSelect`这是一个基于 elementUi 的 el-tree 组件的二次封装的下拉框，提供了树形数据支持和默认选中功能；因这两个需求非常...
2019-10-17 20:51:07
1777
原创 echarts设置图标图例legend为圆，长方形，扇形等
echart 设置图例图标形状legend: {data: ["总数", "已解决", "未解决"],icon: "circle", // 这个字段控制形状 类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，noneitemWidth: 10, // 设置宽度itemHeight: 10, // 设置高...
2018-08-16 10:28:15
80399
3
原创 一个基于vue和element-ui的树形穿梭框组件
#el-tree-transfer##简介---el-tree-fransfer是一个基于VUE和element-ui的树形穿梭框组件，使用前请确认已经引入[element-ui](http://element.eleme.io/#/zh-CN/component/quickstart)！此组件功能类似于`element-ui`的[transfer]...
2018-07-06 16:57:35
18991
39
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人