![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
wow Larissa
这个作者很懒,什么都没留下…
展开
-
vue中使用ali-oss上传文件到阿里云上
3.使用element ui的 upload 组件进行上传。1.使用 npm 安装ali-oss。2.写ali-oss.js。原创 2023-10-08 15:41:36 · 1835 阅读 · 0 评论 -
vue3.0使用van-pull-refresh,与页面滚动事件冲突,滚动数据,会触发刷新
遇到的问题:vue3.0使用van-pull-refresh,与页面滚动事件冲突,滚动数据,会触发刷新。1.van-pull-refresh加上disabled,限制它是否可以滚动。2.添加事件监听滚动,获取滚动距离,设置disabled。原创 2023-07-20 15:32:48 · 1151 阅读 · 0 评论 -
vue中利用jsencrypt进行RSA加密
【代码】vue中利用jsencrypt进行RSA加密。原创 2023-05-18 17:09:17 · 223 阅读 · 0 评论 -
使用vant中的Tag 标签进行点击多项选中
【代码】使用vant中的Tag 标签进行点击多项选中。原创 2023-03-29 16:40:43 · 812 阅读 · 0 评论 -
解决element ui表格合计,左右滚动条在合计的上面
首先style中去掉 scoped。原创 2023-03-30 15:56:41 · 581 阅读 · 0 评论 -
vue上传文件,重新上传后覆盖之前文件
vue上传文件,重新上传后覆盖之前的文件原创 2023-03-22 16:37:27 · 1357 阅读 · 0 评论 -
vue中使用md5加密
vue中使用md5加密,常用于账户密码登录一类原创 2023-03-14 17:20:44 · 887 阅读 · 0 评论 -
vue中判断pc还是手机
在 App.vue中export default { name: "App", created() { if (this._isMobile()) { console.log("手机端"); this.$router.replace('/wxLogin'); } else { console.log("pc端"); this.$router.replace('/PCLogin'); } }, methods: {原创 2021-12-06 11:36:37 · 2081 阅读 · 0 评论 -
vue中通过url实现下载pdf
安装:npm install file-saver --save让后端返回[blob]文件格式,需要传递 responseType: ‘blob’ axios({ url: url, // 服务器上pdf路径 method: 'get', responseType: 'blob' }).then(res => { // eslint-disable-next-line no-undef // console.log(res) const FileSaver原创 2021-05-31 15:09:04 · 4193 阅读 · 1 评论 -
vue中 我在axios添加了 withCredentials: true, 就报错显示跨域了
去掉 withCredentials: true就好了原创 2021-05-27 15:53:05 · 1525 阅读 · 0 评论 -
vue cli中使用echars绘制图表
1.安装echarts依赖npm install echarts -S2.在main.js中全局引入// 引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts3.具体代码<template><div id="myChart" :style="{width: '300px', height: '300px'}"></div></template>ex原创 2021-04-09 16:14:53 · 123 阅读 · 0 评论 -
Vue、React、Angular生命周期
前端目前的三大框架:Vue、React、Angular生命周期**1.vue**官网介绍1.1 beforeCreate在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。1.2 created在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),property 和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el property 目前尚不可用。转载 2021-04-09 15:00:59 · 596 阅读 · 0 评论 -
vue挂载路由导航守卫,控制访问权限
官网地址-导航守卫const router = new Router({ routes: [ { path: '/', redirect: '/login' }, { path: '/login', component: Login }, { path: '/home', component: Home, redirect: '/welcome', children: [ { path: '/welcome',原创 2021-04-09 11:26:34 · 306 阅读 · 0 评论 -
七牛实时音视频云视频连线demo(web部分)
官方文档git申请账号之类的我没有作考虑,因为这些都是后端同志给准备。此片文章注意记录一下我遇到的问题按照官方文档很好操作的,我这个是从登录页面选择加入会议房间,携带参数跳转到此页面,不作任何操作,开始共享屏幕,也就是跳转之后的页面如下:分享成功完之后的页面画面:...原创 2021-01-28 15:40:38 · 652 阅读 · 0 评论 -
vue + vue-socket.io实例
1.安装依赖npm install vue-socket.io --save2.在main.js中中引入import VueSocketIO from 'vue-socket.io'// import SocketIO from 'socket.io-client'const options = { path: '/v1/videoMeeting/socket.io', transports: ['websocket'] }Vue.use(new VueSocketIO({ debug:原创 2021-01-27 17:20:54 · 212 阅读 · 0 评论 -
vue- canvas生成海报图
官方文档:https://sunniejs.github.io/vue-canvas-poster/#/zh-cn/quickstart通过 npm 安装npm i vue-canvas-poster --save2.引用组件库方法一 :main.js 中全局注册import Vue from 'vue'// 导入组件库import VueCanvasPoster from 'vue-canvas-poster'// 注册组件库Vue.use(VueCanvasPoster)方法转载 2021-01-14 15:37:46 · 422 阅读 · 0 评论 -
vue+element ui中el-select选择器获得value,label
<el-select v-model="formData.province" placeholder="请选择省" @change="provincechange"><el-option v-for="item in provincelist" :key="item.id" :label="item.name" :value="item.id"/></el-select>export default { data() { return原创 2021-01-11 11:19:25 · 1217 阅读 · 0 评论 -
vue+element ui输入框,输入后匹配输入建议
<div class="demo-input-suffix"> <el-autocomplete v-model="searchcurriculum" class="inline-input" :fetch-suggestions="querySearch" placeholder="请输入名称后匹配建议" :trigger-on-focus="false" @select="handleSelectcur..原创 2021-01-11 11:10:48 · 1503 阅读 · 0 评论 -
vue中使用vue-quill-editor富文本
1.安装依赖npm install vue-quill-editor --save2.全局注入import Vue from 'vue'import VueQuillEditor from 'vue-quill-editor' // require stylesimport 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css' Vue.use原创 2020-12-15 10:50:53 · 276 阅读 · 1 评论 -
vue+element ui表单提交验证包括是否上传图片
<template><button class="add" @click="addadminclick">添加管理员</button> <el-dialog title="创建管理员" :visible.sync="dialogVisible" width="40%"> <el-form :model="formData" label-position="left" :rules="rule" label-w原创 2020-12-03 15:39:26 · 850 阅读 · 0 评论 -
vue项目中 localhost改成ip地址访问
一、vue2.0项目中 localhost改成ip地址访问config/index.js改成host: '0.0.0.0', port: 8888,打包后index.html空白 修改webpack.prod.conf.js 里的publicPath:’./’,二、vue3项目改成ip地址访问1.在项目的根目录下创建文件vue.config.js2.在该文件中进行相关配置,从而覆盖默认配置module.exports = { outputDir:"course-analysis原创 2020-11-25 16:55:38 · 5386 阅读 · 0 评论 -
vue实现上下拖动div+处理二维数组
<transition-group tag="div" class="container"> <div class="item" v-for="(item,i) in option" :key="i"> <span v-for="txtoption in item.option" draggable="true" @dragstart="handleDragStart($event, item)" @dragover.prev原创 2020-11-25 16:03:32 · 750 阅读 · 0 评论 -
vue-cli3项目打包部署到服务器
1.安装 scp2npm install scp2 --save-dev2、写脚本例如 upload.js位置和 package.json平级即可'use strict'// 引入scp2var client = require('scp2');client.scp('./dist/', { // 本地打包文件的位置 "host": 'XXX.XX.XX.XXX', // 服务器的IP地址 "port": '443', // 服务器端口 "usern原创 2020-09-30 16:57:23 · 737 阅读 · 0 评论 -
vue-cli 中配置eslint
规则的含义:“off” or 0 - 关闭(禁用)规则“warn” or 1 - 将规则视为一个警告(并不会导致检查不通过)“error” or 2 - 将规则视为一个错误 (退出码为1,检查不通过)eslint官网规则我个人觉得常用的解决报错的“space-before-function-paren”: 0,“semi”: 0,“quotes”: 0,“indent”: [“off”, 4],“no-mixed-spaces-and-tabs”:0,“no-multiple-empt原创 2020-09-18 15:05:01 · 267 阅读 · 0 评论 -
node模拟接口数据
安装 express$ npm install express创建list.json文件{ "data1": { "name": "李思", "age": "67" }, "data2": { "name": "王俄", "age": "16" } }创建 index.js 文件const express = require('express')// 引入本地数据(也就是原创 2020-09-16 17:06:02 · 471 阅读 · 0 评论 -
Vue-CLI 3.x 自动部署项目至服务器
Vue-CLI 3.x 自动部署项目至服务器前言平时部署前端项目流程是:先部署到测试环境ok后再发布到生产环境上,部署到测试环境用 xshell 连上服务器,然后用 xftp 连接服务器,然后本地 build 项目,接着把 build 好的文件通过 xftp 上传到服务器上,整个流程感觉稍有繁琐,重复。本教程讲解的是 Vue-CLI 3.x 脚手架搭建的vue项目, 利用scp2自动化部署到静态文件服务器 Nginx一 、安装scp2scp2是一个基于ssh2增强实现,纯粹使用JavaScript转载 2020-09-16 10:01:29 · 394 阅读 · 0 评论 -
vue-cli3项目打包后自动化部署到服务器
一、安装 scp2npm install scp2 --save-dev二、写好脚本例如 upload.js (下面任选一个即可)位置和 package.json平级即可。简略版'use strict'// 引入scp2var client = require('scp2');client.scp('./dist/', { // 本地打包文件的位置 "host": 'XXX.XX.XX.XXX', // 服务器的IP地址 "port": 'XX',转载 2020-09-16 09:27:17 · 1715 阅读 · 1 评论 -
vue cli3适配所有端方案
vue cli3适配所有端方案应用场景页面需要在pc端和移动端同时兼容,以前我的方案都是使用媒体查询来判断当前设备大小,然后写两套或者三套css代码来兼容他们,能达到目的,并且效果不错,但是感觉还是稍微麻烦了一丢丢。后面了解了一下flexable.js脚本,稍作修改,基本可以满足我的需求。postcss-px2remyarn add postcss-px2rempostcss-px2rem插件可以将px转为rem,需要在vue.config.js(项目没有的话就手动创建一个)中配置插件// c原创 2020-09-15 15:27:49 · 474 阅读 · 0 评论 -
总结一下vue移动端适配方案
方案一:amfe-flexible+px2rem-loaderamfe-flexible:根据设备宽度,修改根元素html的大小,以适配不同终端px2rem-loader:将css中的px转为rem单位,用了它就不用自己计算rem值了注意:amfe-flexible是lib-flexible的优化,主要区别是amfe-flexible不会改变视口大小安装 + 配置1. 安装amfe-flexible和px2rem-loadernpm install -s amfe-flexiblenpm i转载 2020-09-15 15:01:37 · 1639 阅读 · 0 评论 -
vue项目报错Uncaught SyntaxError: Unexpected token <
vue项目报错Uncaught SyntaxError: Unexpected token <这是引入第三方依赖js报错的问题。将引入的js文件夹,与index.html,放到同一级。如果在cli2中就该放到static文件下原创 2020-09-15 10:14:47 · 710 阅读 · 0 评论 -
vue-video-player的使用,实现自定义播放起点(位置)
所用插件vue-video-player 这是一款基于video.js的视频播放器插件1.安装:npm install vue-video-player --save2.全局引用, 在main.js里面导入并引用import VideoPlayer from 'vue-video-player'import 'vue-video-player/src/custom-theme.css'import 'video.js/dist/video-js.css'Vue.use(VideoPlaye原创 2020-09-10 14:47:52 · 6290 阅读 · 2 评论 -
vue项目打包后index.html页面空白怎么办?
vue项目打包成功后生成dist文件,在dist文件里的index.html页面打开是空白的,并且控制台报错:报错的原因在于index.html页面里引入文件的路径有问题我们可以在官网上找到vue cli的配置参考解决方案:在vue根目录下创建vue.config.js文件在里面module.exports = { publicPath: './',};...原创 2020-09-07 09:42:00 · 1612 阅读 · 1 评论 -
element ui中select动态获取选项与多级联动,且可输入关键字
element ui中el-select动态获取选项与多级联动,且可输入关键字具体代码如下:<template><el-select v-model="valuelesson" placeholder="请输入关键词" class="interval" @change="selectlesson" filterable remote :filter-method="dataFilter"> <el-option v-for="i原创 2020-09-04 11:51:50 · 2345 阅读 · 0 评论 -
vue,element ui中的el-select数据量大实现下拉框分页
分页组件还是用element ui里的,这样相对而言代码更简洁了,el-select下拉框分页代码具体如下:<template><el-select v-model="valueuser" placeholder="请选择用户" class="interval" @change="selectuser"> <el-option v-for="item in userlist.slice((currentPage-1) * pagesize, current原创 2020-09-04 11:23:27 · 4810 阅读 · 2 评论 -
vue+element ui下拉框可搜索(接口返回的数据)
在el-select中加入filterable属性,就开启了搜索功能,具体代码在下面:<template><el-select v-model="valuelesson" placeholder="请输入课程的关键词" class="interval" @change="selectlesson" filterable remote :filter-method="dataFilter"> <el-option v-for="item in lessonlis原创 2020-09-03 16:06:07 · 4290 阅读 · 0 评论 -
修改element ui样式不生效
如果css代码是这样的:<style scoped></style>那么就把scoped去掉就可以了,如下:<style></style>原创 2020-09-03 13:13:04 · 548 阅读 · 1 评论 -
vue中使用echarts
仅自己的意见,供自己查阅1.https://zhuanlan.zhihu.com/p/1029563762.https://www.imooc.com/wenda/detail/3951073.https://www.jb51.net/article/182230.htm4.https://blog.csdn.net/belongtocode/article/details/103655329?utm_medium=distribute.pc_aggpage_search_result.none-t原创 2020-08-31 13:33:00 · 199 阅读 · 0 评论 -
如何在vue中使用flexible
1. 安装lib-flexiblenpm i lib-flexible --save2. 在项目入口文件main.js里引入lib-flexibleimport 'lib-flexible/flexible.js'3.在项目根目录的index.html 头部删除自动生成的meta标签, lib-flexible会根据屏幕自动生成相对于的meta标签// 删除<meta name="viewport" content="width=device-width, initial-scale=原创 2020-08-28 16:07:16 · 9908 阅读 · 0 评论 -
如何设置vue项目显示浏览器的图标
设置vue项目在浏览器中显示的图标1.如果是这种目录在public静态资源目录里找到index.html,设置方法就是在index.html的head标签中添加link标签。原创 2020-08-19 17:07:21 · 1301 阅读 · 0 评论 -
当运行vue项目的时候出现Failed to load plugin react: Cannot find module ‘eslint-plugin-react‘
**当运行vue项目的时候出现Failed to load plugin react: Cannot find module ‘eslint-plugin-react’ 。$ npm install eslint --save-dev$ npm install eslint-plugin-react --save-dev执行命令即可解决原创 2020-08-19 16:12:12 · 5789 阅读 · 0 评论