vite、vue3
文章平均质量分 56
你吃香蕉吗?
踏上山巅的每一步都有可能跌落,重要的是可以告诉自己继续走下去,并且是这样做的,那么,你终会看到满天繁星,日出东方。
展开
-
为摸鱼助力:一份Vue3的生成式ElementPlus表单组件
Vue3的生成式ElementPlus表单组件基于elementPlus的低代码表单组件原创 2023-06-20 22:15:00 · 3646 阅读 · 3 评论 -
Vue3+TS+ElementPlus报错集锦
不能将命名空间“FormInstance”用作类型。不能将命名空间“FormRules”用作类型。模块 ""element-plus"" 没有导出的成员 "FormInstance"。你是想改用 "import FormInstance from "element-plus"" 吗?Vue3引入文件爆红且不提示不能将类型“.......”分配给类型“ComponentProps类型“undefined”不能作为索引类型使用模块的默认导出具有或正在使用专用名称“Props”原创 2023-05-18 17:39:18 · 6728 阅读 · 1 评论 -
Vue3:自定义指令directive
Vue3自定义指令directiveVue2自定义指令directive原创 2022-07-03 17:02:50 · 2840 阅读 · 0 评论 -
Vue3:v-model、自定义修饰符
vue3的v-model原理vue3自定义修饰符原创 2022-05-03 17:19:42 · 2721 阅读 · 0 评论 -
Vue3:探讨一下mixin
Vue3中的mixinVue2中的MixinmixinMixinComposition API原创 2022-04-27 14:59:33 · 15961 阅读 · 4 评论 -
Vue3:自动导入
自动导入封装的Ajax-API、vue3的API自动导入、element-plus组件原创 2022-04-27 11:22:16 · 3495 阅读 · 0 评论 -
Vue3:性能优化---异步组件
效果图SuspenseSuspense 是一个试验性的新特性(暂时不要用到生产环境吧~~)在正确渲染组件之前进行一些异步请求是很常见的事。组件通常会在本地处理这种逻辑,绝大多数情况下这是非常完美的做法。该<suspense>组件提供了另一个方案,允许将等待过程提升到组件树中处理,而不是在单个组件中。<suspense>组件有两个插槽。它们都只接收一个直接子节点。default插槽里的节点会尽可能展示出来。如果不能,则展示fallback插槽...原创 2022-04-20 21:58:57 · 833 阅读 · 0 评论 -
Vue3:插槽v-slot
几种插槽匿名插槽 具名插槽 作用域插槽 动态插槽v-slot的简写方式<template v-slot></template><========匿名插槽-简写==========><template #default></template><template v-slot:title></template><========具名插槽-简写==========><t原创 2022-04-18 22:26:35 · 3209 阅读 · 0 评论 -
Vue3:动态组件
使用component内置组件,通过is绑定要展示的组件多用于tab页切换的场景markRaw的作用及应用(必须使用markRaw跳过对组件的代理,否则vue会给警告)效果图Vue2回顾<template> <div> <component :is="A"></component> </div></template><script>import A from './A'..原创 2022-04-17 16:02:35 · 7057 阅读 · 2 评论 -
vue3:递归组件
vue3中可以直接使用组件文件名来递归组件,常用于页面菜单树的开发效果图父组件<template> <Tree @tree-click="treeClick" :data="data"></Tree></template><script setup lang="ts">import Tree from '@/components/treeItem.vue';import { reactive } from 'vu..原创 2022-04-16 17:25:58 · 5464 阅读 · 1 评论 -
Vue3:父子组件传参
一、父组件给子组件传参父组件通过v-bind绑定要传给子组件的数据,在子组件中通过defineProps接收传过来的值父组件:<template> <Child :data="cMasterwork" :sMasterwork="sMasterwork"></Child></template><script setup lang="ts">// 这里只需要引入即可使用组件,不需要注册import Child from '.原创 2022-04-14 15:09:16 · 7571 阅读 · 0 评论 -
vue3:Ref全家桶
ref接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property,指向该内部值。非响应式:<template> <div> <span>{{ msg }}</span> <el-button @click="handleChangeMSG">change msg</el-button> </div></template>&l原创 2022-04-13 16:21:42 · 987 阅读 · 0 评论 -
vite、vue3警告:Component inside <Transition> renders non-element root node that cannot be animated.
一、问题代码<template> <section> <router-view v-slot="{ Component }"> <transition name="fade" mode="out-in"> <component :is="Component" :key="$route.path" /> </transition> </router-view>原创 2022-04-12 21:02:57 · 1758 阅读 · 2 评论 -
Vue3和Vue2的区别
Vue3和Vue2的区别vue3和vue2生命周期对比原创 2022-02-17 22:17:51 · 18230 阅读 · 1 评论 -
vite2:全局自动导入api
1、在vite中读取某个目录下的所有文件:import.meta.globEager 或 import.meta.glob2、vue3中给挂载全局属性:config.globalProperties3、vue3中使用全局属性:getCurrentInstance4、API全局自动导入原创 2022-01-03 18:34:12 · 1864 阅读 · 3 评论 -
Vite2+TS+el3获取DOM元素设置类型并进行表单校验
1、设置el-form的表单ref属性 <el-form ref="ruleFormBox" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" .原创 2022-01-02 16:33:57 · 1141 阅读 · 0 评论 -
vite2+ts+elementplus+vuex4+vue-router4
搭建vite+vue3基础项目,整合element-plus、vuex4、vue-router4、mock数据、vite2别名配置原创 2021-12-23 10:46:18 · 771 阅读 · 0 评论 -
vite2:环境变量的使用
vite中获取环境变量的相关信息需要使用import.meta.env,在其上边存在了五个属性,分别为:BASE_URL、DEV、MODE、PROD、SSR;尝试输出:但是在项目打包后会有些许的变化,我们在上边看到的所有输出是作为import.meta.env的对象属性存在的,而在打包后,其是被直接编译为一个对象而存在的,或者直接取出其中的值,因此要留意可能会出现的问题我建了几个不同的.env文件,如图:run dev出来的都是production环境run .原创 2021-12-23 10:24:52 · 2352 阅读 · 0 评论 -
vue3中对于/deep/和::v-deep的警告信息处理
::v-deep usage as a combinator has been deprecated. Use :deep() instead.the >>> and /deep/ combinators have been deprecated. Use :deep() instead.原创 2021-12-23 10:02:17 · 6334 阅读 · 3 评论