![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue3
文章平均质量分 64
小小亮01
这个作者很懒,什么都没留下…
展开
-
vue3封装一个指令实现权限按钮
vue3封装一个指令实现权限按钮原创 2023-06-08 21:12:13 · 592 阅读 · 0 评论 -
vue3 实现截图当前dom节点为图片与下载为pdf文件
【代码】vue2封装一个方法判断是否含有()或者(),若是仅有一个(),则提取()中的内容。原创 2023-06-02 16:29:11 · 360 阅读 · 0 评论 -
vue3 + ts用ts定义data数据的方法与 使用axios拿到后台数据 与前端分页
vue3 + ts用ts定义data数据的方法与 使用axios拿到后台数据 与前端分页原创 2023-02-25 11:11:08 · 3986 阅读 · 0 评论 -
前端sdk - 埋点
前端sdk - 埋点原创 2023-02-02 10:45:52 · 1658 阅读 · 0 评论 -
解决vuex 数据丢失问题
解决vuex 数据丢失问题原创 2023-01-31 20:53:15 · 1246 阅读 · 0 评论 -
vue3 项目篇商场 之 初始化项目
vue3之 非vite创建项目 rem 适配、字体图标iconfont、sass、vant3、底部组件封装原创 2023-01-16 11:01:22 · 862 阅读 · 0 评论 -
vue3之Suspense 加载异步数据( 渲染组件)
vue3之Suspense 加载异步数据( 渲染组件)原创 2022-11-13 20:36:17 · 168 阅读 · 0 评论 -
vue3.2 之 driver引导页的使用
vue3.2 之 driver引导页的使用原创 2022-10-20 11:52:20 · 431 阅读 · 0 评论 -
vite3.2 使用 svg组件
svg原创 2022-10-19 16:20:36 · 910 阅读 · 0 评论 -
vue3.2 之 i18n的使用
vue3.2 之 i18n的使用原创 2022-10-19 11:22:39 · 565 阅读 · 0 评论 -
vue3.2 之 vite的相关配置
vite一些普通的配置原创 2022-10-18 14:27:13 · 2543 阅读 · 0 评论 -
vue3.2之 Tailwind CSS
vue3.2之 Tailwind CSS原创 2022-10-14 10:27:46 · 2312 阅读 · 1 评论 -
vue3.2 之使用 css原子化
unocss 简单使用原创 2022-10-09 19:29:07 · 1151 阅读 · 0 评论 -
vue3.2之vite配置别名路径
别名原创 2022-06-22 14:23:14 · 1662 阅读 · 0 评论 -
vue3.2 vite项目使用 eslint + prettierrc规范
1原创 2022-06-22 10:39:24 · 350 阅读 · 0 评论 -
vue3.2 之使用 pinia
vue3.2使用pinia原创 2022-06-14 14:12:13 · 1887 阅读 · 4 评论 -
vue3.0之动态路由的添加
目录vue3.0之动态路由的添加router / index.tsLogin.vue不同账号请求的数据不同在admin2 登录的账号之中测试,点击 组件2,然后跳转的时候,去到空页面,点击组件1,跳转到 demo1页面之中,实现了动态路由了App.vuevue3.0之动态路由的添加使用路由的 router.addRoute 方法 去添加路由import { useRouter } from 'vue-router'const router = useRouter() router.ad原创 2022-03-29 22:54:55 · 2162 阅读 · 0 评论 -
vue3.0路由 元信息(标题、路由特效)
目录vue3.0路由 元信息给每一个路由添加 titlerouter / index.ts使用效果路由特效router / index.tsApp.vue效果vue3.0路由 元信息给每一个路由添加 titlerouter / index.tsimport { createRouter, createWebHistory } from 'vue-router'import Home from '../views/home/Home.vue'// 定义路由 元信息的 类型declare modu原创 2022-03-27 10:36:56 · 1875 阅读 · 0 评论 -
vue3.0路由之后置守卫与权限控制 (路由切换,顶部实现类似进度条特效)
目录vue3.0路由之后置守卫进度条组件 loadingBar / LoadingBar.vuemain.tsLogin.vue效果权限抽离 permissionApp.vuerouter / index.tspermission.tsmain.tsLogin.vueloadingBar / LoadingBar.vue效果vue3.0路由之后置守卫需求:路由切换,顶部实现类似进度条特效进度条组件 loadingBar / LoadingBar.vue<!--描述: 作者:xz原创 2022-03-27 09:49:58 · 1317 阅读 · 0 评论 -
vue3.0之路由导航守卫
目录vue3.0之路由导航守卫前置路由 (类似一个中间件,处理权限可用到)路由 以及 路由做权限App.vueLogin效果未登录的已登录的vue3.0之路由导航守卫前置路由 (类似一个中间件,处理权限可用到)需求:测试一个登录界面权限,登录后,才能进入首页,有白名单的路由,也可以进入页面下载:yarn add element-plus -S路由 以及 路由做权限import { createRouter, createWebHistory } from 'vue-router'i原创 2022-03-27 08:56:48 · 637 阅读 · 0 评论 -
vue3.0之Router的使用
目录vue3.0之Router的使用命名式 路由命名式 路由使用 RouterLink编程式导航router / index.tsApp.vue 跳转到路由router.push('/login') 跳转字符串router.push({ path: url }) 对象的形式命名式路由模式 router.push({ name: name })历史记录RouterLink 跳转路由编程式导航非历史 记录的导航 还可以使用 方法路由传参query 方式传参(拼接在url上)商品页List.json详情页效果原创 2022-03-26 20:51:17 · 6395 阅读 · 0 评论 -
vue之中 把json数据转化为ts限制的类型
目录vue之中 把json转化为tstest.json效果vue之中 把json转化为tsvscode安装 插件 json2ts使用 ctrl + alt + v 去形成 ts的类型模式test.json{ "diseaseh5Shelf": { "lastUpdateTime": "2022-03-24 20:40:02", "chinaTotal": { "confirm": 443723, "importedCase": 17096,原创 2022-03-24 22:13:43 · 1488 阅读 · 0 评论 -
vue3.0之 起一个后端接口服务
目录vue3.0之 ts-node的使用vue3.0之 ts-node的使用下载:yarn add ts-node -g作用:使用ts-node直接运行 ts项目初始化package.jsonnpm init -yyarn add @types/node -D原创 2022-03-21 21:16:43 · 1023 阅读 · 0 评论 -
vue3.0之pinia状态管理工具(api与数据持久化)
目录vue3.0之pinia状态管理工具(api与数据持久化)vue3.0之pinia状态管理工具 Api重置 pinia 的state数据store / index.tsstore / store-namespce.tsapp.vue监听 pinia 之中的 state的改变XXX.$onAction 监听actions的变化时vue3.0之pinia状态管理工具 数据持久化store / index.tsstore-namespce.tsmain.tsapp.vuevue3.0之pinia状态管理工具原创 2022-03-20 21:19:05 · 2450 阅读 · 0 评论 -
vue3.0 ele-plus 与 antd-design的使用
目录vue3.0 ele-plus 与 antd-design的使用vue3.0 ele-plus按需引入使用组件vue3.0 antd-design的使用按需引入使用vue3.0 ele-plus 与 antd-design的使用vue3.0 ele-plus下载:yarn add element-plus官网:ele-plus官网按需引入下载:·yarn add -D unplugin-vue-components unplugin-auto-import`yar原创 2022-03-20 09:01:28 · 1809 阅读 · 0 评论 -
vue3.0自定义插件
目录vue3.0自定义插件自定义一个 Loading插件components / loading / Loading.vueconponents / loading / index.tsmian.tsLoading插件 组件A.vue之中使用vue3.0自定义插件自定义一个 Loading插件components / loading / Loading.vue定义一个Loading组件defineExpose :组件暴露自己的属性组件暴露出来的属性,拿到这些暴露的属性数据一般来说使用 r原创 2022-03-19 21:25:15 · 859 阅读 · 0 评论 -
vue3.0 挂载全局变量 和全局函数
目录vue3.0 挂载全局变量 和全局函数vue3.0 挂载全局变量main.ts组件之中访问 全局变量vue3.0 挂载一个 简易显示过滤器main.ts使用vue3.0 挂载全局变量 和全局函数vue3.0 挂载全局变量main.tsimport { createApp } from 'vue'import App from './App.vue'// 引入重置样式import "./assets/css/reset.css"// 引入全局组件import Card from './原创 2022-03-18 21:26:58 · 1092 阅读 · 0 评论 -
vue3.0之自定义 hooks
目录vue3.0之自定义 hooksvueuse 封装了很多公共的 hook函数自定义hook 之 img转化为 base64hook / tobase64.ts使用vue3.0之自定义 hooks什么是 hooks本质而言,hook就是一个函数,只不过hook是把 setup组合函数之中的 组件api(ref、reactive、conputed、watch、生命周期函数)等进行了封装抽离代码(公共代码,公共组件等),这样使得代码更加简洁hook 类似于 vue2之中的 mixinvue原创 2022-03-18 20:31:07 · 1838 阅读 · 0 评论 -
vue3.0自定义指令(并且实现一个 拖拽指令)
目录vue3.0自定义指令自定义指令之中的生命周期main.vueA.vue自定义指令的 函数简写(重要)实现一个input输入框,动态显示盒子的 字体颜色Main.vueA.vue自定义指令 实现一个简单的 拖拽指令Main.vueA.vue一个完整的拖拽指令拖拽指令 drag.tsmain.ts 引入挂载全局使用拖拽指令Main.vueA.vuevue3.0自定义指令作用:对普通 DOM 元素进行底层操作,这时候就会用到自定义指令定义指令vMove: Directive = {} || (原创 2022-03-17 22:07:54 · 701 阅读 · 0 评论 -
vue3.0深入v-model以及使用多个v-model
目录vue3.0深入v-model以及使用多个v-modelv-model原理v-mode的实现 父子组件的通信父组件 Main.vue子组件 Dialog.vuev-model 使用多个main.vuedialog.vuev-model 自定义修饰符给v-model自定义修饰符main.vuedialog.vuevue3.0深入v-model以及使用多个v-modelv-model原理原理:其实是一个语法糖 通过props 和 emit组合而成的语法糖默认值的改变prop:value -&g原创 2022-03-16 21:01:35 · 5021 阅读 · 2 评论 -
vue3.0之自动引入插件(unplugin-auto-import)
目录vue3.0之自动引入插件实际作用(就是自动的帮我们 导入了vue的相关 组合api)vue3.0之自动引入插件下载:yarn add unplugin-auto-import -D需要先 yarn dev起服务引入: vite.config.ts 文件之中引入注意点:需要手输入 dts等import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import vueJsx from '@原创 2022-03-15 22:12:48 · 3188 阅读 · 0 评论 -
vue3.0之写tsx语法
目录vue3.0之写tsx测试tsx 新建一个App.tsx页面tsx使用v-model指令 (App.tsx组件)使用v-show、与三目运算符tsx之数组的遍历(map)自定义属性 data-indextsx绑定事件tsx之 props父组件向子组件传递参数App.vue 父App.tsx 子tsx之子组件 向父组件 传递数据子组件 App.tsxApp.vue 父vue3.0之写tsx00:下载yarn add @vitejs/plugin-vue-jsx -D01:引入vite.原创 2022-03-15 21:46:36 · 8765 阅读 · 5 评论 -
vue3.0之Bus总线的实现
目录vue3.0之Bus总线的实现Bus.tsmain.vue 根组件B.vueC.vuevue3.0之Bus总线的实现Bus.ts项目根目录下创建 Bus.ts文件type BusClass<T> = { emit:(name:T) => void on:(name:T,callback:Function) => void}type BusParams = string | number | symboltype List = { [key:BusPa原创 2022-03-13 20:15:45 · 1826 阅读 · 0 评论 -
vue之组件传值 爷到孙 provide && inject
目录vue之组件传值 爷到孙 provide && inject使用 provide提供依赖,单个数据,数组形式接受根组件Main.vue子组件 B.vueBSon.vue使用 provide提供依赖,多个数据,对象形式根组件 Main.vueB.vueBSon.vuevue之组件传值 爷到孙 provide && inject示例:就是当前根组件,可以向子组件传递数据,也可以向孙组件传递数据,这就是provide提供依赖数据的方式,其中接受数据为 inject的方式去原创 2022-03-13 19:52:33 · 2186 阅读 · 1 评论 -
vue3之transition动画组件
目录vue3之transition动画组件一个简单的过度效果 淡入淡出自定义过度 动画的类名animate动画库vue3之transition动画组件 <transition name="fade"> <div v-if="flag2" class="box">我是动画啊</div> </transition>动画组件就是使用 transition 组件,然后使用 name的定义 传递进入组件动画的类名等样式触发机制原创 2022-03-12 19:53:01 · 4477 阅读 · 2 评论 -
vue3之lodash第三方库的使用
目录vue3之lodash第三方库的使用对数据的加减乘除vue3之lodash第三方库的使用官网:lodash官网作用:就是封装了一些常规的方法数字的浮点数进度问题等下载yarn add lodash -Syarn add @type/lodash -D使用import lodash from 'lodash'对数据的加减乘除<template></template><script setup lang="ts">imp原创 2022-03-12 11:12:06 · 4288 阅读 · 1 评论 -
vue3之keep-alive缓存
目录vue3之keep-alive缓存keep-alive 生命函数keep-alive 两个属性(include | exclude)includeexcludeLogin.vueRegister.vuevue3之keep-alive缓存作用:主要用于保留组件状态或避免重新渲染实际项目中:01:对有网络请求的页面进行缓存,则重新回到该页面时,不会再请求数据,在一定程度上能减少网络请求,优化性能;02:但在另一方面,如果返回上一页面时,需要刷新状态,此时就不太适用了keep-al原创 2022-03-09 14:32:42 · 2812 阅读 · 1 评论 -
vue3之传送组件( 可以 定义的组件 插入再body等)
目录vue3之传送组件( 可以 定义的组件 插入再body等)vue3之传送组件( 可以 定义的组件 插入再body等)Teleport 是一种能够将我们的模板渲染至指定DOM节点,不受父级style、v-show等属性影响,但data、prop数据依旧能够共用的技术;类似于 React 的 Portal。主要解决的问题 因为Teleport节点挂载在其他指定的DOM节点下,完全不受父级style样式影响通过to 属性 插入指定元素位置 to=“body” 便可以将Teleport 内容原创 2022-03-09 09:59:41 · 2575 阅读 · 0 评论 -
vue3之异步组件与代码分包
目录vue3之异步组件与代码分包模拟请求public / data.jsonserve.ts组件 B.vue使用 异步 组件 B.vuevue3之异步组件与代码分包使用yarn build | npm run build之后会产生一个dist的包正常的三个文件 介绍若是再页面都是使用同步组件的形式,那么再index.js 这个主包 里 打包的文件也就也来越多,这样导致页面加载速度的缓慢,因此可以把组件拆分为异步组件,代码拆分打包,有利于页面的加载模拟请求public / data.j原创 2022-03-09 09:08:57 · 808 阅读 · 0 评论 -
vue3之 插槽
目录vue3之 插槽默认插槽具名插槽作用域插槽动态数据 写入插槽vue3之 插槽注意点:就是 v-slot:XX 可简写为 #XX若是v-slot 后面不带插槽名称 什么的 简写为 #default默认插槽B.vue 子组件<template> <div> <div class="header"> <slot></slot> </div> </div><原创 2022-03-08 20:44:13 · 4704 阅读 · 2 评论