vue
不求甚解bc
这个作者很懒,什么都没留下…
展开
-
js数字、字母、符号等半角文本按0.5个字符计算长度
可以自定义一个指令(directive)来动态监控输入内容,并结合上面提供的。组件时,应用这个自定义指令,并设置期望的最大有效长度。封装 getEffectiveLength 方法。原创 2024-04-15 17:13:35 · 1135 阅读 · 0 评论 -
Vue自定义指令校验按钮权限
在类似运营平台的项目中,经常会有一些操作按钮需要校验当前登录的用户是否有权限访问。然而在每一个按钮上都加 v-if 判断非常的繁琐和冗余,为此可以通过自定义指令的方式来处理按钮权限原创 2024-01-25 15:55:04 · 1401 阅读 · 0 评论 -
el-form表单项自定义校验规则
官网的表单项都是写死在代码里面的,但是实际我们的表单大多是通过json配置出来的,就需要动态的根据配置信息做表单校验原创 2024-01-11 14:42:12 · 2083 阅读 · 0 评论 -
element表格空数据兼容问题
element表格空数据兼容问题。表格列过多,暂无数据不居中。当左右有fixed列的时候,底部滚动条无法选中原创 2023-12-28 14:44:38 · 1185 阅读 · 0 评论 -
从0开始搭建vue3+vite+ts+pinia项目
注意:直接使用环境变量会提示变量未声明,需要在 env.d.ts 或 vite-env.d.ts 文件中添加类型声明。,没有显示局域网ip地址,不方便局域网真机调试,需要配置启动host为0.0.0.0。配置.vscode/setting.json,自动校验eslint并修复。封装axios方法,新建/src/utils/request.ts文件。在项目代码中使用,比如main.ts / index.vue。3、在/src/store/目录下新建user.ts。打开vite.config.ts。原创 2023-06-05 15:08:38 · 2900 阅读 · 2 评论 -
vue路由中间件
在访问vue系统时,经常需要在进入路由前做一些全局处理或者登录状态校验,如果全部写在beforeEach函数中,内容会特别多,难以维护。需要将beforeEach中的内容拆分成多个中间件方法,按顺序执行。3、在路由配置文件router/index.ts添加中间件。注册需要的中间件文件,以修改页面标题和登录校验为例。原创 2023-06-02 16:34:56 · 1500 阅读 · 0 评论 -
pinia使用和持久化存储
1、安装持久化存储插件 pinia-plugin-persistedstate。项目构建时选择安装pinia,下面是使用方法以及持久化存储配置。3、在/src/store/目录下新建user.ts。原创 2023-05-16 11:42:29 · 1370 阅读 · 0 评论 -
vue3全局api组件
vue3全局api组件,类似UI组件的Dialog、alert原创 2023-05-15 17:42:28 · 2230 阅读 · 0 评论 -
postcss-pxtorem设置最小转换值
一般移动端的UI都是二倍图,对于边框常设置为border: 1px solid;这样在转换的时候,1px在真机渲染的时候就只有0.5px,在真机上会出现边框过细、显示不完整的问题。配置postcss-pxtorem的minPixelValue属性。原创 2023-04-27 11:13:33 · 1633 阅读 · 0 评论 -
git提交自动触发jenkins任务
git提交自动触发jenkins任务原创 2023-04-13 17:36:10 · 1559 阅读 · 0 评论 -
vue-virtual-scroll-list虚拟列表
虚拟列表原创 2023-03-09 15:53:25 · 3971 阅读 · 0 评论 -
TypeError: ErrorStackParser.parse is not a function解决依赖包版本问题
TypeError: ErrorStackParser.parse is not a function解决依赖包版本问题原创 2022-06-07 15:49:12 · 2741 阅读 · 2 评论 -
接口响应拦截器ajax-interceptor
背景当开发过程中,遇到以下场景时,前端需要对应场景的报文,可以通过谷歌浏览器的ajax-interceptor插件自己篡改接口报文,作为一个响应拦截器来使用1、后端不愿意造数据2、接口返回的数据不理想3、测试边界值4、复现 bug5、写mock数据插件安装方法一:在chrome应用商店搜索ajax-interceptor直接安装方法二:无法访问chrome应用商店的话,访问:百度网盘 请输入提取码,提取码:3gb5使用1、打开谷歌扩展程序,建议将该插件置顶原创 2022-03-03 14:42:15 · 2392 阅读 · 0 评论 -
jenkins分环境部署vue/react项目
vue部署请参考上一篇文章:https://blog.csdn.net/bocongbo/article/details/115909427项目开发正常都需要开发环境、测试环境、生产环境,每个环境部署都比较麻烦,可以使用jenkins自动化部署1、安装自定义参数化插件Extended Choice Parameter Plug-In2、配置自定义参数3、配置shell脚本shell脚本内容#!/bin/bash// 判断环境if [ $env == "dev" ].原创 2021-04-20 16:13:57 · 1671 阅读 · 0 评论 -
jenkins部署vue/react项目
准备工作1、安装参数化部署插件Git Parameter Plug-Ingit参数化构建,可选择分支、标签构建 Extended Choice Parameter Plug-In自定义参数化构建,可根据需要任意添加参数 NodeJS PluginNode环境,打包vue项目2、安装好插件后,配置Nodejs环境打开全局工具配置找到NodeJS,填写别名,选择需要安装的node版本创建项目1、创建一个job,选择构建一个自由风格的软件项目2、选择根据分支选项...原创 2021-04-20 15:58:18 · 2259 阅读 · 3 评论 -
centOS安装jenkins
centOS安装jenkins原创 2021-04-08 16:58:00 · 1631 阅读 · 0 评论 -
js禁止页面滚动
在web页面中,经常遇到一些弹窗内部有滚动条,可以滚动,弹窗后面的文档流也可以滚动,两个滚动区域会相互影响,用户体验不太好。1、弹出弹窗,禁止滚动const disableScroll = (domId) => { var scrollTopVal = document.documentElement.scrollTop || document.body.scrollTop; // 禁止滑动 const selectdom = domId || 'app'; document原创 2021-03-03 17:19:42 · 10107 阅读 · 2 评论 -
web前端灰度部署
在生产部署时,如果担心部署的代码可能会有问题,那就需要灰度部署,用灰度版本验证通过后,再发布到生产环境。灰度部署原理:将打包后的项目分成两个文件夹,一个是生产环境文件夹,对用户开放,还有一个是灰度文件夹,只有固定IP或者固定测试账号才能访问到。1、建两个目录,www目录为生产环境,www-grey为灰度环境2、测试账号灰度方案,登录后将account写到cookie中,缺点:登录前场景不方便验证,只能手动改cookieserver { listen 8080;原创 2021-01-23 14:42:25 · 3290 阅读 · 1 评论 -
vue打包加版本号
vue打包会用随机字符串作为文件名,控制静态资源及时更新,但是有些时候,浏览器就是不更新,可以在引入静态资源后面再添加版本号。vue-cli 2.0修改build/webpack.prod.conf.js,在HtmlWebpackPlugin插件配置项中添加hash: truenew HtmlWebpackPlugin({ filename: process.env.NODE_E...原创 2020-03-04 15:29:41 · 7458 阅读 · 0 评论 -
h5下载、导出文件
后台管理系统经常会需要导出Excel表格,h5导出、下载文件的常用方式有以下两种:1、a链接下载,该方法较为常见。特点:无法携带自定义请求头,接口验证用户信息不方便import qs from 'qs';export default function (url, data) { if (data) { url = url + '?' + qs.stringify(dat...原创 2020-03-03 15:12:28 · 5423 阅读 · 0 评论 -
nvm管理多版本node
项目开发中,经常会出现多个项目使用不同版本的node环境,我们需要根据项目去切换node版本。一、安装nvm管理工具下载地址:https://github.com/coreybutler/nvm-windows/releases,选择nvm-setup.zip下载安装。安装结束后,在cmd执行nvm -v,查看nvm是否已自动配置到环境变量中。二、使用1、查看已安装的node版...原创 2019-11-30 22:03:52 · 2288 阅读 · 0 评论 -
vuex数据持久化
1、安装npm i vuex -S2、在src目录下,新建store/index.js文件import Vuex from 'vuex'import Vue from 'vue'Vue.use(Vuex)export default new Vuex.Store({ state: { user: "" }, // mutations更改...原创 2018-08-15 11:00:31 · 6997 阅读 · 0 评论 -
vue按需加载
vue-cli构建的vue项目,在打包的时候,会把所有vue模板打包成一个app.js包,在项目页面比较多的时候,这个文件会非常的大。用户第一次访问,要加载vendor.js依赖包和app.js两个比较大的文件,响应非常慢。那么,就要把app.js拆分开来,打包成多个文件,访问哪个模板路由,就加载哪一个。不需要一次把所有模板页面全部加载。解决办法:在router/index.js文件中...原创 2018-08-15 14:31:31 · 6366 阅读 · 1 评论 -
vue组件通信
父子组件之间,需要进行数据传输父 ——> 子 props传递参数; 子——> 父 emit方法传递数据父组件:<template> <div> <child :propsName="propsData" @vote="voteId"></child>原创 2018-08-15 09:28:10 · 4517 阅读 · 1 评论 -
vue图片上传
图片上传是以表单的形式提交,vue上传图片步骤如下:1、绑定input框上传事件change<input type="file" @change="uploadFile($event)" multiple="multiple" />2、change事件触发methodsmethods:{ uploadFile:function(event){ t...原创 2018-08-14 17:21:38 · 8758 阅读 · 0 评论 -
vue去掉#,history模式
一、vue项目携带一个#会对开发造成一定的影响:1、微信三方登录回调地址,有#号时,接收不到code参数2、微信H5支付的回调地址,不允许有#3、App分享,处理特殊字符时,可能会对#进行编译4、有点影响美观现在网站大多有三方登录,支付等功能,存在#,项目开发就存在很大的障碍。话不多说,开始去掉#吧。二、去#的原理vue把#当做自己的根目录,静态资源,比如图片。去掉...原创 2018-08-14 17:11:15 · 26943 阅读 · 3 评论 -
vue i18n国际化
1、安装i18n插件,配合使用饿了么UI框架http://element-cn.eleme.io/#/zh-CN/npm install vue-i18n -Snpm install element-ui -S饿了么UI的组件语言也会一同更改,如图(英文状态):2、在src目录下,创建多语言目录i18nlangs目录下为语言配置文件,languages目录下为语言js...原创 2018-08-14 16:05:10 · 6119 阅读 · 1 评论 -
vue mock数据,模拟后台接口
在前端开发过程中,有后台配合是很必要的。但是如果自己测试开发,或者后台很忙,没时间,那么我们需要自己提供或修改接口。下面提供两种方式,第二种更简单,个人推荐第二种。一、mock文件1、安装,开发环境npm i mockjs -D2、在src目录下新建mock目录,结构如下:3、index.js内容如下:const Mock = require('mockjs');...原创 2018-08-15 11:20:24 · 37454 阅读 · 0 评论 -
vue使用jquery
vue开发模式是操作数据,进行模板渲染。而jQuery开发模式是操作dom元素,进行数据填充。这是两种截然不同的开发模式,所以建议在vue开发中,不要使用jQuery。如果非用不可,使用步骤如下:1、安装jQuerynpm i jquery -S2、修改jQuery配置,打开build/webpack.base.confmodule.exports = { ... alia...原创 2018-08-15 11:34:48 · 4699 阅读 · 0 评论 -
vue图片懒加载
在开发中,有一些页面以图片展示为主,界面不可见部分可能有很多图片用户并不会去看,而且图片消耗的流量十分多,必须要优化。1、安装vue-lazyloadnpm i vue-lazyload -S2、在main.js配置文件引入import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload, { preLoad: 1.3,...原创 2018-08-17 09:56:25 · 6988 阅读 · 1 评论 -
vue整屏滚动切换vue-awesome-swiper
1、下载vue-awesome-swipernpm i --s vue-awesome-swiper2、在main.js引入import vueAwesomeSwiper from 'vue-awesome-swiper'Vue.use(vueAwesomeSwiper);3、直接上案例,新建一个路由页面<template> <div class=...原创 2018-09-28 10:00:55 · 15083 阅读 · 4 评论 -
Apache,Nginx部署vue/react项目
vue项目直接打包发布在服务器上,访问项目非根目录路由,刷新界面的时候,会出现404情况。这是由于服务端不识别vue的路由配置,所以在遇到404的情况,要返回index.html,让vue自己去寻找自己的路由页面。vue打包注意点请看我的另一篇博客:(有一定关联)https://blog.csdn.net/bocongbo/article/details/81670072一、Apach...原创 2018-11-11 11:49:01 · 14109 阅读 · 1 评论 -
vue keep-alive返回更新数据
vue返回上一页的时候,默认都会重新执行生命周期,重新加载数据,这样其实不太友好。那我们仿照微信小程序,返回上一页不会触发onLoad,但是会触发onShow,我们就可以在onShow里面做一些事情。1、使用keep-alive,控制页面返回不刷新<template> <div id="app"> <keep-alive> &l...原创 2018-12-27 10:23:02 · 7505 阅读 · 0 评论 -
js上传图片获取原始宽高
以vue上传图片为例:<template> <div> <input type="file" @change="uploadFile($event)" multiple="multiple" /> </div></template><script> e原创 2019-03-05 15:22:55 · 6032 阅读 · 0 评论 -
vue命令多环境打包配置
一个项目可能有不同的版本,我们可以根据执行命令来区分不同的版本。比如:一个项目有大陆版和海外版,两个版本的接口地址和语言都不一样,那么可以根据命令来区分不同的版本,如下:1、在package.json中添加命令,在海外版命令中添加type变量为hw"scripts": { "dev": "webpack-dev-server --open --inline --progress --...原创 2019-09-21 22:53:26 · 3759 阅读 · 0 评论 -
vue浏览器返回监听
分享页面时,希望点击浏览器回退按钮,回到项目首页,增加访问量。需要监听浏览器的回退按钮,并阻止其默认事件。具体步骤如下:1、挂载完成后,判断浏览器是否支持popstatemounted(){ if (window.history && window.history.pushState) { history.pushState(null, null, d...原创 2018-08-14 14:54:40 · 42277 阅读 · 5 评论