前端
文章平均质量分 79
martsforever
一只菜鸡
展开
-
发布一个基于typescript实现的包到npm
文章目录概述目的内容步骤使用vue-cli3创建一个typescript工程概述目的typescript作为未来前端开发的主流语言,在前端开发的过程中扮演着越来越重要的角色。如果有的同学平时的主要开发内容都是处理业务逻辑,那么可能没有那么容易体会到typescript带来的好处,如果有的同学经常会造一些“轮子”,也就是一些复用性比较强的库(工具函数库或者组件库),那么typescript绝对...原创 2019-11-11 22:06:07 · 3517 阅读 · 0 评论 -
Vue自定义组件:颜色选择器及其实现原理
老样纸,先上效果图:demo操作地址:plain-ui demo打开这个页面之后,在Form中打开ColorPicker颜色选择页面先对这个效果图做一个简单介绍:这个组件左边的实例是启用了设置透明度alpha值的,而右边的禁用了,所以是看起来两种不同的效果;这两个实例通过v-model绑定了同一个值,所以在点击确定按钮的时候,两个都产生了相应的变化,因为右边的没有启用透明度,所以转化...原创 2019-02-18 00:04:33 · 9184 阅读 · 0 评论 -
Vue基于sass实现切换主题
目录1、老样纸,先上效果图效果图说明2、背景3、设计分析a. css变量b. sass实现方案1、老样纸,先上效果图效果图说明图中最顶部三个按钮是用来切换主题色的,然后中间是两个组件,一个是button,一个是input,是组件库内置的组件;最下面下面的组件是开发者自定义的组件card,至于内置组件以及开发者自定义组件的区别,请看下文;顶部三个按钮,代表三种主题色,其中“默认主题”和...原创 2019-04-13 11:06:29 · 4329 阅读 · 6 评论 -
Vue computed以及watch简单实现
Vue computed以及watch简单实现这一次就不先上效果图了,这次先说需求:在vue中,有两个很好用的api,就是computed以及watch,computed为可以自定义计算属性,这个计算属性有哪些优点呢,先说一些相比较于计算属性的其他实现办法,一个是方法,另一个是get属性,实际上两个都是方法,也就是说,模板中绑定的值是一个函数的计算结果,比如这样的{{reverseMe...原创 2019-05-21 20:55:30 · 14202 阅读 · 3 评论 -
使用vue-cli打包过程中的步骤以及问题
1、打包命令是npm run build,这个命令实际上是在package.json中,scripts中build所对应的命令;2、创建一个prod.server.js,这个文件不是必须的,这个文件的用处是在打包完毕之后,通过启动node.js本地服务来访问打包完成的静态文件,不需要的同学可以忽略这一点,prod.server.js文件代码示例:let express...原创 2017-12-21 11:48:38 · 18084 阅读 · 0 评论 -
Vue组件库实现按需加载功能
文章目录简述示例原理babel-plugin-componentelement-ui按需引入babel-plugin-import组件分开打包以及全部打包组件分开打包组件全部打包入口测试按需引入简述按需加载就是需要什么,就只要什么,其他的东西不要。这样做的目的是为了缩小打包体积。示例比如当前流行的web端组件库ElementUI,就有这个按需加载功能;一个系统的登录页,需要的组件是非常少的...原创 2019-08-26 14:24:48 · 12993 阅读 · 7 评论 -
vuecli2创建的组件库工程实现按需引入
目前最新的vuecli版本是3,而vuecli3与vuecli2都使用了相同的命令vue,所以vuecli2被覆盖了,如果要使用vuecli2的init命令创建工程,需要安装一个桥接工具:@vue/cli-init工程地址...原创 2019-08-26 14:31:04 · 1942 阅读 · 0 评论 -
vuecli3创建的组件库工程实现按需引入
工程地址创建一个vuecli3项目:vue create demo-vuecli3-ui手动选择特性,我这里只要Babel以及Css-Professor;然后选择Sass/SCSS,开发者按照自己的喜好来选择css预处理语言;...原创 2019-08-26 14:31:48 · 9124 阅读 · 33 评论 -
Vue实现IOS原生loading效果
文章目录前言效果图资源地址安装原理解析html源码scss源码解析前言无论是在web端还是app端,当页面内需要请求网络资源或者执行比较耗时的操作的时候,都应该显示一个加载中的状态,以获得更好的用户体验。本文主要基于Vue,讲解IOS原生Loading效果的实现原理。效果图资源地址1. 演示地址(gitee)2. 演示地址(github)3. Github代码地址安装npm安...原创 2019-09-23 10:54:52 · 823 阅读 · 0 评论 -
vue-router动态注册路由,实现无需注册页面可跳转
demo工程地址:https://github.com/martSforever/test-router先说一下特性:无需注册页面路由,可直接跳转;页面地址可以在数据库中配置;页面分包加载,进行页面路由跳转的时候才去加载页面组件代码;可配置页面缓存或者不缓存老样纸,先看效果图原理说明:首先是分包加载,当我们根据页面地址进行跳转的时候,首先根据这个页面地址去加载页面imp...原创 2019-01-13 13:39:06 · 11212 阅读 · 0 评论 -
Ionic3 scss引入font-awesome4.7
首先是需要下载font-awesome的依赖文件,在工程src目录下新建一个libs目录放着,放进去以后,将fonts文件夹移动到src/assets目录下,然后将font-awesome文件夹下,除了scss目录以外其他所有无用的文件删除,删完之后目录结构是这样的然后在全局的scss文件里面加入这两行代码就引入了: 我这里是app.scss注意的是,图中的相对路径要保证没有问题$fa...原创 2018-09-21 21:08:49 · 1026 阅读 · 0 评论 -
基于mpvue-router-patch实现路由拦截
目录本文目的在于记录mpvue-router-patch-interceptor的实现过程,基于mpvue-router-patch,以及我以前的两篇博客:JavaScript异步函数同步方法 和原创 2018-07-25 10:23:02 · 6144 阅读 · 3 评论 -
bootstrap响应式布局学习日记
大学放寒假每天待在家里无聊的要死,打游戏又不起劲,于是又研究起了代码。 是这样的,比如我们在一个网页中有一个导航条,导航条上有许许多多选项,比如说有12个(因为bootstrap的栅格系统每行最多只有12个),在普通的的pc机上显示既美观又大方,刚好排满一行,但是在移动设备上,这12个挤在一起就显得非常难看了吧……用户在使用移动设备的时候不得不对屏幕进行缩放才能看清楚导航条里面的字或者准确无误地点原创 2016-02-13 00:38:08 · 3013 阅读 · 0 评论 -
HTML表头固定,表体滚动方案
在前端开发过程中,经常会遇到一个需求就是,需要一个表格展示数据,1、表格头纵向位置固定,纵向滚动时,若表体内容超长时,表头不能移动,表体内容滚动显示;2、表格头横向随表格内容横向滚动;效果展示:关键:1、表头(意义上的)和表体(意义上的)都用一个table来显示;2、因为表体可以纵向滚动,右边多出一个纵向滚动条,所以表体的宽度要比表头的宽度多出17个像素,也就是原创 2018-01-26 18:17:23 · 5916 阅读 · 1 评论 -
angularJs自定义实现侧滑指令
老样纸,先上图:先上代码:html模板代码:<div class="slide-item-wrapper"> <div class="slide-item" ref="slide"> <div class="content" ref="content">原创 2018-06-29 20:13:47 · 817 阅读 · 0 评论 -
mpvue全局引入sass文件
在使用sass开发的时候,我们经常需要在各个页面使用统一的变量,还有一些方法,这种公共的资源如果不进行特殊处理的话,我们在每个页面都需要@import进来才能使用,当页面多起来的话,后期维护起来可能会有点吃力,这里介绍在mpvue下如何处理sass全局引入sass资源文件的步骤:首先需要安装sass-resource-loader(我这里版本号是1.3.3): npm install ...原创 2018-07-24 10:09:28 · 6952 阅读 · 1 评论 -
mpvue样式绑定总结
mpvue样式绑定在使用mpvue的时候,很多同学应该会感到很不方便,比如没法用vue-router,没法在js中控制节点的style属性样式,只能通过样官方推荐的样式绑定的办法控制样式,最难受的是不能用slot,不过总的来说,感觉总比小程序原生开发要方便一点,下面扒一扒mpvue中样式绑定需要注意的几个点。 先上图: 瞄一眼代码:&lt;template&gt; &lt;...原创 2018-07-24 11:38:58 · 14016 阅读 · 3 评论 -
Webpack配置环境切换
目的在项目开发的时候,往往都会有很多套环境,就是俗称的开发环境(供开发人员使用),测试环境(用户测试),正式环境(最终用户正式使用)。每个环境所使用的应用服务器,数据库服务器、域名、端口等等都有可能是不一样的,所以在要求我们能够一套代码能够运行在所有环境的前提下,需要确保我们每次发版的时候,应用连接的都是正确的后台地址,注意,这里说的是前后端分离项目中的前端项目。有的项目在发版前,切换环境...原创 2018-07-24 14:21:30 · 2705 阅读 · 2 评论 -
JavaScript异步函数同步方法
首先这里非常感谢慕课网蜗牛老湿,本文内容是基于老师讲解koa2实现原理的时候整理出来的,好吧,这里直接进入主题。在我们平时进行前端开发的时候,经常需要用到异步函数,最常见的是发送网络请求,在发送网络请求之后,在回调函数中对请求结果再进行下一步操作,下面来模拟这个操作步骤:/** 模拟网络请求的函数*/function request(callback) { let t...原创 2018-07-24 20:24:27 · 18655 阅读 · 2 评论 -
基于koa2中间件原理实现拦截任意对象方法的调用
目的本文目的在于总结前端开发过程中,对对象的函数进行拦截的通用性解决办法。前言在一个系统软件的开发过程中,无论是前后端开发,都经常会出现这么一种需求,就是对某一个方法进行拦截。在java中,有AOP面向切面的编程方式,可以很方便地对某一个对象或者对象的方法进行代理,在前端开发,JavaScript这一块,如果要对一个对象或者方法进行代理,可以简单地自己手动进行操作,无需其他依赖,下面以...原创 2018-07-25 10:09:49 · 4714 阅读 · 0 评论 -
html音频音量调节
在调节音量的时候,我们大多数情况下会使用input type=range的拖动条来控制:volume而在事件触发的时候,我们可能会使用onchange,使用这个的时候,拖动的时候不会音量调节的结果不会立即生效,要立即生效得使用oninput/*调节音量设置*/ function changeVolume(percent){ gainNode.gain.value原创 2016-07-20 17:25:29 · 9567 阅读 · 0 评论