vuejs
姜无忧
莫问前程凶吉,但求落幕无悔
展开
-
vue3浏览器报错解决Uncaught runtime errors
【代码】vue3浏览器报错解决Uncaught runtime errors。原创 2023-07-11 11:19:40 · 4249 阅读 · 3 评论 -
手写一个eventBus自定义事件
在我们的JavaScript中,可以给元素添加一个点击监听事件,当用户点击的时候,点击事件怎会被执行,这也是一种事件总线的思想在里面,就好比元素订阅了点击事件,用户发布或出触发点击事件。所谓事件总线模式,其实就和发布订阅模式非常类似,比如我们订阅了一个公众号,公众号发布文章之后我们就能收到信息,这就是一种订阅发布的关系。再比如在Vue2项目中,我们可以使用$on、$emit来实现事件的监听和触发,这其实就是一种事件总线的思想在里面,只不过Vue帮我们实现好了。使用$emit发布事件。实现$off取消订阅。原创 2023-03-21 15:00:27 · 313 阅读 · 1 评论 -
项目中常见的代码优化方案
一个为 null 和 undefined 的判断,减少 || 类型的处理,用?使用数组或者字符串的 includes 方法,代替 indexOf 方法。校验多个表单项不能为空,使用策略模式代替 if-else。使用switch,object或者Map代替。利用filter,some,every优化代码。减少没必要的if...else判断。原创 2023-03-10 17:35:19 · 266 阅读 · 0 评论 -
vue3中toRaw使用
ref和reactive 数据每次修改都会被追踪,都会更新UI界面,也是非常消耗性能的,所以如果我们有一些操作不需要追踪,不需要更新UI界面,那么这个时候我们就可以通过toRaw方法拿到它的原始数据,,这样会优化一些性能。原创 2023-03-02 21:41:53 · 541 阅读 · 0 评论 -
Pinia的基本使用(vue3)
Pinia.js 是新一代的状态管理器原创 2023-03-02 15:28:13 · 586 阅读 · 0 评论 -
vue3 shallowRef和shallowReactive
shallowReative与shallowRef在某些特殊的应用场景下,是可以提升性能的,前者针对对象,用于浅层作用的响应式数据处理,而后者只处理基本数据类型的响应式,不进行对象的响应式处理。原创 2023-03-01 16:59:20 · 612 阅读 · 0 评论 -
Vue3中ref、reactive、toRef、toRefs基本用法和区别
setup 函数中默认定义的变量并不是响应式的(即数据变了以后页面不会跟着变),如果想让变量变为响应式的变量,需要使用 ref 和 reactive 函数修饰变量。区别:reactive只能传入对象类型的参数,所以基本数据类型添加响应式状态只能用ref(当然ref也可以定义复杂的数据)ref 获取数据值需要加.value注:ref底层使用的是proxy代理函数实现双向绑定,proxy 函数必须要接收一个对象,如果想修改 name 的值,需要使用 name.value区别:toRef:只希望转换一个react原创 2023-03-01 15:47:34 · 958 阅读 · 0 评论 -
vue-cli中的环境变量注意点
只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中原创 2023-03-01 15:20:59 · 471 阅读 · 0 评论 -
<script setup>中父子组件传值及方法调用
中父子组件传值及方法调用 defineProps,defineEmits,defineExpose原创 2023-01-29 10:53:00 · 2017 阅读 · 0 评论 -
antd vue Cascader多选设置suffixIcon无效
antd vue Cascader多选设置suffixIcon无效原创 2023-01-09 17:01:23 · 895 阅读 · 0 评论 -
antd Table组件selectedRows翻页未保留上一页已选中数据(方法二)
antd Table组件selectedRows翻页未保留上一页已选中数据原创 2022-12-14 09:13:52 · 1277 阅读 · 0 评论 -
antd Table组件selectedRows翻页或重新搜索后未保留上一页已选中数据
antd Table组件selectedRows翻页或重新搜索后未保留上一页已选中数据原创 2022-12-02 16:34:33 · 1130 阅读 · 0 评论 -
get方式文件流下载
vue get方式文件流下载原创 2022-11-29 14:11:18 · 565 阅读 · 0 评论 -
vue实现可拖拽div
vue实现可拖拽div。原创 2022-09-09 16:30:17 · 694 阅读 · 0 评论 -
腾讯地图初始化以及解析和逆解析
腾讯地图初始化以及解析和逆解析原创 2022-08-28 15:17:48 · 3463 阅读 · 0 评论 -
创建vue3的项目
利用vite 和 vue-cli 创建vue3的项目原创 2022-08-19 14:56:56 · 242 阅读 · 0 评论 -
vue中企业微信 第三方应用扫码登录(pc端)
企业微信 第三方应用扫码登录参考文档:接入指引 - 接口文档 - 企业微信开发者中心首先在login页面,写一个按钮,触发点击事件,引导用户进入登录授权页:<button @click="toWxLogin">企业微信扫码登录</button>toWxLogin(){ //授权登录之后目的跳转网址,需要做urlencode处理。所在域名需要与授权完成回调域名一致 let url = 'http://....' //服务商的Cor原创 2022-05-20 18:39:47 · 2495 阅读 · 0 评论 -
uniapp中uView的安装配置
安装npm install uview-ui配置1. 引入uView主JS库在项目根目录中的main.js中,引入并使用uView的JS库,注意这两行要放在import Vue之后。// main.jsimport uView from "uview-ui";Vue.use(uView);2. 在引入uView的全局SCSS主题文件在项目根目录的uni.scss中引入此文件。/* uni.scss */@import 'uview-ui/theme.scss';原创 2022-05-17 18:36:27 · 994 阅读 · 0 评论 -
Vue packages version mismatch: vue@2.6.10 vue-template-compiler@2.6.14 的解决办法
报错如下:解决方案:安装同一版本的 vue和vue-template-compilernpm i vue-template-compiler@2.6.10原创 2022-02-21 17:42:48 · 2120 阅读 · 0 评论 -
vue添加实例 property与import
添加实例 property你可能会在很多组件里用到数据/实用工具,但是不想污染全局作用域。这种情况下,你可以通过在原型上定义它们使其在每个 Vue 的实例中可用。Vue.prototype.$appName = 'My App'这样$appName就在所有的 Vue 实例中可用了,甚至在实例被创建之前就可以。如果我们运行:new Vue({ beforeCreate: function () { console.log(this.$appName) }})则控制..原创 2022-01-12 16:18:00 · 402 阅读 · 0 评论 -
vue写一个toast弹窗公共组件思路 vue.extend
src/components/toast/index.vue<template> <div v-if="showWrap">{{text}}</div></template><!--前端样式忽略-->src/components/toast/index.jsimport vue from 'vue'//静态组件import toastComponent from './index.vue'// 返回一个扩展实力构造原创 2021-11-17 10:18:36 · 785 阅读 · 0 评论 -
vue项目首次打开加载速度慢的优化方案
一、路由懒加载(必须的)️vue-cli 3.0 模式就使用了Babel,我们需要添加syntax-dynamic-import插件,才能使 Babel 可以正确地解析语法。// 安装插件 syntax-dynamic-importcnpm install --save-dev @babel/plugin-syntax-dynamic-import// 修改babel.config.jsmodule.exports = { "presets": [ "@vue/app" ..原创 2020-06-18 14:57:45 · 15242 阅读 · 0 评论 -
vue-cli3打包后生成的chunk-vendors文件过大,导致加载太慢,利用SplitChunks插件解决,分离chunk
直接使用插件解决这个问题!第一步:先下载这个插件第二步:修改vue.config.js配置文件const CompressionPlugin = require("compression-webpack-plugin")............plugins: [new CompressionPlugin({algorithm: 'gzip',test: /\.(js|css|less)$/, // 匹配文件名th...原创 2021-06-16 15:15:22 · 7099 阅读 · 1 评论 -
vue3.0初体验
1.main.js,createApp方法import { createApp } from 'vue';import App from './App.vue';import router from './router';import store from './store';import './App.scss'const app = createApp(App)app.use(router).use(store).mount('#app');2.Composition ..原创 2020-12-23 20:14:48 · 335 阅读 · 0 评论 -
vue单页应用首屏加载速度慢如何解决
首屏时间(First Contentful Paint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间.一、加载慢的原因在页面渲染的过程,导致加载速度慢的因素可能如下: 网络延时问题 资源文件体积是否过大 资源是否重复发送请求去加载了 加载脚本的时候,渲染内容堵塞了 二、解决方案常见的几种SPA首屏优化方式:减小入口文件积、UI框架按需加载、图片资源的压缩、组件重复打包、开启GZip压缩1.减小入口文件体积常用的手段是路由懒加载,把原创 2020-12-22 17:38:20 · 2300 阅读 · 0 评论 -
echarts地图下钻打点案例
<div id="china3" :style="{height:'700px',width:'100%',background:'#0b0518'}"></div>import echarts from 'echarts'import '../../../static/js/china.js' // 引入中国地图数据import {provinceJson,cityArr} from './mapjson.js'//相关省市jsonexport default {...原创 2020-12-17 19:49:28 · 1075 阅读 · 0 评论 -
echarts遇上百度地图打点案例(vue)
效果图:1.html文件引入百度api,ak是自己申请的密钥 <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=xxxxxxxxxxxxxxxxxxxxx"></script>2.vue代码: <div id="mapEchars" style="width: 100%;height:440px;background:#0b0519;">&l..原创 2020-12-17 19:14:57 · 1254 阅读 · 1 评论 -
vue中浏览器全屏和退出全屏
1.首先要判断浏览器类型(是否IE),来控制是否展示功能,在计算属性中判断:computed: { showFullScreenBtn () { return window.navigator.userAgent.indexOf('MSIE') < 0; }},2.vue代码:<i v-if="showFullScreenBtn" :class="isFullScreen?'el-icon-crop':'el-icon-full-screen'" cla.原创 2020-12-17 17:58:24 · 1066 阅读 · 0 评论 -
上传图片尺寸大小限制(iviewUI组件库为例)
上传图片尺寸大小限制,UI组件库为例iview中<Upload ref="upload" :max-size="10240" :on-exceeded-size="handleMaxSize" :before-upload="handleBeforeUpload" :on-success="successUpload" :on-error="failureUpload" :show-uplo原创 2020-08-14 11:34:30 · 1295 阅读 · 0 评论 -
Nginx解决VUE的history模式下刷新404
原配置: location / { root /root/jxiaoshuai-blog-demo/; index index.html index.htm; }使用try_files解决:location / { root /root/jxiaoshuai-blog-demo/; index index.html index.htm; try_files $uri $uri/ /index.html;}...原创 2020-06-29 18:28:49 · 415 阅读 · 0 评论 -
Jenkins的安装、部署、启动(vue项目)
环境:Linux :centos上安装jenkins及配置1.首先要安装jdk,此处略2.安装Jenkins//1.导入镜像:wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo//2.导入公钥rpm --import https://jenkins-ci.org/redhat/jenkins-ci.org.key //3.安装yum install jenkins.原创 2020-06-23 19:28:37 · 2997 阅读 · 0 评论 -
vue项目版本更新后文件存在缓存问题解决方案(vue-cli2.0/vue-cli3.0)
vue-cli2.01.配置webpack.prod.conf.js 配置output加t=[chunkhash:8]相当于加时间戳,用于清缓存output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].js?t=[chunkhash:8]'), chunkFilename: utils.assetsPath('js/[id].[chunkhas..原创 2020-06-18 16:58:35 · 5814 阅读 · 1 评论 -
vue(scoped)修改UI库组件样式
vue修改第三方UI库组件样式在工作中经常会碰见设计稿和UI库的组件样式不一样,在style标签加了scoped,就无法修改UI组件的样式了,因为当前组件样式只应用到这个组件上。深度作用选择器如果你想修改组件的样式就可以使用 >>> 操作符:<style scoped>.a >>> .b { /* ... */ }</styl...原创 2020-04-16 14:33:28 · 705 阅读 · 1 评论 -
vue页面title问题(微信公众号)
一般来说vue单页面应用的title在index.html中设置,但是一旦设置就是唯一了,对此有了以下需求:需要实现不同的页面对应不同的title。我们可以用router.beforeEach 来实现router.js{ path: '/personal', component: () => import('../view/home.vue'), ...原创 2020-04-14 14:43:21 · 1599 阅读 · 0 评论 -
如何优雅的使用VUE? 如何让自己与刚学vue的人拉开差距呢?
本文会从以下三个方面,来进阶我们对vue的运用能力组件 : 全局组件注册 Render函数 : 拯救繁乱的template Vue权限控制 : 高精度全局权限控制1 -「全局组件注册」组件是我们非常常用的东西,很多人使用组件都是通过一个一个文件去引用和注册。如果一个组件在整个项目里面的使用次数较多,每一次使用都需要引用并注册,就会显得特别麻烦一般组件应用弊端 傻瓜式,...转载 2020-02-16 15:25:42 · 335 阅读 · 1 评论 -
vue指令解决ios微信打开网页键盘弹起后页面上滑,导致弹框里的按钮响应区域错位
import Vue from 'vue';Vue.directive('blur', { 'bind'(el) { el.addEventListener("click", function(){ window.scrollTo(0,0); }) }}); //在点击页面提交按钮的时候,把滚动条滚到底部就OK了...原创 2020-01-13 17:56:56 · 755 阅读 · 0 评论 -
vue_cli3 打包时取消.map
解决方案在vue.config.js中module.export = {}中加入一行productionSourceMap: false,这样虽然对带宽很友好,但是调试起来就不是那么轻松了。我们在代码出错的时候,肯定最希望能定位其在源码中的位置。所以个人感觉还是有必要保留的。...原创 2019-12-08 17:51:18 · 3186 阅读 · 2 评论 -
vue-cli3 取消eslint 校验代码
修改package.json文件,把“@vue/prettier” 删掉即可"eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "@vue/prettier" ], "ru...原创 2019-12-08 17:43:15 · 443 阅读 · 0 评论 -
vue安装 搭建 以及在项目中安装elementui
vue安装步骤在安装vue之前,先确保node和npm是否安装。如果安装ok,那么接下来安装vue1.npm install vue (安装vue)2.npm install --global vue-cli (安装vue-cli)因为npm是国外的,使用起来比较慢,使安装vue会出现报错,那么你可以试着 安装 淘宝镜像:1.npm install -g cnpm --registry...原创 2018-06-03 18:56:27 · 20309 阅读 · 0 评论 -
Vue.set()动态的新增与修改数据,触发视图更新
参数:target:要更改的数据源(可以是对象或者数组)key:要更改的具体数据(可以是字符串和数字)value :重新赋的值用法:向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。例:data:{ namelist:[ {message:"叶落森",id:"1"}, {message:"姜艳霞",id:"2"}, ...原创 2018-06-11 11:45:23 · 15843 阅读 · 0 评论