csl125的博客_CSDN博客-js,vue,vue-cli领域博主

原创 vue-cli@3.x + 打包优化加载速度，打包去除console

vue-cli3打包生成环境移除console.log1.安装依赖npm install babel-plugin-transform-remove-console --save-dev2.babel.config.js文件【先配置不同的环境变量VUE_APP_ENV】 const plugins = ["@vue/babel-plugin-transform-vue-jsx"]// 生产环境移除consoleif(process.env.VUE_APP_ENV === 'prod

2020-12-04 11:37:17 99

原创 Vue 项目中使用拖拽弹框 dragdialog, 弹框拖拽缩放，拖拽排序等

在开发的时候有个需求是对弹框进行拖拽移动，拖拽方法，对弹框内的模块进行拖拽排序移动位置本drag-dialog是在element框架项目内进行的技术框架：vue.js + element-ui 拖拽组件：vue-slicksortdrag自定义指令1、在项目中src中新建 directive —> drag-dialog.js2、在main.js中引用import './components/dialog'3、在dialog中使用 dialog组件代码中添...

2020-11-24 10:11:12 384 2

原创关于vue/cli4.x vue-cli@4.x版本浏览器兼容问题处理，兼容ie

在开发项目时由于项目中使用到的监控插件不能兼容高版本的谷歌火狐等，只能使用ie,项目使用vue-cli 4.5.8版本构建vue-cli4.x默认情况下不需要自己手动安装babel-polyfill，官网对此也有介绍浏览器兼容性#browserslist你会发现有package.json文件里的browserslist字段 (或一个单独的.browserslistrc文件)，指定了项目的目标浏览器的范围。这个值会被@babel/preset-env和Autoprefixer...

2020-11-24 10:05:17 1314 4

原创 uni-app快速入手 ——（11）uni-app如何简单快速使用websocket

第一步创建一个websocket.jsimport variable from './variable.js'//ws长连接...var connect = function(userId) { uni.connectSocket({ url: variable.socketUrl + userId }); uni.onSocketOpen(function(res) { console.log('WebSocket连接已打开！'); }); uni.onSocketError.

2020-09-08 16:06:46 506

原创 uni-app快速入手 ——（10）ios上scroll-view局部滚动区域卡顿，滚动区域事件卡顿替代方案

在制作类似于picker 弹框多选时使用 scroll-view，在安卓上很流畅，但是在ios13上很卡顿，滚动到顶部或底部直接卡死，而且滚动区域的事件也很卡顿，经常无效不能触发，本文解决方案是使用swiper替代scroll-view此弹框就是scroll-view 滑动卡顿代替方案：<template> <view> <uni-popup ref="multiplePop" type="bottom" style="width: 100%;..

2020-08-15 00:34:33 668 2

原创 uni-app快速入手 ——（9）uni-app中webview 加载状态，加载loading自定义

webview 加载时候监听加载完毕//获取webview页面 var currentWebview = this.$mp.page.$getAppWebview().children()[4];//加载时候 loading plus.nativeUI.showWaiting()//监听加载完毕关闭loading currentWebview.addEventListener('loaded', function() { plus.nativeUI.closeWaiti

2020-07-31 16:09:24 1768 1

原创 uni-app快速入手 ——（8）如何获取客户端版本号，跳转应用是商店；如何打开外部应用，跳转appstore

