
vue
小太阳sunshine
为成为一名优秀的前端工程师努力,加油!
展开
-
在vue项目中前端生成二维码应该注意的问题
http://blog.youkuaiyun.com/luckylqh/article/details/52875347前端要生成二维码,可以用jQuery.qrcode.min.js第三方插件来生成,并且和jquery一起用: 在使用这个插件的时候,不能使用npm安装,只能中需要的页面直接引入,但是这里有几个细节需要注意一下: 1.在使用这个插件的时候,要在生成二维码方法的前面引用这个插件,如下: r转载 2017-05-24 11:23:07 · 4674 阅读 · 0 评论 -
vue:复选框,单选框绑定总结
复选框单个复选框,绑定到布尔值:<input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{ checked }}</label>多个复选框,绑定到同一个数组:<div id='example-3'&g原创 2018-04-25 15:05:00 · 9294 阅读 · 1 评论 -
vue:不同环境配置不同打包命令
通过vue-cli中的npm run build 打包,这个只能打包到一个环境,在实际工作中可能有生产环境,预发布环境甚至更多,每个环境的接口地址都不同,每次都需要手动修改接口地址,非常繁琐。那我们怎么才能做到执行不同的命令打不同的包呢?下面是我在实际工作中的一个解决方案: 1.npm install cross-env –save-dev 2.在package.json的scripts标签下...原创 2018-04-18 15:15:04 · 9169 阅读 · 2 评论 -
使用vue-cli创建的项目中的构建总结
1.自动打开浏览器:2.webpack全局引入jquery(1.) 首先在package.json里加入, dependencies:{ “jquery” : “^2.2.3” } ( 2. )在webpack.base.conf.js里加入 var webpack = require(“webpack”) ( 3. )在module.exports的最后加入 ...原创 2018-04-08 15:21:04 · 319 阅读 · 0 评论 -
实现element-ui中table点击一行展开
在运用element-ui的表格展开行组件时,默认的是点击左边的小箭头才能展开,但是实际的需求却是点击一整行展开,实现方法如下:<el-table :data="entdatas" style="width: 100%" row-key="id" :expand-row-keys="ent...原创 2018-02-27 13:46:25 · 14068 阅读 · 5 评论 -
element-ui upload使用经验总结
结构:<el-upload class="upload-demo" drag name="file" action="" accept="application/vnd.ms-excel,appli原创 2018-02-07 15:12:39 · 17123 阅读 · 2 评论 -
如何将自定义网站在iphone手机上"添加至主屏幕的图标"
在iphone手机上,网站可以添加到主屏幕,默认情况下,一个网站被添加到主屏幕时,默认显示的是网站截图,如何才能显示成我们自己想要设置的图标呢?我在实际工作中遇到了这个需求,将实现步骤总结如下:1.制作4中不同尺寸的图片: link rel="apple-touch-icon-precomposed" sizes="144x144" href="./static/apple-tou原创 2018-02-07 11:59:30 · 12960 阅读 · 2 评论 -
vue2.x使用小经验总结
1.跳转路由时显示在网页顶端使用: created(){ this.upper(); },方法methods:{ upper() { window.scrollTo(0,0); } }2.图片404,加载默认图片<img style="width: 100px;" :src="'http://img.原创 2017-07-07 11:50:01 · 483 阅读 · 0 评论 -
vue初始化动画加载
1.在入口文件index.html中加入loading动画:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="renderer" content="webkit|ie-comp|ie-stand"> <meta content="width=device-width, initial-sca原创 2017-11-15 17:29:14 · 8881 阅读 · 0 评论 -
vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)
1、首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点 建议方式在main.js中如下声明使用import axios from 'axios';Vue.prototype.$axios=axios;那么在其他vue组件中就可以this.$axios调用使用2.小小的提一下vue cli脚手架前端调后端数据接口时候的本地代理跨域问题,如我在转载 2017-08-11 18:39:06 · 4130 阅读 · 0 评论 -
解决keep-alive缓存问题
data () { return { keyword:'', } },deactivated() { console.log('deactivated'); if (this.keyword !== this.$route.params.key){ this.$destroy() } },原创 2017-08-04 10:42:53 · 7173 阅读 · 0 评论 -
vue2.0 keep-alive最佳实践
1.基本用法vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗<keep-alive><component> <!-- 组件将被缓存 --></component></keep-alive>有时候 可能需要缓存整个站点的所有页面,而页面一般一进去都要触发请求的在使用keep-alive的情况下<keep-alive><router-vi转载 2017-08-04 10:02:12 · 1375 阅读 · 1 评论 -
结合mint-ui移动端下拉加载实践总结
在使用vue做一个h5项目的时候,需要上拉分页加载,所以在实践中总结了一下使用方法:1.npm i mint-ui -S2.main.js中引入import 'mint-ui/lib/style.css'3.以下是代码结构部分:<template> <div class="main-body" :style="{'-webkit-overflow-scrolling': scrollMod原创 2017-08-10 18:19:09 · 13934 阅读 · 1 评论 -
vue引入jquery和bootstrap的方法
引入jquery:1.npm install jquery --save(这里注意jquery一定是全部小写的)2.在webpack.base.conf.js中var webpack=require("webpack")3.在webpack.base.conf.js中module.exports中加入![这里写图片描述](http://img.blog.youkuaiyun.com/201707301原创 2017-07-30 12:20:23 · 2916 阅读 · 0 评论 -
Vue.js 2.0 有时双向绑定img src属性失败问题
错误用法:<img src="http:0.0.0.127/{{item.imgname}}" alt="">正确用法:<img src="'http:0.0.0.127/'+item.imgname" alt="">绑定属性的时候,前面加: 属性的值可以用表达式,但注意字符串拼接的时候要加引号原创 2017-06-27 17:09:37 · 3855 阅读 · 0 评论 -
vue-infinite-loading使用demo
vue-infinite-loading官网:https://peachscript.github.io/vue-infinite-loading/ 安装:npm install vue-infinite-loading --savelist.vue页面<template> <div class="list-con"> <div class="list" v-for="(i原创 2017-05-25 14:49:13 · 8350 阅读 · 1 评论 -
Error: No PostCSS Config found in... 报错 解决方法
项目clone下来后,在本地怎么也运行不起来,总是报错 后来终于找到了解决方法,成功运行。 解决方案: 在项目根目录新建postcss.config.js文件,并对postcss进行配置:module.exports = { plugins: { 'autoprefixer': {browsers: 'last 5 version'} } }然后npm run ...原创 2018-06-29 11:17:03 · 17166 阅读 · 3 评论