采用vue和echart实现echarts官网在线预览图表功能,可在线编辑演示图表demo,减少用户本地编写,通过页面中的代码编辑器修改echarts的option属性来实时渲染echarts的展示效果。
vue在默认的情况下,所有文件打到一个js中,文件体积越来越大,那么浏览器在加载的时候,响应时间会很长,那么我们把一个文件拆分成多个文件那么降低加载时间优化了加载速度
在我们使用echarts去做可视化数据展示的时候,会遇见大数据量的展示,为了渲染性能,我们可能需要展示一小部分数据,这时我们就需要用到echarts的datazoom来实现数据的拖拽展示。
首先了解一下同源策略:同源策略、是一种约定,是浏览器最核心也会最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSRF等攻击。所谓同源是指“协议+端口+域名”三者相同;即使是三者中有一个不同就会产生这个跨越的问题
在vue3中使用template模板选项生成组件,控制台提示vue3中提供了模板选项, 但在此版本的Vue中不支持运行时编译
使用webHook脚本自动化部署,省去部署缓解,让项目更好的运行,省去部署时间,只需要提交到仓库,仓库自动执行脚本拉取数据进行更新项目,简单快捷。
angular配置环境变量,减少重复的切换操作,如,域名生产环境和开发环境的切换等,有效的提高开发环境的使用,减少重复配置。
在开发微信公众号项目的时候我们会遇到在测试环境当中运行很好,但是到了生产环境就出现了各种各样的奇葩错误,从而出现了调试问题,比较手机是手机没有像浏览器一样的开发者工具选项,而微信的pc端可以像手机端那样在它内置的浏览器当中访问打开的连接,所以配置了一下在pc端打开微信浏览器的开发者工具选项。
在使用vue进行开发的时候总会遇见seo的问题,但是vue-meta-info是基于2.0开发的,那在3.0中会出现什么样的问题,记录从vue-meta-info2.0到vue-meta-info3.0的兼容使用
vue2.0迁移vue3.0的时候用到了render函数方式去渲染标签,但是当使用内置动画标签去渲染的时候,发现一直渲染不成功,后来发现问题特此记录。
使用js封装事件分发系统,包含三个最基本功能 on (监听事件), off (移出事件), emit (触发事件),来实现事件的监听回调。
追梦猪在做vue项目的时候会遇见各种各样的奇葩报错,以此收集来带入坑不知所措的坑友脱坑,当你在改完vue代码进行热加载的时候,我们的控制台出现了报红(也就是错误),打开控制台f12看到以下如图所示错误:
常说的页面静态化分为两种,一种是伪静态,即url 重写,一种是真静态化。前两篇讲了两种静态化方法,基本都是使用TP自带的静态化机制。但TP写的网站页面路由都比较繁琐复杂,不利于引擎优化。
在hbuilderX启动拷贝下来的项目的时候uniapp云端打包提示:“DCloud APPID非当前账号所有,请联系应用所有者设置此账号为协作者,或重新生成APPID后打包”
刚开始我是通过在index页面直接引入wow.js效果,第一天可以,但是第二天就不行了,看了一下代码的前端执行结果发现动画的名称是none,那问题出现在了没有找到动画名称,为什么会出现这样的我想应该是加载顺序导致的,wow.js在页面加载完以后便已经执行了,但是我的数据还没有获取到所有才出现了数据被display:none;
报错 npm Error : EBUSY resource busy or locked出现这样的错误是因为我们的文件被占用就是其他地方可能在使用文件夹或文件导致无法删除造成的,
我们都知道bindtap和catchtap都是当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。但是bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。
在学习的时候难免遇见奇葩的报错,这个报错就是我们疏忽的报错Cannot find file: 'index.js' does not match the corresponding name on disk: '.\node_modules\React\react'.音译/SRC/导航JS找不到文件:“index.js”与磁盘上的相应名称不匹配:“.\node\modules\react\react”。
Charles是一个抓包工具是一个HTTP代理服务器,HTTP监视器,反转代理服务器,当浏览器连接Charles的代理访问互联网时,Charles可以监控浏览器发送和接收的所有数据。它允许一个开发者查看所有连接互联网的HTTP通信,这些包括request, response和HTTP headers (包含cookies与caching信息)。
Uni-app 官方实例里的 多列选择器picker 在设置数据的时候我们是动态改变的发现,this.value[0] = [数组内容],发现picker里的内容没有改变,很是苦恼,这样难道不对吗,然后追梦猪找到官方文档,如下
MUI click事件无效 click没反应 click监听不到(有的说tap会点击两次,换成click就没事的案例,试了一下不成功还是用tap比较好)
vue环境下使用百度地图定位发现,地图定位不准确,有偏差,带红叉的是我们赋值的没有转换坐标的定位,对号是我们转换了坐标以后的定位,相对来说转换的坐标是符合我们的定位要求的,为什么会出现这样的差别呢,那先来看看坐标的种类:目前国内主要有以下三种坐标系:
最近开始做小程序,通读一遍文档再上手并不算难,但不得不说小程序里还是有一些坑。这里说一下如何实现页面锚点跳转,一个商品分类的效果示意图如下:
最近在做vue-h5项目的时候测试当中有这么个需求:要在微信当中没有执行退出操作的时候,直接关闭窗口,进行退出登录操作要清除用户的信息,经过测试记录使用如下:
子组件通过$emit触发父组件的事件,$emit后面的参数是向父组件传参,注意,父组件的事件处理函数直接写函数名即可,不要加(),参数直接传递到了父组件的methods的事件处理函数了
使用next.js对react进行服务端渲染的时候我们遇见如图问题,Warning: Expected server HTML to contain a matching <div> in <li>.原因是我们的页面上出现了跟服务端不匹配的标签,这个标签产生的原因就是我们动态判断显示的内容,比如说我们在登陆的时候,登陆成功是不是要显示我们的用户信息,填充到界面上,这样我们就知道页面跟服务端的页面发生了变化!
一套创意高端大气滚屏产品企业网站页面模板源码,页面包括首页、问题列表、新闻内页、问题内页、案例列表、联系我们、案例内页、新闻列表、关于我们共9个页面。
一套H5响应式创意家具饰品页面html源码模板,页面包括实体店、新闻内页、关于我们、新闻列表、案例列表、产品内页、案例内页、产品列表、案例封面共10个页面
html5响应式自适应医疗设备网站html页面模板源码,页面包括首页、新闻内页、下载列表、新闻页、联系我们、相册列表、公司简介、下载页、在线留言、产品页、产品内页共11个页面
这是一套HTML5高端大气响应式网络科技公司网站静态页面html模板源码,页面包括产品详细、价格、新闻列表、联系我们、新闻详细、产品列表、案例列表、案例详细、关于我们共10个页面。
这是一套水果商城网站模板,页面包括地址管理、个人账单、账单明细、绑定手机、新闻页面、我的红包、退换货管理、我的收藏、评价管理、发表评论、优惠券、验证邮箱、我的足迹、框架、首页、实名认证、个人资料、商品页面、登录、物流、我的消息、模板、订单管理、订单详情、修改密码、结算页面、安全问题、钱款去向、注册、安全设置、搜索页面、支付密码、购物车页面、全部分类、付款成功页面、个人中心等共39个页面。
一套宽屏简洁大气代理工商财税公司注册记账网站模板,页面包括代理记账、许可证件、资质详细、公司注册详细、公司注册、关于我们、联系我们、财税知识、资质代办共10个页面
AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发。如同其他的抽象技术一样,这也会损失一部分灵活性。换句话说,并不是所有的应用都适合用AngularJS来做。AngularJS主要考虑的是构建CRUD应用。幸运的是,至少90%的WEB应用都是CRUD应用。但是要了解什么适合用AngularJS构建,就得了解什么不适合用AngularJS构建。
React为了更高超的性能而使用虚拟DOM作为其不同的实现。 它同时也可以由服务端Node.js渲染 - 而不需要过重的浏览器DOM支持,许多人使用React作为MVC架构的V层。 尽管React并没有假设过你的其余技术栈, 但它仍可以作为一个小特征轻易地在已有项目中使用
Vue.js 是用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API。从技术上讲, Vue.js 集中在 MVVM 模式上的视图模型层,并通过双向数据绑定连接视图和模型。实际的 DOM 操作和输出格式被抽象出来成指令和过滤器。相比其它的 MVVM 框架,Vue.js 更容易上手。
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,是全球最大的开源库生态系统。
提供两种样式单位(rem 和 px)版本;高质量、功能丰富;友好的 API ,自由灵活地使用空间;细致、漂亮的 UI;使用单文件的 Vue 组件化开发模式;基于 npm + webpack + babel 开发,支持 ES2015;真正意义上的按需加载组件,可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大。
Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。
jQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器。
Mand Mobile是面向金融场景设计的移动端组件库,基于Vue.js实现。目前已实际应用于滴滴四大金融业务板块的10余款产品中。
cube-ui 是基于 Vue.js 实现的精致移动端组件库。由滴滴内部组件库精简提炼而来,经历了业务一年多的考验,并且每个组件都有充分单元测试,为后续集成提供保障。在交互体验方面追求极致。遵循统一的设计交互标准,高度还原设计效果;接口标准化,统一规范使用方式,开发更加简单高效。支持按需引入和后编译,轻量灵活;扩展性强,可以方便地基于现有组件实现二次开发。
ant-design-vue 是 Ant Design 的 Vue 实现,组件的风格与 Ant Design 保持同步,组件的 html 结构和 css 样式也保持一致,真正做到了样式 0 修改,组件 API 也尽量保持了一致。
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。
Vant 是有赞开源的一套基于 Vue 2.0 的 Mobile 组件库。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。目前已有近 50 个组件,这些组件被广泛使用于有赞的各个移动端业务中。 Vant 旨在更快、更简单地开发基于 Vue 的美观易用的移动站点。
没有重复造轮子。主要借鉴 Framework7 的形态并以此为基础,参考Ratchet、Ionic、Onsen各种不同的思路,强化功能,精简体积,并提供国内最稳定快速的CDN支持。此外还定制增强了一些工具类开源库。
最接近原生APP体验的高性能前端框架,追求性能体验,是我们开始启动MUI项目的首要目标,轻量必然是重要特征;MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K。