自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 Vue2在实际项目中的应用

1,项目目录结构概览 2,命名规范概览 3,前端工具,js框架以及库介绍 4,模块划分以及路由配置 5,程序入口启动 6,公共组件介绍 7,服务层介绍 8,打包发布 9,表格组件功能介绍 ...

2019-05-08 14:13:44

阅读数 132

评论数 0

原创 ES6学习系列目录

ES6学习系列目录

2015-12-14 08:46:16

阅读数 1741

评论数 0

原创 js全排列函数

function permutate(arr) { let result = []; if(arr.length > 1) { let left = [arr[0]], rest = arr.slice(1, arr.length), preRes...

2019-10-26 14:37:25

阅读数 7

评论数 0

原创 focusin&focusout 与click事件冲突问题

具体问题见:https://stackoverflow.com/questions/53773661/not-able-to-detect-button-press-when-using-focusout-and-focusin-along-with-click 遇到的问题是用jquery on...

2019-09-19 13:32:54

阅读数 36

评论数 0

原创 js canvas图片添加重复背景水印

/** * 给图片添加水印 * @memberof DomUtils. * @param {string} dataUrl - png图片的data url * @param {string} text - 水印文字 */ watermarkImage (dataUr...

2019-09-11 10:53:29

阅读数 41

评论数 0

原创 typescript枚举类型编译后代码技巧

var Tristate; (function(Tristate) { Tristate[(Tristate['False'] = 0)] = 'False'; Tristate[(Tristate['True'] = 1)] = 'True'; Tristate[(Tristate[...

2019-09-09 18:08:57

阅读数 38

评论数 0

原创 基于Element UI的Select控件实现多选框中单行显示&左右移动

控件主要功能,可以单行显示多选的tag,并且可以利用左右键移动tag在组件中的位置 直接上代码: <el-select v-model="tags" ref="tagsSelect" multiple filter...

2019-09-07 10:24:24

阅读数 90

评论数 0

原创 Element UI Popover组件多次点击后不再居中于触发节点的解决办法

在并排渲染多个popover组件的时候,当popover里面的内容宽度不一样,点击几次就会出现popover不再相对于触发DOM居中了,将出现很大的偏移。但是在触发滚动条或者改变窗口大小时,popover位置又会调整回来。这是因为element ui在使用的popper.js控件中监听了resiz...

2019-09-07 10:02:08

阅读数 16

评论数 0

原创 Vue项目中使用mockjs

mockjs功能还是挺强大的,网上好多文章介绍有的说在dev-server.js中导入,这样的问题是build中掺入了业务逻辑层的文件。有的是在main.js中导入,还有的在组件中导入,但问题是,同一套代码在构建dev版和prod版的时候还需要手工改代码,才能自动build。 现在要达到一个目的...

2019-07-17 17:16:01

阅读数 268

评论数 0

原创 Array.prototype.reduce使用技巧

先看一下规范对这个方法的几个说明: Array.prototype.reduce ( callbackfn [ , initialValue ] ) NOTE 1:callbackfnshould be a function that takes four arguments.reduceca...

2019-07-16 11:16:57

阅读数 33

评论数 0

原创 Vue & Typescript 组件传递数组问题

问题是要区分数组是null还是空或者有值,对应的显示会不同。null时什么都不显示,空数组是显示查找结果为空,有值显示列表。 由于查找的过程在父组件进行,需要把数据传递给子组件,在子组件中用prop进行声明。那么这个数组的初始状态怎么设置呢? 一开始是在子组件中用@Prop设置默认值null:...

2019-06-28 16:45:31

阅读数 243

评论数 0

原创 Vue2在实际项目中的应用——表格组件功能介绍

TableList组件是以ElementUI Table表格组件为主,并封装了一系列其它组件,提供了以下主要功能 筛选功能 搜索功能 分页功能 加载过程以及错误信息提示功能 行展开功能 单选行功能 switch开关组件功能 progress进度组件功能 分行显示日期时间组件功能 ...

2019-05-14 14:20:44

阅读数 134

评论数 0

原创 Vue2在实际项目中的应用——打包发布

由于这个项目需要build出来三个端,所以需要对build.js文件做一些修改,以满足需求。在执行命令的时候会用如下方式调用: npm run build:operation npm run build:label 这样会直接build某一端的代码。 如果直接运行npm run build...

2019-05-13 14:33:39

阅读数 64

评论数 0

原创 Vue2在实际项目中的应用——服务层介绍

所谓的服务层就是对http请求的封装,最好不要直接在业务逻辑的代码里掺杂像下面类似的直接ajax调用: $.ajax({ url: 'https://url.com/user', type: 'get', dataType:'json', conten...

2019-05-13 14:08:09

阅读数 42

评论数 0

原创 Vue2在实际项目中的应用——公共组件介绍

这个公共的库在项目中是通过dependencies引入进来的: "dependencies": { 。。。 "frontend-library": "git+https://git.com/Frontend/library.gi...

2019-05-10 14:31:55

阅读数 73

评论数 0

原创 Vue2在实际项目中的应用——程序入口启动

由于一个项目中要build出来几个访问端口,所以会有几个对应的main-xxx.js。 main中主要干的几件事: 1)加载各种库,包括element-ui和通用的library 2)判断是开发环境还是生产环境,进行不同的初始化过程 1)如果是开发环境,直接初始化app组件,假定用户信息在...

2019-05-10 14:07:25

阅读数 150

评论数 0

原创 Vue2在实际项目中的应用——模块划分以及路由配置

整体项目模块的划分以业务逻辑为主,不按照vue组件类型进行划分。按照组件类型划分会很难维护,降低查找文件的速度。 下面以系统管理举例: 系统管理在UI上是一个一级菜单,下面会有三个二级菜单,包括审计,消息管理和发布者管理。所以直接映射到源代码结构就是system-mgmt目录下有三个二级目...

2019-05-09 14:21:48

阅读数 174

评论数 0

原创 Vue2在实际项目中的应用——前端工具,js框架以及库介绍

前端的工具就是webpack2,做了以下几点优化 1)加入了StyleLintPlugin,对scss进行格式进行检查 2)使用HappyPack,ParallelUglifyPlugin进行build的速度优化 3)使用ContextReplacementPlugin优化moment库的多...

2019-05-09 13:50:05

阅读数 79

评论数 0

原创 Vue2在实际项目中的应用——命名规范概览

vue的官方网站现在有了一个风格指南(https://cn.vuejs.org/v2/style-guide/),当时写这个项目的时候,这个指南还不是很完整,所以项目并没有完全遵循这个指南。指南终究是指南,也没必要完全遵循,只要项目组内大家根据使用习惯达成一致就行。 目录命名:一般以小写+中划线...

2019-05-08 15:05:09

阅读数 177

评论数 0

原创 Vue2在实际项目中的应用——项目目录结构概览

项目采用的是Vue2+Webpack2,分成了几个项目:一个通用的library项目,里面是一些公用的组件;一个是平台项目,会build出来三个端,每个端不同角色的用户会登陆各自的平台。 下面先看一下library项目结构: 其中: components目录是通用的组件封装,比如表格之类...

2019-05-08 14:12:51

阅读数 154

评论数 0

提示
确定要删除当前文章?
取消 删除