1、获取客户端应用版本号plus.runtime.getProperty(plus.runtime.appid,(wgtinfo)=>{ console.log(JSON.stringify(wgtinfo));//客户端详情数据 console.log(wgtinfo.version);//应用版本号})2、跳转应用市场前提已在应用市场上架if (plus.os.name == "Android") { let appurl = "...

2020-07-21 16:49:57 766

转载前端常用的工具方法，常用js方法

1.邮箱export const isEmail = (s) => { return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)}2.手机号码export const isMobile = (s) => { return /^1[0-9]{10}$/.test(s)}3.电话号码export const isPhone = (s) =>.

2020-07-10 09:35:54 144

转载 jst数组方法速查手册(记录)

1 概述1.1 前言JavaScript数组方法速查手册极简版中共收了32个数组的常用方法和属性，并根据方法的用途进行重新排序和分类，在文中简要的介绍了方法作用和用例说明。收藏备用吧！文中介绍的过于简单，想更更多理解相关内容还是要多多动手实践！2 数组属性2.1 length-长度属性每个数组都有一个length属性。针对稠密数组，length属性值代表数组中元素的个数。当...

2020-07-06 10:53:33 56

原创 uni-app快速入手 ——（7）uni-app是用webview在iPhoneX以上机型解决“刘海”问题，去除安全区问题

记录一下在uni-app中使用webview 页面出现刘海问题，查询资料解决iphoneX的“刘海”为相机和其他组件留出了空间，同时在底部也留有可操作区域。那么网站边尴尬了~被限制在了这样的“安全区域”内，两边会出现一道白条。解决的方案是：1、给body添加一个background；2、添加viewport-fit=cover meta标签，使页面占满整个屏幕。<meta name="viewport" content="width=device-width, initial-scale

2020-07-06 10:09:44 848

原创 uni-app快速入手 ——（6）uni.navigateBack返回上一页如何刷新数据，调取上一页的事件

pageA 页面A事件 refreshRequest() { //刷新数据事件 },pageB 页面B // 返回刷新 backPageRefresh(){ let pages = getCurrentPages(); // 当前页面 let beforePage = pages[pages.length - 2]; // 前一个页面 console.log("beforePage",beforePage); consol

2020-05-29 16:48:23 2492

原创 uni-app快速入手 ——（5）项目实战一自定义组件+组件传值，uni.createAnimation()在app中如果是数组渲染的话无效果解决

在项目搭建中可能某一模块频繁使用，这样为了方便组件的复用性，就可以单独建一个组件使用本文说演示示例是一个评分打星星组件一、首先在项目中建文件名称为components uni-app组件目录和vue项目一样在components新建组件 starComp.vue<template name="helloComp"> <view> <vie...

2020-04-21 17:43:59 1093

原创 uni-app快速入手 ——（4）项目实战一搭建项目，tabBar设置和单页page设置

tabBar 的属性配置官方文档链接https://uniapp.dcloud.io/collocation/pages?id=tabbar在page.json中配置例如：{ "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "page...

2020-04-21 17:28:43 671

原创 uni-app快速入手 ——（3）生命周期

应用生命周期uni-app支持如下应用生命周期函数：函数名说明 onLaunch 当uni-app初始化完成时触发（全局只触发一次） onShow 当uni-app启动，或从后台进入前台显示 onHide 当uni-app从前台进入后台 onError 当uni-app报错时触发 onUniNViewMessage ...

2020-03-14 16:07:47 207

原创 uni-app快速入手 ——（1）学会搭建基础项目，如何建uni-app项目和运行
原力计划

uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。DCloud公司拥有420万开发者，几十万应用案例、6.5亿手机端月活用户，数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（详见），腾讯课堂官方为uni-app录制培训课...

2020-03-05 13:43:53 4736

原创 uni-app快速入手 ——（2）uni-app 事件处理、事件绑定、事件传参，uni-app事件对应web事件

uni-app 的事件处理器几乎全支持Vue官方文档：事件处理器// 事件映射表，左侧为 WEB 事件，右侧为 ``uni-app`` 对应事件{ click: 'tap', touchstart: 'touchstart', touchmove: 'touchmove', touchcancel: 'touchcancel', touche...

2020-03-05 13:42:47 855 2

原创 vue-cli3导出表格excel，Export2Excel导出表格，导出多sheet excel，vue导出多页表格

目录（一）直接调用（二）、封装导出函数调用最近做项目中有一个导出excel表格的需求具体思路是：后端返回给我json数据，前端根据数据和具体的几项字段去导出excel表格，还有导出多个sheet，多页表格到一个excel表里面，具体思路根据Export2Excel插件，并修改插件Export2Excel完成导出多页(多个sheet)的excel第一步：安装插件依赖...

2019-05-18 18:55:38 7794 22

原创 vue-cli3+element搭建后台管理项目

一、安装需要的插件（1）创建项目vue create admin_project（2）安装elementnpm i element-ui -S（3）安装js-base64 js-md5 用于账号登录注册npm install --save js-base64npm install --save js-md5（4）安装默认样式清除normalize.c...

2019-04-26 14:59:01 1846 1

原创 vue+element项目里实时监听某个div宽度的变化，然后执行相应的事件

背景：vue项目中用到echarts图表，页面上有侧边栏，侧边栏收缩图表不能自适应，想通过监听内容部分的宽度让图表resize，试过window带的resize，只能监听浏览器窗口大小变化，为了监听某元素区域的变化而使echarts的尺寸重置。本次解决采用element-resize-detector可以完美的解决思路：因为收缩侧边栏的时候右侧的区域会自动适应，但是echarts不...

2019-04-12 17:40:56 23563 16

原创 vue-cli3.0创建项目，vue-cli3.0各项配置与安装， vue-cli3.0 上手教程（二）之登录加密——如何在vue项目中使用md5.js及base64.js

在做登录的时候对密码会进行简单的加密。简单采用MD5和base64加密，或者采用组合加密，盐值加密等，如何在vue项目中使用md5.js及base64.js一、在项目根目录下安装npm install --save js-base64npm install --save js-md5二、在项目文件中引入全局在main.js中引用import md5 from "j...

2019-03-25 10:38:20 446

原创 vue-cli3.0创建项目，vue-cli3.0各项配置与安装， vue-cli3.0 上手教程（二）

一、解决模板编译的问题在升级脚手架到vue-cli3.0版本的时候出现了这个报错：[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render function...

2019-03-08 14:19:28 250 1

原创 vue-cli3.0创建项目，vue-cli3.0各项配置与安装， vue-cli3.0 上手教程（二）之 VUE-CLI3的eslint配置问题

VUE-CLI3按照官网教程配置搭建后，发现每次编译，eslint都抛出错误最奇怪的是竟然HTML也被抛出警告了，虽然没有影响项目的运行，但是强迫症还是决定修改一下error: Expected indentation of 4 spaces but found 0 (indent) at src\views\User.vue:26:1:1 error found.1 error p...

2019-02-25 19:12:15 1772

原创 vue-cli3.0创建项目，vue-cli3.0各项配置与安装， vue-cli3.0 上手教程（一）

目录1. 安装 vue-cli3.0 ，可以使用下列任一命令安装这个新的包：2.打开终端，创建一个项目3. 配置自己选择4. 项目构建完成启动项目4.1启动成功4.2 运行报错无报错忽略5.安装axios6. 配置 vue.config.js6.1 全局 CLI 配置文档6.2 配置跨域代理vue-cli 3.0 官网教程 vue-...

2019-01-22 16:21:41 4736 6

原创 vue axios封装httpjs，接口公用配置拦截

做一下记录，在vue项目中配置公用的请求https,(1) 位置，在src中新建 src/utils/http.jsimport axios from 'axios' // 引用axiosimport { MessageBox, Message } from 'element-ui'import Qs from 'qs' //引入数据格式化import router from '@...

2018-12-18 17:22:06 4379

原创 git使用简单笔记

Git使用总结1.下载代码到本地1.1指定存储文件路径1.运行git-bash.exe2.指定盘符：cd f:work1.2下载代码命令：$ git clone <版本库的网址> <本地目录名>版本库的网址：若有用户名、密码，则：http//:用户名@版本库的网址本地目录名：若不填写此属性则用远程代码仓库名为目录名称；如果填写则用填写名称为本...

2018-11-24 00:48:36 142

原创 uni-app app清除app缓存，使用一段时间app数据图片等缓存清理，记录一下

uni-app app清除本地的缓存，app使用一段时间缓存数据导致app卡顿，清理缓存记录一下操作设置里面有清理缓存按钮，点击按钮清除缓存export default { components: { uniIcons, uniPopup, confirmPop }, data() { return { fileSizeString: "" } }, onLoad() { this.formatSize() },.

2021-01-27 18:28:02 123 2

转载基于Vue的前端架构，我做了这15点, 搭建vue框架所需的基础配置

转自：codexujuejin.cn/post/69014669944789401681.分解需求技术栈考虑到后续招人和现有人员的技术栈，选择 Vue 作为框架。公司主要业务是 GIS 和 BIM，通常开发一些中大型的系统，所以 vue-router 和 vuex 都是必不可少的。放弃了 Element UI 选择了 Ant Design Vue（最近 Element 好像复活了，麻蛋）。工具库选择 lodash。建立脚手架搭建..

2021-01-06 09:29:52 69

原创 vue 项目npm install 报错 npm ERR! enoent undefined ls-remote -h -t ssh://git@github.com/sohee-lee7/Sq

npm install出错的解决办法很多小伙伴可能跟我一样是个小白，还不知道怎么启动vue，然后就照着README一阵乱搞，然后npm install的时候就报了以下的错误，网上的解决办法也看不懂，我自己的解决办法来了it <https://github.com/lukeed/kleur/releases/tag/v3.0.0\> for migration path(s).npm WARN deprecated left-pad@1.3.0: use String.prototyp

2020-09-14 11:13:22 1444

原创 ES2020新特性之空位合并操作符

空位合并操作符当我们查询某个属性时，经常会给没有该属性就设置一个默认的值，比如下面两种方式：let c = a ? a : b // 方式1let c = a || b // 方式2这两种方式有个明显的弊端，它都会覆盖所有的假值，如(0, '', false)，这些值可能是在某些情况下有效的输入。let x = { profile: { name: '浪里行舟', age: '' }}console.log(x.profile.age || 18) //18

2020-09-02 15:56:18 142

原创 js截取日期为数组 2020-08-20 09:51:12 截取为[‘‘,‘‘,‘‘,‘‘,‘‘,‘‘]

dateSpliceTime(val, tindex) { if (!!val) { let dateArr = val.split(/[\s:-]/); //输出[年, 月, 日, 时, 分, 秒] let backItem = dateArr[tindex]; return backItem; } else { return '' } },

2020-08-20 09:52:39 135

原创根据小时数计算开始时间，8个小时前的日期

根据小时时间数计算开始时间和结束时间场景：此时，选择8小时做浏览记录查询分析：8小时的浏览记录，根据当前时间往前推算8小时的时间，计算出当前时间戳 - 8 * 60 * 60 *1000 = 开始时间戳程序如下：/** * 时间戳转化为年月日时分秒 * number: 传入时间戳 * format：返回格式，支持自定义，但参数必须与formateArr里保持一致 */function formatTime(number, format2) { ...

2020-07-06 10:51:07 128

原创在vue项目中使用轮询器《轮询》

<template> <div> {{text}} </div></template><script>export default { props: { }, data () { return { text: 0, timerId: 1, // 模拟计时器id，唯一性 timerObj: {} // 计时器存储器 } }, computed: {.

2020-06-28 11:00:31 219

转载 js函数防抖节流

一、什么是函数防抖概念：函数防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。二、为什么需要函数防抖　　前端开发过程中，有一些事件，常见的例如，onresize，scroll，mousemove,mousehover等，会被频繁触发（短时间内多次触发），不做限制的话，有可能一秒之内执行几十次、几百次，如果在这些函数内部执行了其他函数，尤其是执行了操作 DOM 的函数（浏览器操作 DOM 是很耗费性能的..

2020-06-23 16:26:13 65

原创 vscode开发vue项目自动整理代码

安装必要的插件配置文件{ "window.zoomLevel": 0, "px-to-rem.px-per-rem": 100, "workbench.editor.enablePreview": false, //打开文件不覆盖 "search.followSymlinks": false, //关闭快速预览 "files.autoSave": "af...

2020-04-14 14:06:30 487

原创 html页面引入公共头部和尾部

如何在HTML不同的页面中，共用头部与尾部？一、asp语言和PHP语言首先制作一个头部文件head.asp，或者一个底部文件foot.asp。如主页是index.asp，调用头部代码是在index.asp文件代码的开始位置（第一个标记后面，<head>标记前面）增加如下代码：<!– #include file=”head.asp” –> 调用共用底部...

2020-03-05 09:12:39 14369 2

原创 js限制input的输入

限制只能输入大于等于0的正整数 onkeyup="value=(value.replace(/\D/g,'')==''?'':parseInt(value))"限制输入正整数（不包括0）onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"限制输入大于等于0的两位小数oninput="value= value.match(/\d...

2020-01-09 15:40:19 71

原创 input 限制输入大于0的数字

onkeyup="this.value=this.value.replace(/\D|^0/g,'')"onafterpaste="this.value=this.value.replace(/\D|^0/g,'')"

2019-09-18 11:33:16 698 1

原创 vue中设置背景音乐

<audio :src="MP3" loop ref="MusicPlay"></audio> musicPause () { this.$refs.MusicPlay.pause() }, musicPlay () { this.$refs.MusicPlay.play()...

2019-08-21 14:29:07 1160

原创在vue项目中使用v-viewer,图片方法，旋转，缩小等操作

第一步、安装npm install v-viewer --save第二步、在项目中引用// 在main.js中全局引用import Viewer from "v-viewer"// 图片预览import "viewerjs/dist/viewer.css"// 图片预览Vue.use(Viewer)Viewer.setDefaults({ defau...

2019-07-31 21:21:08 5030

原创 vue项目中页面生成pdf并下载，vue 中页面转PDF

方法一第一步、安装插件// 第一个.将页面html转换成图片npm install --save html2canvas// 第二个.将图片生成pdfnpm install jspdf --save　第二步、定义全局函数,创建一个htmlToPdf.js文件在指定位置.例如放在('src/utils/html2pdf')// 导出页面为PDF格式import html2...

2019-06-29 16:54:15 14269 14