![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端框架
文章平均质量分 72
我的小英短
Q版前端开发攻城狮
展开
-
使用Proxy和defineProperty分别构建一款MVVM框架
导读这些天呢,作为前端界比较火的一件事情就是,vue 3.0的诞生,vue 3.0除了在用法上有些许变化外,最主要的变化,莫过于数据劫持的方式的改变;vue 3.0使用的是es6的Proxy进行数据拦截的,而2.x的版本呢,则是采用的Object.defineProperty()这样的方式进行对数据的监听,所以呢,今天我们做个实验,什么样的实验呢?我们分别来使用这个Proxy和definePro...原创 2019-10-23 15:27:37 · 399 阅读 · 0 评论 -
vue-router使用详解回顾
官方文档参考地址:https://router.vuejs.org/zh/vue-router 原理图: 1.router-link(1)to属性: to (required) | type: string | Location简述:表示目标路由的链接。当被点击后,内部会立刻把 to 的值传到 router.push(),所以这个值可以是一个字符串或者是描述目标位置的...原创 2018-10-21 23:52:58 · 1850 阅读 · 0 评论 -
vue源码之入口文件解析
由于项目中经常使用vue,所以这次趁有机会赶紧拜读下源码,体验下vue源码的设计风采。一、下载源码Github地址:https://github.com/RiversCoder/vue二、源码项目目录三、加载core内核入口文件index.js 通过看源码我们可以得知这个入口文件:(1)引入了几个对象,包括Vue构造方法(2)初始化全局API : init...原创 2018-10-19 17:32:35 · 2925 阅读 · 0 评论 -
Vue中component标签解决项目组件化の思路
一、 啰嗦几句在vue项目组件化的过程中,遇到了一些问题,什么问题呢?就是在做一个多功能,多可用,多兼容的大组件的时候,发现在这个组件内部,实现了太多的if、for逻辑,包括大量的html元素,虽然说每段功能块都有批注,但是体积还是比较庞大,最近有些需求,需要将页面上的一大块筛选功能剥离开,形成单独的组件,统一数据渲染,统一组件管理,且这些功能无论是样式,或者是从结构来说,差异性都很大,所以考...原创 2018-10-19 13:48:40 · 9194 阅读 · 8 评论 -
ng serve 报错: 95% emitting LicenseWebpackPlugin(node:21768) UnhandledPromiseRejectionWarning…
今天升级了Angular-cli版本到:Angular CLI: 6.2.4 后,初始化了个新项目,cnpm install 安装好依赖后 ng serve 报错。报错信息如下:** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4...原创 2018-10-10 10:20:14 · 7886 阅读 · 0 评论 -
yarn报错 : Could not create the Java Virtual Machine.
yarn使用时候报错信息:Error: Could not create the Java Virtual Machine.Error: A fatal exception has occurred. Program will exit.1. 检测yarn版本 yarn version (成功)D:\me\angular\ng-app>yarn versionHadoop...原创 2018-10-10 10:08:52 · 7069 阅读 · 5 评论 -
快速删除node_modules目录的方法
作为一名前端开发工程师,是否有这样的困扰呢?经常npm操作报错,或者运行ERROR,需要删除node_modules目录下的所有文件,然后重新安装cnpm install,但是每次去那个目录下移到回车站需要5分钟到10分钟,然后清空回收站大概也需要2、3分钟,时间就在这漫长的清除文件的进度条移动中流逝。而且,慢点也无所谓,等吧,咱也不是啥急性子的人。但是最不能容忍的就是,每次删除node_mo...原创 2018-10-09 17:05:52 · 42779 阅读 · 6 评论 -
vue常用创建组件几种方式总结
最近一周需要使用vue开发一个谷歌扩展插件,但是又不能在vue-cli脚手架中开发,所以只能单独引入vue.js整个包进行脚本植入开发。引入vue.js就代表着不能用import、require之类的引入单文件组件文件,只能在文件中开发,或者多个js文件分先后顺序植入开发,然后就出现了一个尴尬的问题就是,忘记了最原本的其他组件创建的方式,所以记录回顾下:1. 全局注册组件:<!DO...原创 2018-09-30 12:35:59 · 10627 阅读 · 0 评论 -
vue-cli项目路由懒加载的三种方式
闲唠嗑几句今天公司有新的项目要开展,需要重新部署新的项目,所以说以前好多忘记的东西,又得重新捡起来一遍,配置路由的时候发现还是使用的普通的使用require懒加载路由,所以在查看文档和资料后又重新总结了一遍,以加深记忆和方便下次查阅。 一、使用import异步引入组件{ path: '/hyh', component: ()=>{ import('@/compo...原创 2018-10-15 17:40:44 · 5915 阅读 · 0 评论 -
Angular-cli 6.x +TS+Json-server打造经典Todo案例
一、闲唠嗑几句以前用Angular的时候也只是用的js构建的应用,还未涉及ts;趁这次有机会,有时间用ts、angular的脚手架工具angular-cli构建一个经典的todo案例;几乎所有的vue、react的基础经典案例都离不开Todo List的应用构建。所以这次也是以Todo案例,来简单了解下ts构建单页面应用,以及请求响应逻辑处理。这次后端的逻辑主要采用前端工具json-serve...原创 2018-10-14 14:13:12 · 2034 阅读 · 0 评论 -
vue后台管理开发所遇到的问题及解决办法
1. vue项目中使用echarts : 最佳解决方法: https://blog.csdn.net/mr_wuch/article/details/70225364 官方实例: http://echarts.baidu.com/examples/2. element-ui 元素绑定不上click事件: 解决方法:采用 @click.native="log...原创 2018-10-13 20:08:24 · 7420 阅读 · 0 评论 -
vue插件的开发流程
趁有机会,简单回顾下vue插件开发的过程。学习本身就是个不断重复滴过程嘛:一、官网插件的开发文档地址https://cn.vuejs.org/v2/guide/plugins.html 二、简单唠一唠但是呢,如果看官网文档的话,有的小朋友可能就云里雾里了,不想再进行下去了,其实vue对于插件的定义就是,使用Vue.use方法,将引入的install方法里面相关Vue操作的方...原创 2018-10-25 12:06:48 · 1259 阅读 · 0 评论 -
根据vue-router实现简易版router路由
快深夜了,简单写点东西,不然还真睡不着觉哒 ~ ~写什么好呢?前些天看了下vue-router的源码结构,理解了下 router-view 和 router-link 的基本实现;所以简单写一个vue-router的小功能版本,实现基本的路由切换,就可以了;好吧,接下来我们开始吧 ~~一、最终路由切换展示二、使用方式其使用方式与原生的使用方式几乎一致,也有部分不同,由于并非使用...原创 2018-10-28 23:30:35 · 1457 阅读 · 0 评论 -
在vue项目中实现echarts中自动轮播聚焦显示提示框tooltip
导读最新需要实现一个需求,echarts折线图,不需要鼠标触控,也能自动轮播聚焦,显示tooltip数据框,我们来看下最终的案例效果演示:附上案例源码initCharts(){ let option = { title: { show: false }, tooltip: { trigge...原创 2019-05-27 19:18:37 · 4561 阅读 · 1 评论 -
gulp流(stream) 插件gulp-filter、gulp-flatten和gulp-if案例解读
导读在gulp实现前端自动化的时候,最多的时候就是对流(stream)的分析处理,在某些情景比较复杂的时候,在流处理的过程中很容易出现问题,就比如一些流需要单独过滤处理,但是之后最终却要一起再处理;或者一些多文件夹层级的文件处理,需要提取某一层级的文件,或者把所有层级的文件全部提取出来,放在一个层级里面;甚至有些管道需要使用条件处理,等等;所以我们这里介绍,gulp-filter、gulp-f...原创 2019-05-22 13:56:26 · 1455 阅读 · 3 评论 -
eslint+sublime text 3 配置和使用(全)
1.全局安装ESlintcnpm install eslint -g2.在项目目录初始化.eslintrc.js配置文件D:\me\web\case03\kdew_internet_website&amp;gt;eslint --init? How would you like to configure ESLint? Answer questions about your style? Wh...原创 2018-12-28 16:19:12 · 2047 阅读 · 0 评论 -
fetch请求获取blob和arraybuffer文件流及核心API使用总结
123原创 2018-12-22 23:16:26 · 26947 阅读 · 0 评论 -
Mockjs前端开发数据模拟测试及深度解析
在项目开发接口联调的过程中,前端开发人员经常需要等待后端提供好数据接口后才能动手联调,所以为了提升开发效率,mockjs这个第三方库诞生了,这个库主要是为了满足前端开发获取接口数据,渲染页面,功能开发,可以不经过mysql、redis等数据库就可以直接联调,所以极大的提高了我们前端开发攻城狮的开发效率;记得之前的博客我介绍过json-server这款前端数据服务第三方库,json-serv...原创 2018-12-09 23:41:28 · 4364 阅读 · 1 评论 -
从零开始构建VUE 客户端和服务端SSR项目
一、服务端渲染 1.基本概念Vue.js 是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将这些静态标记"激活"为客户端上完全可交互的应用程序。2.为什么要使用服务端渲染优点:(1)更好的 SEO,由于搜索引擎爬虫抓取工具可以直...原创 2018-12-15 00:18:54 · 4239 阅读 · 0 评论 -
MVVM框架热门常用的组件库收集整理
在前端项目的开发过程中,少不了需要选择一款组件库作为项目开发的基础,而只要选择对了一款的合适的组件库就能极大的提升开发效率,直接让人体会到飞一般的感觉,简直爽的不要不要的。减少很多冗余的操作,和一些基础的代码整理,让开发更加快乐,让体验更加美好。1.Vue常用的组件库A.element-ui 地址:http://element-cn.eleme.io/#/zh-CNgithub地...原创 2018-12-06 15:32:39 · 1325 阅读 · 0 评论 -
2018年末前端核心基础扩展知识点积累
1.优雅降级和渐进增强概述:渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。 区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功...原创 2018-11-20 17:49:48 · 1767 阅读 · 0 评论 -
Vuex源码阅读理解
1. 提出问题:Vuex是如把store注入到Vue实例中去的呢?this.$store目标文件:mixin.js每个vue实例里面访问this.$store都是访问的mixin混入在beforeCreate生命周期里面的this.$store根据这个mixin.js中的代码逻辑可以知道,在vue2.x的条件下:if (version >= 2) { /*通过m...原创 2018-11-08 12:22:22 · 1751 阅读 · 0 评论 -
javascript裁剪页面(选择DOM)生成图片
想做一个裁剪网页的部分内容,生成图片的功能模块;才开始打算的使用PHP实现,结果发现,并不太好实现,当然有可能是我的水平的原因。但最后,在网上查了下,发现居然可以用JS实现,简直是意外惊喜呀~~!!其主要是通过html2canvas.js实现网页截图功能。 具体使用:<script type="text/javascript" src="http://libs.baidu.co...原创 2018-10-06 17:00:48 · 2385 阅读 · 0 评论 -
Json-server搭建前端虚拟REST API服务
唠唠嗑、为什么要来详细介绍一下json-server呢?因为我们前端开发人员在开发后台管理类项目的过程中打交道最多还是API联调,然后数据渲染页面,或者动态数据绑定。但是有个很矛盾的问题就是,很多时候前后端是一起开发的,有可能后端的进度赶不上前端的进度。一般情况下的解决办法就是在前端应用里面写死数据模拟,在缺少了请求的一个过程后,在更新数据,删除数据等一些页面切换复杂交互的场景下,死数据还...原创 2018-10-12 15:40:48 · 2152 阅读 · 0 评论 -
团队开发前端VUE项目代码规范
一、规范目的: 统一编码风格,命名规范,注释要求,在团队协作中输出可读性强,易维护,风格一致的代码 二、开发SRC目录: 1.Vuex目录 (状态树配置)2.Router目录(路由配置)3.Pages目录 (放置主路由组件 注意命名规范)4.Common目录 (放置静态文件)5.Config目录 (全局配置项,路由拦截,报错信息,等枚举信息)6.Api目...原创 2018-09-22 20:18:11 · 3445 阅读 · 0 评论 -
Redux 信息完善交互
交互需求:完善信息页面后台交互,redux发送更新数据请求,实现异步更新状态树的用户数据,在每次进入完善信息页面时,检测是否已经完成信息补充,如果已完成,直接跳转到状态树上的路由地址,如过没有,就留在当前页面,补充信息成功提交到数据库后才能根据状态树跳转到对应的路由地址。核心代码:(1)点击按钮,执行redux中的update方法:<Button onClick={ v =&...原创 2018-07-25 17:43:13 · 1336 阅读 · 0 评论 -
中小型公司节目控制功能组件开发(WEB)
1. 项目需求:(1)按照IOS已上架应用Skylander IPAD版本功能对应开发功能一样的WEB版(2)核心功能:节目编辑、节目控制 2. IOS项目部分预览图: 3.当前开发页面为节目控制页面: (1)需要开发页面:节目控制页面、模块编辑页面、资源选择页面、素材排版页面(2)节目控制页面:事件(时间)控制组件、模板选择组件、资源选择组...原创 2018-07-17 23:51:38 · 1214 阅读 · 0 评论 -
vuex使用详解回顾
1. 距离上一次使用vuex已经过去两月余,这次项目需要对以前开发的广告系统重构,增删一些新的功能,然后发现以前创建的vuex状态树结构并不是很好,并没有起到太大全局状态树更改的作用,今天捡起来重新用下,使用redux装饰器太久,使用vuex过程中连基本的几个语法糖 mapState, mapGetters, mapActions 和 mapMutations 的使用都忘得差不多了, 风中凌乱中 ...原创 2018-07-11 14:33:06 · 1365 阅读 · 0 评论 -
canvas 模拟真实水波浪动画
1. 核心工具:simplex-noise.min.js2. 工具介绍:(1)动态生成可改变可移动的噪波数据(2)文档地址: https://www.bootcdn.cn/simplex-noise/readme/ 3. 最终渲染演示: 4. Canvas核心过程演示: (1)单次绘制: draw(color,comp){ var amp = 25; //波浪幅度 可以通过函数传递参数更...原创 2018-07-09 20:32:15 · 7476 阅读 · 0 评论 -
Redux+react+node+express登录注册
1. 登录注册移动端WEB页面(组件)结构搭建2. 基本的请求,登陆注册页面跳转交互3. 注册请求使用redux和axios配合发送请求,更新数据,提示错误信息(1)新建user.redux.js文件,设置初始注册字段const initState = {_id: '', isAuth: false, msg: '', user: '', pwd: ''...原创 2018-07-01 13:18:14 · 3227 阅读 · 0 评论 -
axios+redux请求响应更新
1. 安装axios模块cnpm install axios --save2. 配置本地调试请求环境: 在package.json中添加字段 : "proxy": "http://localhost:xxxx" 3. axios请求响应拦截 (请求响应loading加载交互)import axios from 'axios';import { Toast } from 'antd-mobile'...原创 2018-06-21 15:43:56 · 3210 阅读 · 0 评论 -
React-router全解析
第一步、React-router 初体验 1. 安装 react-router-dom : cnpm install react-router-dom --save 2. 引入需要的路由组件:import { BrowserRouter, Route, Link } from 'react-router-dom';3. 创建简单跳转路由(核心代码)<BrowserRouter> ...原创 2018-06-21 11:30:36 · 1455 阅读 · 0 评论 -
APICloud创建APP实现语音转指令的功能
这两天有些语音指令上的功能上的需求,然后回到APICloud创建了个APP,加载了几个语音模块,简单模拟一遍APP上语音转指令的操作。1. 登陆APICLoud账号,创建APP,使用studio IDE 工具,从云端导入基本的APP代码,然后找UI简单设计了个带logo方格的简单页面,直接开撸。2. 由于当时忘记了APICloud的默认设计图的尺寸,然后记成微信小程序的默认尺寸750px去了,尴尬...原创 2018-05-29 19:06:50 · 2843 阅读 · 0 评论 -
八种响应式VUE动效遮罩转场动画开发
简介:使用前端技术,实现后台管理界面的可供预览视频转场特效,可以选择资源后再选择对应的特效组件进行转场预览,然后组合数据发向后端,在由后端推送到安卓端进行对应的视频转场切换。 使用技术:vue 、stylus、jquery、svg(核心)、 javascript 目前包括八种转场: 时钟、百叶窗、扇形打开、十字扩展、分割、覆盖、棋盘推进、溶解 核心技术栈:原生javascript、svg中...原创 2018-07-29 15:57:26 · 7118 阅读 · 0 评论 -
react+redux+react-router构建移动端面板页(回顾)
1. 移动端面板结构:(1)顶部导航 组件(2)底部tab跳转 组件(3)中部路由页展示 组件2. 初始化导航组件和底部tab跳转链接组件(1)通过指定的json数据结构,初始化导航,底部链接,以及底部tab切换图标交互(2)初始化导航:<NavBar mode=“dark">{navList.find(v=>v.path===pathname)...原创 2018-08-04 14:36:25 · 1389 阅读 · 0 评论 -
React高阶组件(表单)应用回顾
1. 首先介绍函数式编程:function hello(){ console.log('大家好,我是harry!')}function getWord(fn){ return function(){ console.log('大家好,我是林宇航'); fn(); console.log('大家好,我是猪猪侠') }...原创 2018-08-05 11:44:54 · 1603 阅读 · 0 评论 -
企业CNPM私有仓库、组件库实现方案
一、为什么要使用组件抽离,外部安装的方法,多处调用的方法? 方便快捷,面向未来式开发,提高效率,避免冗余,提升项目质量,多项目可以同时使用,不用多次重复开发。在团队内部搭建私有仓库,方便团队内部成员代码的共用,不写重复而有无意义的代码。二、组件库的生态圈需要哪些?(1)vue-cli 3.x(2)vue + webpack(3)npm 包管理工具(4)vue组件库、vue...原创 2018-09-26 21:58:26 · 2186 阅读 · 0 评论 -
Angular-cli的安装使用记录
1. 概述: Angular CLI 是一个命令行接口(Command Line Interface),用于实现前端自动化开发工作流程。输入操作命令后,他会执行下面这些事情: (1)创建一个Angular应用(2)运行一个开发服务器(3)添加功能到现有的Angular应用程序(4)单元测试(5)构建打包前端应用程序 2. 安装 (1)前提:(一般来说...原创 2018-10-01 16:57:04 · 1480 阅读 · 0 评论 -
VUE制作谷歌浏览器多类型截屏、抓取信息的插件
提到VUE大家都很熟悉,VUE可以做很多东西,包括SPA单页面应用,WEBAPP应用,小程序应用等等,但是你们有没有考虑过过,使用VUE来制作一款抓取网页数据(文字+截屏)的扩展呢?敢想就要敢做,Let's Go ! 1. 开发目标:完成一款在POPUP窗口登陆后,在当前网页加载出一个可以获取网页文字信息,以及可以多类型截图的工具,截完图可以下载,最终操作完成后可以直接提交 ...原创 2018-09-15 10:38:39 · 3209 阅读 · 0 评论 -
初步了解 typescript 的基本使用
1. 怀揣着对typescript这个javascript的超集的长期的神秘情感,今天终于有机会来揭开它神秘的面纱啦,说完就要行动,Let's Go !2. 安装typescriptcnpm install -g typescript3.简单测试ts函数(1)greeter.ts编写/** * @param {person string} */function gre...原创 2018-09-17 16:39:10 · 1463 阅读 · 1 评论