背景 ?基于Vue-cli 项目产品部署,涉及到的交互的地址等配置信息,每次都要重新打包才能生效,极大的降低了效率。我们的目的是让项目实施的小伙伴重新快乐起来。网上实现的方式,都是半自动化的,还需要重新修改。 需求点 ?配置化:打包后的配置文件可二次修改 ?配置自动生成:vue-cli 提供了各种环境的打包,要实现相关配置文件的自动打包 ?研发人员无痛感:对于产品研发人员来说,不需要增加额外的打包成本,基于Vue-cli的开发习...
为了吸引更多的用户,设计好一个分享海报还是很有必要的。而小程序要生成一个海报还是有点坑的,下面分享下我们打卡小程序的一些经验。 分享海报的效果图如下:制作要求: 海报以弹窗形式展现,各种手机型号都可以正常显示海报的内容由背景图、日期、随机的名言警句、活动的二维码及用户的参加活动的信息海报保存的图片大小为 iphone 6 的两倍图(750 * 1334)由于看到的弹窗图片与保存的图片是两种大小,所以一开始看了些网上的其...
本文实例讲述了微信小程序入门之广告条实现方法。分享给大家供大家参考,具体如下: 在小程序页面,有时候需要弄一条广告条进去,作用可以用来提醒客户端,更加醒目,这种实现很容易,要用到组件swiper,navigator 先上效果图:wxml: <swiper class="swiper_container" autoplay="true" interval="2000" circular="true"><block wx:for="{{msgList}}"><navigator url="服务器" open-type="navigate"><swiper-item><view class="swip...
在vue.js项目中,经常需要对数据实时更新——每隔xx秒需要刷新一次接口——即需要用到定时器相关原理 我们先看一看2种常用定时器: setInterval(function(){}, milliseconds)——会不停的调用函数 setTimeout(function(){}, milliseconds)——只执行函数一次乍看之下,setInterval会符合我们的业务需求,然而也需要注意一些坑,单纯的使用setInterval会导致页面卡死!其原因与JS引擎线程有关(有兴趣的童鞋可自行研究相关资料),用...
提到了vue实现的基本实现原理:Object.defineProperty() -数据劫持 和 发布订阅者模式(观察者),下面讲的就是数据劫持在代码中的具体实现。 1.先看如何调用 new一个对象,传入我们的参数,这个Myvue ,做了啥?上面看到了在实例化一个Myvue 对象的时候,会执行init方法, init 方法做了两个事,调用了observer 方法,和 实例化调用了 compile 方法。 到这里我们就明白了,实例化一个Myvue后,我们要做的就是监听数据变化和编译模...
在开发中,需要表格控件根据浏览器高度进行调整,固定表头,且然后多余的出滚动条,官方给出的: 只要在el-table元素中定义了height属性,即可实现固定表头的表格,而不需要额外的代码。 然后直接上template代码: <template><el-table:data="tableData3"height="250"borderstyle="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column></el-table> </template>其中height="250"是固定值,我们可以...
Nuxt.js 是一个基于 Vue.js 的通用应用框架。集成了Vue 2、Vue-Router、 Vuex、Vue-Meta,用于开发完整而强大的 Web 应用。 它的特性有服务端渲染、强大的路由功能,支持异步数据、HTML头部标签管理等。 今天主要介绍的就是Nuxt的特性之一,强大的路由功能。nuxt.js会根据pages目录结构自动生成vue-router模块的路由配置。 nuxt源码地址: https://github.com/nuxt/nuxt.js 建议打开源码跟着文章的步骤看,第一次写,文中有任何错误...
本文介绍了layer弹出子iframe层父子页面传值的实现方法,分享给大家,具体如下:父页面获取子页面元素格式:$("#iframeID").contents().find("#eleID")示例代码:father.html<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>父级页面</title><script src="https://code.jquery.com/jquery-2.2.4.min.js"></script><style>.btn{display:inline-block;height:30px;line-height:30px;border-radius:5px;backgro...
很多时候,我们在页面使用Ajax刷新时候,会希望它出现loading的图标,让用户体验更好一些。那么如果我们每次在Axios里面进行请求,都要显示loading图标的话,那么没有一个全局的方法的话,势必会造成代码冗余的问题。有什么方法可以实现这个方法呢? 这里,我们就要用到Axios的请求拦截器与相应拦截器了 首先,我们在请求拦截器里面增加一个VUX的loading组件 axios.interceptors.request.use( config => { //请求拦截器,调用loadi...
前端开发中还原设计图的重要性毋庸置疑,目前来说应用最多的应该也还是使用rem。然而很多人依然还是处于刀耕火种的时代,要么自己去计算rem值,要么依靠编辑器安装插件转换。 而本文的目标就是通过一系列的配置后,在开发中可以直接使用设计图的尺寸开发,项目为我们自动编译,转换成rem。 技术栈 vue-cli:使用脚手架工具创建项目。 postcss-pxtorem:转换px为rem的插件。 自动设置根节点html的font-size 因为rem单位是相对于根节...
我使用的element-ui的版本是V1.4.13。如上图所示,如果使用el-button,加颜色是可以通过设置type属性的值,加图标就设置icon属性的值。 现在产品给了一个需求,就是自定义的很多种类别,不同的类别的按钮显示不同的颜色和图标。如下图所示:为了方便开发,目前的解决方案是:添加一个自定义全局指令,同时在element-ui源码中,加入对应的组件。开发人员在开发时只要在type中添加不同的类的值,就能添加上颜色和图标。 1、在element-...
一、前言 axios的基础使用就不过多的讲解啦,如何使用可以看axios文档使用说明Axios中文说明 在这里和大家分享一下axios拦截在实际项目中的使用 很多人都看过axios的官方文档中拦截器这一栏,有的人可能会有点懵,因为文档只告诉你有这个东西,而不告诉你在什么情况下使用。很多初学者就会放弃使用axios拦截器,毕竟拦截器是可以不使用的,但是使用拦截器,会在页面中减少很多不必要的代码。 二、说在前面的 项目使用的ui框架是ivi...
问题实际开发中,开发环境和生产环境中一些变量是不同的,比如接口地址等等,打包之前需要手动切换。 编译时新建env.js let baseUrl = ; if(process.env.NODE_ENV == production){baseUrl = https://xxxxxxxxx; } else if (process.env.NODE_ENV == development) {baseUrl = /api }export {baseUrl }process.env.NODE_ENV 是通过webpack 内置的 DefinePlugin 为所有的依赖定义的变量 webpack.dev.conf.js new webpack.DefinePlugin...
首先我们在pages文件夹下创建components目录用于存放自定义组件。如图所示,以我创建的dialog组件为例,自定义组件的格式与页面一样,分为4个文件。 图1 图2 如上图2所示,假如index页面有一个按钮触发点击事件后弹出dialog,并且当点击某个部门时,将dialog关闭,并将部门名称与红色标题同步。 一、首先把dialog组件的样式写好,并在index页面相应的位置引用。以下就是代码啦(分别为:wxml、wxss、js...
基于vue和react的spa进行按需加载 由于最近打算将所有的管理系统采用同一套登陆方法,然后在登陆后进行系统的切换选择,不需要每个系统都去重新登陆一次,所以前端这边思考将所有的系统用一套spa的应用进行构建,但是各个系统的合并之后,打包后的代码应该是相当大的,单页需要一次性加载所有系统的资源,显得不合实际,所以打算将不同系统的资源进行分离,再选择后在加载该系统的相应资源。自己发现这个业务和每个系统的路由比较类...