Vue
草字
点点关注点点赞,私信问答先回复。
展开
-
nvm npm包管理器,同时安装多个node.js版本,不用再一个版本一个版本的安装
node.js的版本更新迭代的很快,版本更新后很多时候无法兼容以前的项目,开发的时候往往需要很多版本的node.js。如果来回卸载安装node.js就太耽误时间和麻烦了,推荐大家使用nvm工具(node.js多个版本同时安装),可以直接切换node.js版本。nvm install 8.12.0 //8.12.0为node.js的版本号。下载后进行安装,安装后控制台输入nvm -v检查是否安装成功。原创 2022-11-24 10:56:20 · 1064 阅读 · 0 评论 -
vue Loading PostCSS Plugin failed: Cannot find module ‘postcss‘
postcss这个插件是适配的插件,全称不是postcss,所以不能通过npm i postcss,其次postcss的版本不能太高了,安装项目中package.json的指定版本就可以了。原创 2022-11-02 15:36:10 · 3885 阅读 · 0 评论 -
vue Cannot find package ‘babel-plugin-import‘ imported from
报错:解决方法:原创 2022-10-24 16:05:25 · 3011 阅读 · 0 评论 -
js,vue 上传图片前压缩图片(无损压缩,保持在2M以内)
js 上传图片前压缩图片(无损压缩,保持在2M以内)原创 2022-10-17 11:28:29 · 4848 阅读 · 0 评论 -
vue Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime
执行命令:原创 2022-10-12 10:29:41 · 263 阅读 · 0 评论 -
APP端webview嵌套h5页面,h5的返回按钮点击没有效果?
比如第三方客服,在h5页面中提供了返回按钮,而在app端并没有提供返回按钮,让用户用物理返回键返回。关于app端嵌套h5的页面,原创 2022-08-29 14:56:44 · 3148 阅读 · 0 评论 -
js import导入文件时报错:does not provide an export named ‘default‘ (at
说明:vue3不能使用require,所以需要将require替换成import这种方式,防止报错。文件没有export default来导出不存在默认的对象。引入需要使用到的属性和方法。将所有导出属性和方法合并到一个对象中。...原创 2022-08-26 16:20:56 · 42341 阅读 · 0 评论 -
vue2和vue3 canvas插件,绘制海报,生成图片等等。
将插件代码下载后,放在vue项目中的components目录下。原创 2022-08-26 16:02:30 · 3097 阅读 · 0 评论 -
vue arcgis地图安装使用;引入文件报错404,地图显示不全、缺块;常见问题。
ArcGIS是什么?ArcGIS 是一个全面的系统,用户可用其来收集、组织、管理、分析、交流和发布地理信息。作为世界领先的地理信息系统 (GIS) 构建和应用平台,ArcGIS 可供全世界的人们将地理知识应用到政府、企业、科技、教育和媒体领域。ArcGIS 可以发布地理信息,以便所有人都可以访问和使用。本系统可以在任何地点通过 web 浏览器、移动设备(例如智能手机和台式计算机)来使用。效果图: 1.安装依赖:2.使用:常见问题:arcgis不同版本对应的模块是不一样的,所以在安装依赖的时候需要确原创 2022-06-10 17:46:46 · 2236 阅读 · 1 评论 -
npm i 安装时报错npm:vue-loader@^15.9.7
项目安装依赖 npm i 时报错:Install fail! Error: Unsupported URL Type: npm:vue-loader@^15.9.7网上很多方法都说需要将node.js的版本提高,或者还有一些是升级npm,可是还是不行。升级npm:npm install -g npm最后试了一下安装提示的vue-loader对应版本,发现就可以了,命令如下:npm install vue-loader@15.9.7 -D也不知道是不是需要现将node.原创 2022-05-25 17:58:03 · 7070 阅读 · 0 评论 -
vue 使用高德地图,选点定位,搜索定位
效果图:一、申请高德地图的使用密钥key。高德开放平台 | 高德地图API在高德地图控制台里面“我的应用”中创建应用,并添加key就可以拿到密钥key和安全密钥了。二、安装依赖。npm install -S vue-amap三、使用。main.js引入依赖。import VueAMap from 'vue-amap'Vue.use(VueAMap);// 初始化vue-amapVueAMap.initAMapApiLoader({ key:.原创 2022-05-19 17:15:17 · 12297 阅读 · 24 评论 -
nuxt.js 打包上线
1.首先在项目根目录执行命令。npm run build命令执行完成后,不会生成像vue脚手架一样的dist目录,而是.nuxt目录。2.服务器端上线。打包后,在根目录创建dist目录(为了跟其他项目保持一致),将:.nuxt、static、nuxt.config.js、package.json 这些文件和目录复制到dist目录中。然后将dist目录放在服务器上,并依次执行以下命令:npm installnpm run start使用nginx做代理,将项目域名代理到原创 2022-05-16 18:07:22 · 2152 阅读 · 0 评论 -
echarts 生成中国陕西省份(或其他省份)的地图,大屏使用
效果图:一、首先第一步需要下载echarts和获取到陕西身份的地图信息。1.下载echarts链接(官网):Apache ECharts2.生成指定省份的地图数据信息,数据可以在阿里云获取。DataV.GeoAtlas地理小工具系列如图,点击左圈需要的省份,这里我选择的是陕西省,然后点击右圈复制下载链接,得到一个json格式的数据,可以在json转换网站转成js格式。Json在线解析格式化-Json在线校验Json格式化压缩-Jsons在线工具转成js格.原创 2022-05-13 15:54:14 · 2882 阅读 · 0 评论 -
iview pro 项目报错token.type.endsWith is not a function
iview pro模板项目启动时报错:token.type.endsWith is not a function报错的原因是因为.eslintrc.js配置问题,parser对应的依赖不存在:解决方法:换一下新的依赖:module.exports = { root: true, env: { node: true }, 'extends': [ 'plugin:vue/essential', '@vue/standard' ], ru原创 2022-05-13 14:10:02 · 2533 阅读 · 0 评论 -
vue calc函数计算出来的值有问题,不生效(less插件)
calc函数计算出来的值有问题,不生效。多半是是跟less插件起冲突了,需要将calc写法转成字符串类型,如:calc(~“100% - 40px”)。css的calc()函数相关知识:运算符前后必须空格隔开,否则不生效;常用的长度值几乎都可以使用calc()函数进行计算(包括%,px等),calc()函数支持 “+”, “-”, “*”, “/” 运算; calc()函数在less中不能使用不生效(less的运算方式和calc发送了冲突),比如calc(100% - 250px )会被编译为ca原创 2022-05-13 11:19:09 · 2166 阅读 · 0 评论 -
vue 启动报错,提示安装npm install core-js@3.6.4// oryarn add core-js@3.6.4
1.卸载依赖node_modules2.先安装报错依赖:npm install core-js@3.6.4@3.6.4指定的版本,需要跟项目package.json对应。3.安装依赖:cnpm i4.启动项目。原创 2022-04-26 18:08:59 · 1100 阅读 · 0 评论 -
js 监听页面滚动到底部,监听可视区域滚动到底部
全局页面body上的底部监听:window.onscroll = function(){ var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; var windowHeight = document.documentElement.clientHeight || document.body.clientHeight; var scr原创 2022-03-18 10:24:17 · 5579 阅读 · 2 评论 -
vue 全屏和取消全屏,选择文件(上传图片等)时状态出现异常,选择文件时退出全屏状态
代码:<div class="alignCenter mr10 active_t" @click="handleFullScreen" style="font-size: 16px;color: #999;"> <Icon type="md-resize" style="font-size: 16px;" /> <span style="margin-left:2px;">原创 2022-03-08 17:43:42 · 2290 阅读 · 6 评论 -
js input[type=file]选择重复的文件,无法触发change事件
选择文件的时候,浏览器会判断是否跟之前一致,如果一致他就不会重新加载这个文件,避免无谓的加载消耗。所以我们在不一样的需求的时候,比如裁剪图片,无论他是不是相同图片,都必须让他触发change事件,这样才能进行下一步处理。解决方法:给input添加原生事件onblur进行清空,onblur="this.value=''",blur比change事件的优先级要高一点。代码:<inputtype="file"accept="image/*"onblur="this.value=''"...原创 2022-03-01 15:00:31 · 2160 阅读 · 1 评论 -
vue vue-cropper图片裁剪,头像裁剪
官方链接(github):GitHub - xyxiao001/vue-cropper: A simple picture clipping plugin for vue一、安装。npm install vue-cropper -S以下测试代码推荐使用指定版本:npm install vue-cropper@0.5.5 -S如果生成的图片出现偏移多半是版本的问题。不过也有可能是样式问题,如:img{max-width:100%;}如上代码就...原创 2022-03-02 09:57:55 · 1217 阅读 · 0 评论 -
iview 日期选择器,限制不能选择今天之前或今天之后的日期,出生日期
代码:<DatePicker v-model="box.birth" :options="options3" type="date" placeholder="请选择时间" style="width: 200px"></DatePicker> options3: { disabledDate (date) { // return date && date.valu原创 2022-02-23 11:47:38 · 1933 阅读 · 1 评论 -
vue 脚手架目录文件说明
package.json 1) npm 项目文件 package-lock.json 2) npm 依赖 lock 文件 public/ 3) 预设的静态目录 src/ 3) 源代码目录 main.ts 3) 源代码中的初始入口文件 router.ts 3) 源代码中的路由文件 store/ 3) 源代码中的数据流模块目录 webpack.原创 2022-02-21 10:57:48 · 235 阅读 · 0 评论 -
vue 通用复制文本到剪切板并提示
1.安装。npm install vue-clipboard2 --save2.引入。main.jsimportVueClipboardfrom'vue-clipboard2';VueClipboard.config.autoSetContainer=true; //这个配置非必须Vue.use(VueClipboard);三.使用。1.局部使用。 //复制 copy(str){ this.$copyText(s...原创 2022-02-18 10:31:52 · 450 阅读 · 0 评论 -
js 去除字符串左右两边的空格trim
去除两边空格应用场景:后台系统的搜索,复制文本到输入框的时候容易出现左右空格。代码:let str=" afojj8809 ";//去除左边空格function ltrim(s){ return s.replace(/(^\s*)/g, "");}//去除右边空格function rtrim(s){ return s.replace(/(\s*$)/g, "");}//去除左右两边空格function trim(s){ return s.replace原创 2022-02-11 14:13:50 · 4941 阅读 · 0 评论 -
iview 表单只添加*星号,不让他触发效验规则
代码:<FormItem label="链接" prop="jumpUrl" :rules="[{ required: true, message: '',trigger:'none'}]"> <Input v-model="box.jumpUrl" style="width:50%;"></Input> </FormItem>原创 2022-02-10 10:30:03 · 1028 阅读 · 0 评论 -
vue 上传文件(视频)的进度条,监听axios请求的进度。
这个我就不写简单demo了,直接上核心代码。代码:上传按钮:<input type="file" accept="image/*" @change="uploadFile($event,item)" class="uploadImg"/>进度条:iview的组件。<Progress text-inside :percent="item.fileUploadPercent" />监听进度的核心代码,onUploadProgress:原创 2022-02-09 17:19:14 · 5218 阅读 · 0 评论 -
js e.stopPropagation()阻止冒泡事件和e.preventDefault()阻止默认行为的应用场景
一、阻止冒泡事件。示例图:通常,在很多用户界面中,都经常出现如上图所示,点击列表的时候,进入这条数据的详情页面,点击编辑的时候,弹窗编辑这条数据的信息。但是呢,做完之后,发现点击编辑的时候不仅仅会打开弹窗并且还会跳转页面,也就是两个事件都触发了,这个时候我们就需要在点击编辑的时候,阻止事件继续往上派发。代码:$('.toDetail').on('click',function(){ console.log('跳转详情页面');});$('.editDetail').on('原创 2022-01-27 15:08:05 · 2760 阅读 · 0 评论 -
iview 刷新菜单menu的展开项updateOpened
iview的菜单项,是由open-names属性决定的,首次设置的时候还会生效,但是后面修改了这个属性绑定的值,并没有刷新菜单的展开项。以为是个bug,其实不是的,iview给menu提供了一个updateOpened来更新菜单的展开项,可能是因为监听open-names值会带来一些不必要的性能消耗吧。菜单配置:<Menu width="auto" theme="dark" ref="menusRef" v-show="!collapsed" :accordion="true" :ope原创 2022-01-26 15:22:46 · 890 阅读 · 0 评论 -
vue iview后台系统可收缩式折叠菜单
效果图:文件/view/layout/layout.vue。公共路由文件。<template><div class="layout-wrapper"> <Layout class="layout-outer"> <Sider collapsible v-model="collapsed" hide-trigger breakpoint="sm"> <div class="i...原创 2022-01-24 17:19:22 · 2150 阅读 · 0 评论 -
vue 轻量级富文本vue-quill-editor
轻量级富文本vue-quill-editor,你的不二之选,再也不用担心用户不会使用了效果图:一、安装依赖。npm install vue-quill-editor --save二、使用。//不要再main.js引入哈,富文本在项目中很少访问的。使用组价:<quill-editor ref="myQuillEditor" v-model="content" :options="editorOption" @blur="onEdi..原创 2022-01-24 16:56:58 · 806 阅读 · 0 评论 -
vue 给axios请求添加进度条效果
1.安装依赖。cnpm i nprogress -S2.引入进度条。import Nprogress from 'nprogress'import 'nprogress/nprogress.css'3.使用。发送请求时,在request方法添加进度条。// request拦截器service.interceptors.request.use( config => { Nprogress.start();//核心代码 ret原创 2022-02-07 13:34:02 · 2380 阅读 · 0 评论 -
iview 给radio单选按钮绑定点击事件
我们可以用行内标签span包裹单选按钮,这样点击单选按钮的时候,事件会网上依次传递,也就会触发span标签的点击事件。代码:<span @click="toggleAuthor('system')"> <Radio :value="box.author=='system'">系统</Radio> </span>其他:插槽里面绑定事件,只能点击文本,所以不推荐。...原创 2022-01-20 13:58:46 · 1229 阅读 · 0 评论 -
vue filter过滤器汇总
dayjs安装命令:npm i dayjs -S代码:import dayjs from 'dayjs'// 两个浮点数求和function accAdd(num1,num2){ var r1,r2,m; try{ r1 = num1.toString().split('.')[1].length; }catch(e){ r1 = 0; } try{ r2=num2.toString().split原创 2022-01-14 16:40:06 · 234 阅读 · 2 评论 -
vue 原生js上传图片文件
内容比较简单,我就不独立写demo来演示了,想参考的可以借鉴。核心代码:<input type="file" accept="image" @change="uploadPhoto" ref="uploadImg" id="fileupload1" /><Button type="primary" size="large" @click="handleAddBanner()">上传</Button>data() { return {原创 2022-01-05 18:50:12 · 449 阅读 · 0 评论 -
vue element-ui封装table表格(简单版),不需要封装得很多功能,不然不好拓展
封装部分:<!--封装表格--><template><div> <el-table :data="td" style="width: 100%;"> <template v-for="(item, index) in th"> <!--直接渲染--> <el-table-column v-if="!item.slot" :label="item.ti原创 2021-12-03 15:00:59 · 234 阅读 · 0 评论 -
vue 主题色切换,黑白切换(less,sass)
本篇文章以less为例,sass可以按照相同逻辑实现。一、定义css颜色变量。.white-theme { --color-primary: #fff;} .black-theme { --color-primary: #000;}--color-primary只会在外层有这个类的情况下,这个变量才会生效。大家使用的使用可以将这些不同主题色的所有颜色值单独存放在不同的css文件中,方便后期维护。相关说明:1.--color-primary以--开头的通通被称为c原创 2021-12-01 15:15:44 · 4628 阅读 · 2 评论 -
vue 封装组件时.sync修饰符的实现
效果图:pkDialog.vue,代码:<template> <div> <div class="fullbg" v-if="visible" @click="maskCannelPop()"> <div class="fullcenter" @click.stop=""> <div class="close_btn" @click="cannelPop">原创 2021-02-08 15:56:24 · 326 阅读 · 0 评论 -
vue 讯飞在线文字合成语音,文字转成语音
资源链接:讯飞在线语音合成demo。tts_ws_js_demo.rar-互联网文档类资源-CSDN下载原创 2021-11-23 16:54:12 · 2318 阅读 · 0 评论 -
vue 动态路由权限管理(浓缩代码简单版)
一、首先在main.js做路由守卫,不能先跳转路由页面,在页面中向后端获取路由配置文件。*相关补充:权限管理一般放到项目的最后时间来做,最开始路由配置信息前端都是写死,做权限管理的时候,需要将路由配置发给后端,让后端判断该显示哪些菜单,再返回给前端,不能前端判断,考虑到后端接口返回的值是可以被拦截修改的。*main.js添加如下代码:import store from "./store";/**动态路由 */const whiteList = ['Login', 'Index'];//默认原创 2021-10-15 15:30:44 · 2727 阅读 · 0 评论 -
vue iview的Switch不显示问题
需要改成i-Switch,代码:<i-Switch v-model="isValids" @on-change="changeisValids" />原创 2021-11-08 18:16:15 · 1078 阅读 · 0 评论