vue3
文章平均质量分 54
vue3
HHH 917
这个作者很懒,什么都没留下…
展开
-
h5 判断是否进入 可视区域内 (自动播放 video )
需要注意的是,IntersectionObserver polyfill 会增加一些额外的开销,因此在支持 IntersectionObserver 的浏览器中,最好还是使用原生的 IntersectionObserver。可以使用 Intersection Observer API 监听视频元素是否进入可视区域,如果进入可视区域则自动播放视频,同时设置视频静音。上述代码中,我们创建了一个 Intersection Observer 对象,用于监听视频元素是否进入可视区域。属性来设置视频元素的填充方式。原创 2023-05-08 12:10:06 · 1382 阅读 · 0 评论 -
vue3 图片放大缩小、拖拽功能(自定义指令)
const oDiv = el // 当前元素 const minTop = oDiv . getAttribute("drag-min-top") const ifMoveSizeArea = 20 oDiv . onmousedown =(e) => {原创 2022-12-28 15:25:46 · 4625 阅读 · 0 评论 -
vue3 + vite Cannot access ‘xxx‘ before initialization 组件热更新失败,es模块循环引用问题
pinia 下 modelCache.ts 文件使用了router 并Model组件中 引入了modelCache.ts 该文件 这样导致es模块循环 vite热更新失败。本人 在 pinia stores 文件中使用了 router ,而main.ts 已经引入过router。pinia 下 modelCache.ts 文件 router 引入方式改为 函数引入。因为 useRouter() 要在setup下使用。pinia 下 modelCache.ts 文件。原创 2022-12-26 11:58:03 · 16101 阅读 · 0 评论 -
vue3+vite +element-plus+tailwindcss兼容低版本浏览器(uc)
tailwindcss v2的 jit模式 和 任意值 arbitrary value 语法 已经足够好了。uc浏览器 对于 tailwindcss boxShadow 不支持 主要还是rgb原因。npm build 打包后 低版本浏览器才能打开 开发模式下低版本浏览器还是一片空白。uc浏览器 rgb支持不全 如rbg(0 0 0 /30%) 这种写法不支持。使用 tailwindcss @2.2.16 版本 v3低版本不支持。tailwindcss v3 部分样式在低版本下也不支持。原创 2022-12-23 17:11:33 · 5104 阅读 · 0 评论 -
vue 2.9.6 无法升级到vue3版本问题
所以我怀疑是yarn的问题使得npminstall-g@vue/cli安装的全局vuecli脚手架命令指向的文件不是npm内的node_modules而是yarn里面的node_modules。卸载了yarnnode_modules路径下的@vue及yarn下面的vuevue.list等关于vue的文件。yarnnode_modules依赖下重新生成了@vuevuecli依赖包但是运行vue-V仍然是2.9.6。...原创 2022-07-26 18:23:11 · 971 阅读 · 0 评论 -
vite 本地运行首次进入页面加载慢问题
webpack切换到vite,如果单看命令行中的运行,运行完毕不到一秒,不过首次打开页面则需要等10秒到20秒左右的处理时间请求数量达到了132个(浏览器对于这种并发请求会产生阻塞的),这里的文件最大了也是tailwindcss,并且打开按需加载的页面路由时,还需要经过tailwindcss编译css,打开未打开过的页面还需等几秒时间,这个体验非常差。添加依赖项首次打开页面时,当’‘include’'中的数组不包含该依赖项时命令行会提示出来添加进去即可。我们都可以知道可以添加到依赖项。...原创 2022-07-25 16:39:33 · 14944 阅读 · 4 评论 -
webpack 迁移至 vite 注意事项 基于vue3+ts(持续汇总)
require是node.js提供的模块 Webpack使用了node 使得编辑vue时可以使用require但是vite不支持而且图片在标签src中的路径不可以使用@ 别名获取绝对路径css style中也不可以使用别名 ~@ 获取图片 文字等静态资源替代方式 vite 静态资源处理可以封装一个函数进行调用 根据不同的静态路径设置不同的函数pub-use.ts使用 pub-use.ts2. 组件不传参时 props不可以设置为空 否则打包错误错误示例 vite打包报错 Type ‘{原创 2022-07-14 11:50:43 · 1659 阅读 · 1 评论 -
vue 使用 prerender-spa-plugin 预处理 seo优化 导致 history模式 页面刷新 文件加载404 问题
nginx已经加了没有使用prerender-spa-plugin插件之前history正常,增加插件后刷新文件加载异常main.js404问题原因及解决由于前端vue.config 配置的 publicPath 路径 使用了 './'相对路径(当时为了方便前端测试)正确方式publicPath 更改为’/'绝对路径...原创 2022-07-08 11:38:45 · 855 阅读 · 0 评论 -
vue3 toRef 及toRefs 响应式失效( 自上而下 响应式失效 自下而上 可以响应式问题)(待解决)
toRef 及 toRefs 响应式失效问题原创 2022-06-06 12:30:11 · 2089 阅读 · 0 评论 -
vue3 关于数据已变化,视图渲染未变化问题(犯了低级错误) 总结
vue3 数据未被渲染 语法问题 总结原创 2022-06-06 11:22:30 · 7105 阅读 · 1 评论 -
vue3.0 通过ref 动态绑定与获取 dom;
描述由于 vue3.0 不可以直接 this.$refs 获取绑定的ref dom元素vue3.0 只能通过如下 方式 绑定dom//html<div :ref="refDiv"></div>//setup 中const refDiv = ref();return{refDiv}但是这样绑定的dom 不是动态的 变量是写死的如果遍历绑定多个dom 这种方法行不通然后我就研究了如下方法通过 动态绑定 attribute属性及ref绑定函数 实现动态ref原创 2022-04-27 15:23:27 · 10139 阅读 · 0 评论 -
vue3 在setup 外部调用 useStore() 为 undefined 解决
效果如下例子 useStore()= undefined 但是 useStore( )是为了获取 store 可以直接引入store代替useStoreimport { useStore } from 'vuex'import _store from '@/store' // 拿到store独享 const store = useStore() || _store console.log('store 1', useStore) console.log('store 2', us原创 2022-04-26 11:37:12 · 11992 阅读 · 7 评论 -
vue3+ts 使用 vuex辅助函数(mapState,mapMutations,mapGetters,mapActions) 对函数进行二次封装
本文辅助函数封装是参考 深入Vue3+TypeScript技术栈-coderwhy大神新课 视频学习改的vue2中的使用方式...mapState(["abc", "name"])...mapState({ name: state => state.name, }) ...mapGetters(["allName"]) ...mapGetters({ allAge: "main/allAge", }) ...mapMu原创 2022-03-09 16:56:08 · 6768 阅读 · 2 评论 -
vue3 +ts 动态绑定 响应式 数组
代码//定义ts 接口类型interface editFormDataType { label: string | number | boolean value: string | number | boolean prop: string}//需要绑定变量editFormData方法一: ref //定义变量 const editFormData = ref([] as editFormDataType[]) // 使用 editFormData.value =原创 2022-03-04 17:50:36 · 10864 阅读 · 0 评论 -
element-plus 自动导入 使用 v-loading 无法找到样式 element-plus/es/components/loading-directive/style/css 问题解决
查找解决方法及当前使用版本当前版本"element-plus": "^2.0.2","unplugin-auto-import": "^0.6.1","unplugin-vue-components": "^0.17.20"查找解决方法先去GitHub 查 element-plus/issues/4855发现里面的解决方式还不是很好,结合vs-code 查看 ElementPlusResolver 函数的源码声明 发现有exclude 属性解决方法使用正则表达式 排除load原创 2022-02-24 10:24:34 · 5168 阅读 · 0 评论 -
vue 3深拷贝 route 报错 Avoid app logic that relies on enumerating keys on a component instance. The keys
报错方式 const route = useRoute() let { query: routeQuery } = JSON.parse(JSON.stringify(route)) // runtime-core.esm-bundler.js:198 [Vue warn]: Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in productio原创 2022-02-23 15:41:53 · 9724 阅读 · 0 评论 -
element-plus 按需引入的两种方式( 官方推荐方式 及babel-plugin-import)
1.官方推荐方式首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件npm install -D unplugin-vue-components unplugin-auto-importWebpack安装方式一:写入 webpack.config.jsconst AutoImport = require('unplugin-auto-import/webpack')const Components = require('unpl原创 2022-01-25 18:26:46 · 3769 阅读 · 3 评论 -
uniapp +vue3+ts+tailwindcss 开发搭建兼容小程序版本
1、创建uniapp cli版本uniapp官网 环境安装命令行使用以下命令//使用正式版(对应HBuilderX最新正式版)vue create -p dcloudio/uni-preset-vue my-project//使用alpha版(对应HBuilderX最新alpha版)vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project选择默认模板 typescript 安装到这一步 完成 uniapp+vue3+原创 2021-11-09 18:12:45 · 7599 阅读 · 1 评论 -
vue3手写 isRef、isReactive、isReadonly、isProxy的判断
vue3的响应式操作劫持vue3响应式劫持操作主要用到了es6中的Proxy代理 与Reflect执行原有操作行为;劫持操作 判断是否使用作为判断的指定属性名 //如 if (prop === '_is_readonly') return true;前提定义// 定义 readonlyHandler 处理函数const readonlyHandler = { get(target, prop) { if (prop === '_is_readonly') return原创 2021-02-23 14:09:43 · 1071 阅读 · 1 评论 -
vue3手写 shallowRef与ref的劫持操作
vue3的响应式操作劫持vue3响应式劫持操作主要用到了es6中的Proxy代理 与Reflect执行原有操作行为;因为当参数为数组或者对象时 ref相当于reactive;所以要定义reactive;定义reactiveHandler处理对象 进行数据拦截// 定义一个reactiveHandler处理对象 const reactiveHandler = { // 获取属性值 get(target,prop){ const result = Reflect.g原创 2021-02-23 11:40:34 · 1087 阅读 · 1 评论 -
vue3手写 shallowReadonly与readonly的劫持操作
vue3的响应式操作劫持vue3响应式劫持操作主要用到了es6中的Proxy代理 与Reflect执行原有操作行为;定义readonlyHandler处理对象 进行数据拦截// 定义 readonlyHandler 处理函数const readonlyHandler = { get(target, prop) { const result = Reflect.get(target, prop); console.log('拦截到了读取数据', prop, re原创 2021-02-22 17:46:04 · 238 阅读 · 0 评论 -
vue3手写 shallowReactive与reactive的劫持操作
vue3的响应式操作劫持vue3响应式劫持操作主要用到了es6中的Proxy代理 与Reflect执行原有操作行为;定义reactiveHandler处理对象 进行数据拦截// 定义一个reactiveHandler处理对象 const reactiveHandler = { // 获取属性值 get(target,prop){ const result = Reflect.get(target,prop); console.log('拦截了读取数原创 2021-02-22 17:01:15 · 263 阅读 · 0 评论 -
vue2与vue3中生命周期执行顺序的区别
生命周期比较vue2 中 执行顺序 beforeCreate=>created=>beforeMount =>mounted=>beforeUpdate =>updated=>beforeDestroy=>destroyedvue3 中 执行顺序 setup=>onBeforeMount=>onMounted=>onBeforeUpdate=>onUpdated=>onBeforeUnmount=>onUnmounted对原创 2021-01-13 10:57:51 · 3502 阅读 · 0 评论 -
关于 vue3 不使用根标签报错提示 [vue/no-multiple-template-root] The template root requires exactly one element
报错提示第一步查看是否安装了Vetur插件第二步文件=>首选项=>设置进入设置页搜索 eslint 把Vetur的验证模板,取消勾选Validate vue-html in using eslint-plugin-vue报错提示就没有了原创 2021-01-12 11:51:53 · 20355 阅读 · 11 评论 -
vscode 设置自定义vue代码片段快捷方式
第一步打开vs-code => 文件 => 首选项 => 用户片段第二步搜索 vue.json进入vue.json根据例子配置代码片段{ // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the s原创 2021-01-12 11:31:27 · 917 阅读 · 0 评论