vue
文章平均质量分 51
小黑ii
每天进步一点点~~~
展开
-
Ant Design Vue 实现左右树穿梭框
Ant Design Vue 实现左右树穿梭框最近碰见一个需求,要实现权限树左右树穿梭的功能。Ant Design Vue 官网中有穿梭框 Transfer 组件,但提供的示例是左侧是树,右侧则是平铺列表。只能在其基础上进行修改实现了。效果图Options API 实现新建文件 options-transfer.vue<template> <a-transfer :data-source="dataSource" :target-keys="targetK原创 2021-05-21 09:34:49 · 8038 阅读 · 21 评论 -
Vue中使用animate.css V4
Vue中使用animate.css V4最近把公司官网项目依赖进行了升级,里面用到了animate.css。目前版本4.1.0。目前4.x版本相比之前3.x的breaking change如下:Animate.css v4 brought some improvements, improved animations, and new animations, which makes it worth upgrading. But it also comes with a breaking change原创 2020-05-29 12:45:14 · 4206 阅读 · 3 评论 -
wangEditor 实现上传图片到阿里云OSS
wangEditor 实现上传图片到阿里云OSS最近做了一个后台管理系统,里面用到了wangEditor富文本编辑器。里面实现了图片上传到阿里云OSS的功能,现总结一下用法。新建oss.js文件import { OSS_URL } from '@/utils/constants'import CommonServer from '@/api/common'import axios fro...原创 2019-12-20 11:44:13 · 3625 阅读 · 6 评论 -
vue项目中使用echarts
vue-cli创建的项目中1.安装echarts依赖cnpm install echarts -S2.在需要创建图表的页面中按需引入<div class="chart" ref="chartOne" :style="{width: '300px', height: '300px'}"></div><script type="text/ecmascript-6"> //引入Echarts主模块原创 2017-08-30 09:34:08 · 4105 阅读 · 0 评论 -
当better-scroll遇见Vue
作者: ustbhuangyi 链接:http://www.imooc.com/article/18232 在我们日常的移动端项目开发中,处理滚动列表是再常见不过的需求了,以滴滴为例,可以是这样竖向滚动的列表,如图所示: 也可以是横向滚动的导航栏,如图所示: 可以打开“微信 —> 钱包—>滴滴出行”体验效果。 我们在实现这类滚动功转载 2017-06-16 19:06:41 · 4017 阅读 · 2 评论 -
vue项目中使用ueditor
以vue-cli生成的项目为例1.static文件夹下先放入ueditor文件2.index.html添加如下代码<script type="text/javascript" charset="utf-8" src="static/ueditor/ueditor.config.js"></script><script type="text/javascript" charset="utf原创 2017-08-23 16:24:21 · 10305 阅读 · 7 评论 -
在Vue项目中使用easyScroll滚动条插件
插件github地址:https://github.com/GarveyZuo/EasyScroll/1.插件采用jsx语法,使用前需要安装vue-jsx插件:npm install\ babel-plugin-syntax-jsx\ babel-plugin-transform-vue-jsx\ babel-helper-vue-jsx-merge-props\ babel-pre原创 2017-09-20 16:21:04 · 13210 阅读 · 2 评论 -
js下载base64格式的图片
直接看代码 //下载图片 download() { let imgData = 'data:image/png;base64,iVBORw0KGgoAAAANSUh........'; this.downloadFile('测试.png', imgData); }, //下载 downloadFile原创 2018-01-18 11:42:07 · 23990 阅读 · 11 评论 -
vue项目中实现扫码功能
最近在项目中碰见一个打开摄像头扫码的功能,项目最后打包成app,用的是hBuilder打的包,刚好hBuilder打包集成H5+sdk,就可以直接用人家的sdk了。 demo地址:vue-scan-demo 以下是代码实现:&amp;lt;template&amp;gt; &amp;lt;div class=&quot;scan&quot;&amp;gt;原创 2018-01-02 14:49:02 · 51166 阅读 · 85 评论 -
解决vue-cli npm run build之后vendor.js文件过大的问题
问题&amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;nbsp;vue-cli npm run build命令默认把dependencies中的依赖统一打包,导致vendor.js文件过大,出现首屏加载过于缓原创 2017-11-22 09:15:54 · 24529 阅读 · 25 评论 -
封装简单的axios库
1.新建http.js文件,封装axios get post 方法import axios from 'axios'import qs from 'qs'import 'es6-promise'axios.defaults.baseURL = '/api';export function get(url, params) { return new Promise((reso原创 2017-12-15 09:38:07 · 6112 阅读 · 8 评论 -
vue 微信分享至朋友圈&&分享至朋友代码封装
1.新建share.js文件import {shareSDK} from "../api/common";//分享apiimport wx from 'weixin-js-sdk'export const shareTitle = '测试';export const shareUrl = '测试连接';export const shareImg = '测试图片';export co...原创 2018-04-01 17:20:05 · 4738 阅读 · 5 评论 -
vue移动端微信授权登录插件封装
1.新建wechatAuth.js文件const queryString = require('query-string')//应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且,即使在未关注的情况下,只要用户授权,也能获取其信息)const SC...原创 2018-03-29 15:40:45 · 19952 阅读 · 35 评论 -
vue分环境打包
在项目开发中,我们的项目一般分为开发版、测试版、Pre版、Prod版。Vue-cli的默认环境一只有dev和prod两个,之前每次要发布测试版或Pre版都是修改了源码中API地址后打包,这样很麻烦。如果能根据不同环境打包就完美了。代码如下:1.config/prod.env.js文件修改如下:'use stri...原创 2018-04-22 14:37:56 · 1493 阅读 · 0 评论 -
vue-cli 3.0 配置
最近上手试了试vue-cli(v3.0.0-rc.5),小结一下1.环境变量相关在一般项目中我们针对不同的开发环境会配置不同的环境变量:开发环境(development)测试环境(production)发布环境(release)1.在项目根目录下新建三个文件:.env.development,.env.production,.env.release//.env.de...原创 2018-07-18 15:48:30 · 6811 阅读 · 4 评论 -
vue与angular的区别
vue仅仅是mvvm中的view层,只是一个如jquery般的工具库,而不是框架,而angular而是mvvm框架。vue的双向邦定是基于ES5 中的 getter/setters来实现的,而angular而是由自己实现一套模版编译规则,需要进行所谓的“脏”检查,vue则不需要。因此,vue在性能上更高效,但是代价是对于ie9以下的浏览器无法支持。vue需要提供一个el对象进行实例化,后续的所有原创 2017-02-07 20:28:34 · 40033 阅读 · 4 评论 -
vue-router实现路由懒加载
在项目router/index.js文件中将import Recommend from 'components/recommend/recommend'更改为const Recommend = (resolve) => { import('components/recommend/recommend').then((module) => { resolve(module) })}即原创 2017-07-13 17:52:22 · 3836 阅读 · 0 评论 -
vue学习part1
vue学习part1vue:1、读音: v-u-e2、vue到底是什么? 一个mvvm框架(库)、和angular类似 比较容易上手、小巧3、mvc: mvp mvvm mv* mvx4、官网:http://cn.vuejs.org/5、手册: http://cn.vuejs.org/api/vue和angular区别?vue——简单、易原创 2017-01-19 18:53:38 · 518 阅读 · 0 评论 -
vue学习part2
vue制作weibo 交互vue-> 1.0vue-resource ajax php服务器环境(node)this.$http.get()/post()/jsonp()this.$http({ url:地址 data:给后台提交数据, method:'get'/post/jsonp jsonp:'cb' //cbName});vu原创 2017-01-19 19:14:44 · 354 阅读 · 0 评论 -
vue学习part3
git page:任何仓库 master分支,都可以发布(git page)双向过滤器:Vue.filter(name,{ read: write:});bower:bower-> (前端)包管理器 npm install bower -g 验证: bower --versionbower install <包名>bower unin原创 2017-01-19 19:30:09 · 268 阅读 · 0 评论 -
vue2.0变化
vue2.0:bower info vuehtt://vuejs.org/到了2.0以后,有哪些变化?在每个组件模板,不在支持片段代码组件中模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </template> 现在: 必须有根元素,包裹住所有的代码原创 2017-01-19 21:02:21 · 1670 阅读 · 3 评论 -
vue2.0正确地引用 jquery 和 jquery-ui的插件
出自: http://www.itnose.net/detail/6647297.html使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码// 在开头引入webpack,后面的plugins那里需要var webpack = require('webpack')// resolv转载 2017-01-20 10:35:09 · 2534 阅读 · 0 评论 -
webpack配置文件解析
原文地址:http://blog.csdn.net/alsnei/article/details/54375782 dev-server.js文件Node.js代理服务器的中间件(可以代理和转发一些我们需要的API)var proxyMiddleware = require('http-proxy-middleware') var port = process.env.PORT || con转载 2017-01-20 10:39:57 · 696 阅读 · 0 评论 -
Vue2.0配置文件解析
原文地址:http://blog.csdn.net/alsnei/article/details/54375801Vue2.0 配置文件解析babellrc文件{ "presets": ["es2015", "stage-2"],//预设2015,stage数字越小依赖的插件越多,2为2-3,0为0-3 "plugins": ["transform-runtime"],//除了预设插件,还转载 2017-01-20 10:43:08 · 588 阅读 · 0 评论 -
better-scroll插件使用
原文地址:http://blog.csdn.net/alsnei/article/details/54375957Vue中的better-scroll插件在需要的文件中添加import BScorll from 'better-scroll';引用的示例代码:let scroll = new BScroll(Dom对象, {//options startX: 0, startY: 0转载 2017-01-20 10:46:58 · 15734 阅读 · 2 评论 -
Vue.js 中 v-if 和 v-show 有什么区别?
简单来说,v-if 的初始化较快,但切换代价高;v-show 初始化慢,但切换成本低。具体解释如下:v-show 渲染页面结构后,通过 "display:none" 控制元素状态。所以初始化时间较长。v-if 是懒计算,如果条件为false,它什么也不做,加载速度较快。当条件为真时,v-if 才会真正编译渲染页面结构。因此,v-if 切换复杂组件的花销要比 v-show 大得多。所以要根据实际场景决原创 2017-03-02 10:36:17 · 431 阅读 · 0 评论 -
Vue-resource中post请求将data数据以request payload转换为form data的形式
这是当初我使用vue-resource中post请求时的一个坑,vue-resource中post发送的数据默认以request payload的形式,而一般我们使用的都是form data的形式。如何更改其形式只需要在main.js中写入以下代码:Vue.http.options.emulateJSON = true;Vue.http.options.headers = { 'Content原创 2017-04-14 11:19:07 · 18258 阅读 · 1 评论 -
在vue项目中使用Nprogress.js进度条
Ajaxyy应用程序的细长进度条。灵感来自Google,YouTube和Medium。在vue中使用nprogress.js安装$ bower install --save nprogress$ npm install --save nprogress在项目中引入在main.js中引入要使用的nprogressimport NProgress from 'nprogress'import 'np原创 2017-04-14 12:37:26 · 31101 阅读 · 1 评论 -
vue-cli webpack中引入jquery
1.首先在package.json里的dependencies加入"jquery" : "^2.2.3",然后install2.在webpack.base.conf.js里加入var webpack = require("webpack") 在module.exports的最后加入plugins: [new webpack.optimize.CommonsChunkPlugin('common.原创 2017-05-02 10:16:31 · 795 阅读 · 0 评论 -
如何在vue项目中使用md5.js及base64.js
一、在项目根目录下安装npm install --save js-base64npm install --save js-md5二、在项目文件中引入import md5 from 'js-md5';let Base64 = require('js-base64').Base64;三、在项目文件中使用base64Base64.encode('dankogai'); // ZGFua29nYWk=原创 2017-04-24 14:19:58 · 51018 阅读 · 6 评论 -
FastClick插件
处理移动端 click 事件 300 毫秒延迟, 由 FT Labs 开发,Github 项目地址:https://github.com/ftlabs/fastclick 。1.为什么存在延迟?从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间。为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作。2.兼容性Mobile Safa原创 2017-06-06 12:41:46 · 4756 阅读 · 0 评论 -
vue-cli 安装
使用脚手架工具 vue-cli 可以快速地构建项目安装过程:1、全局安装 : npm install -g vue-cli2、初始化webpack: vue init webpack my-test(工程名称)3、根据提示走4、进入你的工程目录 : cd my-test5、下载所有配置文件的内容: npm install6、热加载(启动服务器): npm run dev注:第六步如果报错,node.原创 2017-01-19 21:46:05 · 436 阅读 · 0 评论