axios Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库；封装axios，一方面为了以后维护方便，另一方面也可以对请求进行自定义处理 安装 npm i axios 封装 我把axios请求封装在http.js中，重新把get请求，post请求封装了一次 首先，引入axios import axios from axios 设置接口请求前缀 一般我们开发都会有开发、测试、生产环境，前缀需要加以区分，我们利用node环境变量来作判断...
Axios 是一个基于 promise 的 HTTP 库。将axios封装好后能更高效的开发并且方便维护，而且在以后的项目中也能直接套用，所以封装好是必要的。在参考了很多方法后，我拼凑出了一套我认为很实用的方法。 首先是http目录下的两个文件 helper.js 这个是功能性文件包括拼接url、过滤参数等,把方法集合到一个文件方便维护和修改。 读一遍知道他有什么功能就行了const helper = {// 根据name获取地址栏的参数值getQueryString (name) {let...
分享下我自己的axios封装 axios是个很好用的插件，都是一些params对象，所以很方便做一些统一处理 当然首先是npm安装axios 很简单$ npm install axios --save 在src下新建文件夹 service / index.js 接着上代码 import axios from axios; import { Toast} from mint-ui;// 我用的mint的框架来弹出我的错误返回 大家可以用别的提示 import router from ../router// 默认超时设置 axios.defaults.timeout = 50000;// 相对路径设置 ax...
axiosAxios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库；封装axios，一方面为了以后维护方便，另一方面也可以对请求进行自定义处理安装npm i axios封装我把axios请求封装在http.js中，重新把get请求，post请求封装了一次首先，引入axiosimport axios from axios设置接口请求前缀一般我们开发都会有开发、测试、生产环境，前缀需要加以区分，我们利用node环境变量来作判断，if (pro...
插件的分类 添加全局的方法或者属性 比如：vue-element添加全局的资源 比如：指令 v-bind通过mixin方法添加的一些混合添加Vue实例方法 Vue.prototype上面插件的使用通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成：// 调用 `MyPlugin.install(Vue)` Vue.use(MyPlugin)new Vue({//... options })```也可以传入一个选项对象： ``` javascript Vue.use(MyPlugin, { someOption: true })插件开发Vue.js ...
为什么选择自己封装第三方库 最近几个月我司把之前两三年的所有业务都用了 vue 重构了一遍，前台使用 vue+ssr，后台使用了 vue+element，在此过程中封装和自己写了很多 vue component。其实vue 写 component 相当简单和方便，github上有很多的 vue component 都只是简单的包装了一些 jquery 或者原生 js 的插件，但我个人是不太喜欢使用这些第三方封装的。理由如下： 很多第三方封装的组件参数配置项其实是有缺损的。如一些富文本或...
作用域插槽不是那么直观的一个概念。Vue文档使用了一段描述性的话来解释作用域插槽： 有的时候你希望提供的组件带有一个可从子组件获取数据的可复用的插槽 …… 但是在我们应用的某些部分，我们希望每个独立的待办项渲染出和 todo.text 不太一样的东西。这也是作用域插槽的用武之地。 但在我看来，至少是第一次读到的时候，这段话相当不好理解。插槽不是分发内容到子组件吗，为什么还要从子组件中获取数据？不是已经有了通过emit事...
本文实例为大家分享了vue实现压缩图片预览并上传的具体代码，供大家参考，具体内容如下 主要用到filereader、canvas 以及 formdata 这三个h5的api过程大致分为三步： 用户使用input file上传图片的时候，用filereader读取用户上传的图片数据（base64格式） 把图片数据传入img对象，然后将img绘制到canvas上，再调用canvas.toDataURL对图片进行压缩 获取到压缩后的base64格式图片数据，转成二进制塞入formdata，再通过XmlHttpReques...
前言简单封装了一个vue下拉加载组件，分享一下，已放到github和前端资源库，欢迎下载！ 组件代码<template><div class="my-scroll" :class="[scrollState?prohibit:allow]" ref="myScroll" @scroll.passive="onScroll($event)" @touchmove="onScroll($event)" ><!-- top --><div class="scroll-list"><slot name=scrollList></slot><div class="scroll-bottom"><div v-if="state==1"><i><img :src="Load"/></i><p>加载中</p></div>...
前言新年第一篇文章，记录一下我前段时间封装的一个vue组件吧。技术需要积累，有时间我把我之前写的还不错的组件都开源出来。并尝试vue和react 两种方式的组件封装。今天简单写下鼠标框选div选中效果的封装吧。 div框选实现div框选效果，其实没有什么好的方法，就是获取鼠标事件，根据鼠标的位置，动态创建一个跟随鼠标的div。【注：这种方式需要依赖position的定位方式，一般鼠标事件位置是针对全局的，所以鼠标框选的div 位置的p...
每个项目网络请求接口封装都是很重要的一块，第一次做Vue项目，我们的封装方法如下： (1).新建一个js文件，取名api.js (2).引入 axios ，mint-UI ,如下图： import axios from axios import {MessageBox, Toast} from mint-uiaxios.defaults.timeout = 50000//默认请求超时时间 axios.defaults.headers = 请求头(2).封装get方法 export function getHttp (url, params = {}) {// 创建动画mint-uiIndicator.open({text: 加载中...,s...
具体代码如下所示：<template><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" style="float:right;"></el-pagination> </template> <script type="text/ecmascript-6"> export default {components: {},data() {return {}},props: {pageSize: {type: Number,defa...
具体代码如下所述：<strong>组件部分</strong> <template><div class="main"><div class="page-tab"><div :class="nowPath == item.path ? tab-item tab-item_active : tab-item"v-for=(item, index) in tabList:key="index"><router-link mode="out-in":to="item.path">{{item.name}}</router-link></div> </div><transition :name="slideDirection"><slot></slot> </transition></div> </template> <script> export default {...
项目类型：vue+vux+axios 刚开始，把Axios封装在了http.js文件里面，然后为了使用VUX的提示框消息，把拦截器直接写在了main.js里面。直接调用接口，一切正常。 然而因为返回值有统一的code错误代码提示，所以在拦截器里面加入了code的判断以便统一返回值。刚开始一切都是按照预期的结果来走的。就在一个夜黑风高的晚上，我头晕眼花的按F5手动刷新了一下页面，惊奇的发现拦截器失效了，并没有拦截外面的Coode Json代码层，而是直接把...
需求分析 业务要求，需要一个图片上传控件，需满足 多图上传点击预览图片前端压缩支持初始化数据相关功能及资源分析 基本功能先到https://www.npmjs.com/searchq=vue+upload上搜索有关上传的控件，没有完全满足需求的组件，过滤后找到 vue-upload-component 组件，功能基本都有，自定义也比较灵活，就以以此进行二次开发。 预览因为项目是基于 vant 做的，本身就提供了 ImagePreview 的预览组件，使用起来也简单，如果业务需求需要...