背景 ?基于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的应用进行构建，但是各个系统的合并之后，打包后的代码应该是相当大的，单页需要一次性加载所有系统的资源，显得不合实际，所以打算将不同系统的资源进行分离，再选择后在加载该系统的相应资源。自己发现这个业务和每个系统的路由比较类...