随笔分类 - vue
H5全屏播放
摘要:<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maxim
阅读全文
vue中服务器端直接修改请求的接口地址
摘要:一个项目可能有很多环境,开发,测试,预生产,生产等环境,如果每一个环境都需要重新打包会显得比较麻烦,那么如何解决这个问题呢 在vue和uniapp中以及其他框架下的都是可以按照如下操作来解决的 在静态资源下新建一个env.json,vue项目是在public文件下新建,uniapp是在static下
阅读全文
vue中循环本地图片资源
摘要:在工作中常常有这个需求就是特别是类似管理系统的左侧菜单,自定义一些图片的时候,需要渲染本地的img资源 这些图片资源往往是放在本地的assets/images下的,如果成功渲染除这些资源呢,我的做法是 第一步,在utils下新建一个menu.ts文件,然后在里面配置我的菜单 let MenuList
阅读全文
vue-cli3和ts建立vue项目
摘要:第一步,如果你之前没有装vuecli,可以直接执行下面命令 注:这里我install 的时候不成,于是我用的是 cnpm install --global @vue/cli 如果之前装了vuecli的版本的,操作第一步之前需要先uninstall之前的版本 第二步,创建一个vue项目 会出现一些提示
阅读全文
vue中使用vue-quill-editor及上传图片到自己服务器
摘要:第一步,下载依赖 第二步,再main.js里引入组件(我这里是全局注册) 第三步,如果要上传图片到自己服务器的话如下 接下来再组件中使用 temple里的代码是 这样就可以正常操作了,注:上方的 upLoadUrl 需要根据你们的上传地址修改
阅读全文
vue中上传文件之multipart/form-data
摘要:首先在项目里用了拦截器的,由于拦截器会将传递的参数转成对象,所以你i提交的时候会发现multipart/form-data或转变成application/json 其次关于input的文件上传是需要一个非常纯净的axios的,于是我就在main.js里重新挂载了一个axios 在组件中上传代码 就这
阅读全文
vue中使用scss
摘要:之前项目里我一般是使用less的,朋友问到如何引入scss,于是我就简单的跑了一下,以下主要供自己学习,如有更好的方法可以一起交流讨论一下 第一步,安装依赖 注:使用npm下载的时候会报错,这里推荐使用淘宝镜像 第二步,下载全局引入scss的依赖,注:如果是直接写在.vue页面中是无需下载此依赖的
阅读全文
vue中使用echarts来绘制世界地图和中国地图
摘要:第一步,下载echarts 第二步,在main.js中全局引入 第三步,建立echarts组件 效果图如下 如果是世界地图的话 效果如下 注意:只需要将请求来的json放在 series中的data即可 就这........
阅读全文
vue中点击复制粘贴功能
摘要:1.下载clipboard.js 2.引入,可以在mian.js中全局引入也可以在单个vue中引入 3.使用,在template中,这里我用了elementui框架 4.使用,在methods中 5.最后效果:点击后直接可以在控制台进行粘贴 》》》》》 6.如果需要在main.js中引入 vue组件
阅读全文
vue中使用elementui里的table时不被选中设置
摘要:情景:例如提现列表,转账失败后转账金额直接返回用户余额,所以当前数据不可以再次操作 直接粘贴代码: <el-table-column type="selection" width="55" :selectable='checkboxInit'> methods里 checkboxInit(row,i
阅读全文
上传代码至服务器
摘要:对于很多前端开发者都不知道如何上传代码到服务器,一般是打包后发送给后台人员进行上传,但是有的公司又是需要前端开发者自己上传代码的,通过可视化上传工具例如xftp等的方式我就不多做介绍了,直接登入后,找到对应的地方直接拖拽或者右击上传即可 通过xshell进行上传代码至服务器时 举例:这里就用vue项
阅读全文
vue中上传图片至阿里云oss
摘要:1.开通阿里云的oss服务这些这里就不多做介绍了 2.登入阿里云的后台管理系统创建一个Bucket 3.在后台管理系统中进入访问控制 4.点击用户管理->新建用户->填写相关信息,就生成了下图3 5.点击生成用户右侧的授权,添加如图的授权策略 6.点击角色管理->新建角色,然后创建了一个如下图的H5
阅读全文
vue中使用导出表格功能
摘要:1.下载依赖 2.在src下创建vendor文件夹,并在文件夹中放两个文件 Blob.js Export2Excel.js。 3.system.vue 4.点击按钮,导出表格
阅读全文
vue中使用kindeditor富文本编辑器
摘要:1.去官网下载kindeditor 2.将其放在一个名为kindeditor的文件夹里,并且将它放在vue里的static文件夹下 3.创建kindeditor.vue 4.在src下创建plugin文件夹并在其下面创建kindeditor.js 5.然后在main.js里引入 6.最后在组件里调用
阅读全文
vue中axios的封装
摘要:第一步还是先下载axios cnpm install axios -S 第二步建立一个htttp.js import axios from 'axios'; import { Message } from 'element-ui'; axios.defaults.timeout = 5000; ax
阅读全文
vuex的使用总结
摘要:vuex的使用 1.组件中通过dispatch事件触发actions eg: methods: { 事件名: function() { this.$store.dispatch("键值名", 需要存储的值); }, } 2.通过actions进行commit提交给mutation eg:action.js ...
阅读全文
vue中解决跨域问题
摘要:方法1.后台更改header 方法2.使用JQuery提供的jsonp 方法3.使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建) 例如请求的url:“http://f.apiplus.cn/bj11x5.json” 1、打开config/index.js,
阅读全文
vuex的使用二
摘要:1.先看项目的目录结构 2.在main.js里需要引入store这个文件并挂在实例上 3.store.js里引入action.js和mutation.js文件 4.action.js 5.mutation.js 6.mutation_type.js 7.head.vue 8.foot.vue 9.效
阅读全文