![](https://img-blog.csdnimg.cn/direct/9b98fdab28b6436f8f77275e53b5ba1c.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue3
文章平均质量分 66
Vue3 系列教程和相关开发经验分享
朝阳39
钟爱编程,偏前端开发,欢迎私信我加入EC尽享编程俱乐部共同学习,交流成长!
展开
-
vue3【实战】语义化首页布局
* 绝对定位撑满全屏(避开的浏览器默认样式 html 和 body 存在 margin 和 pandding 的影响)*//* flex-grow: 1;时,需设置 width,其值的效果为最小宽度(否则随文字内容的增加,会挤压左右两侧)*//* 最小宽度为左右侧栏的宽度+文章的最小宽度*//* 对页面内的元素使用flex布局*//* 垂直方向使用flex布局*//* 主体内容-垂直方向撑满*//* 文章-水平方向撑满*/原创 2024-07-05 18:02:21 · 459 阅读 · 0 评论 -
vue3【实战】来回拖拽放置图片
【代码】vue3【实战】来回拖拽放置图片。原创 2024-07-05 10:59:37 · 492 阅读 · 0 评论 -
vue3【提效】使用 VueUse 高效开发(工具库 @vueuse/core + 新增的组件库 @vueuse/components)
Vueuse 是一个功能强大的 Vue.js 生态系统工具库,提供了可重用的组件和函数,帮助开发者更轻松地构建复杂的应用程序。原创 2024-07-05 09:51:30 · 1299 阅读 · 0 评论 -
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
state 属性用 ref()getters 用 computed()actions 用 function()新建文件 src/stores/counter.ts// 定义状态管理器生成函数 useCounterStore,第一个参数为状态管理器的名称// State -- 定义目标状态 count,默认值为 0// Getter -- 定义自动计算的状态,它随目标状态 count 的变化,会自动生成新的值// Action -- 定义操作目标状态的方法,用于修改目标状态。原创 2024-07-01 17:12:14 · 1359 阅读 · 0 评论 -
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
得到远程仓库地址。原创 2024-06-28 14:08:00 · 931 阅读 · 0 评论 -
vue3 【提效】使用 CSS 框架 UnoCSS 实用教程
官方的样式写法使用不习惯?可以自己定义!uno.config.ts 中添加 rules 即可rules: [})但这样一个个定义太麻烦,快来使用正则表达式批量定义${1px` })]]从此,p- 后的数字是多少,就是多少 px 的内边距,如。原创 2024-06-28 12:04:58 · 1274 阅读 · 0 评论 -
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
还在为每次都要导入组件而烦恼吗?用 unplugin-vue-components 来帮你吧,以后组件直接拿来用即可,无需再导入啦!原创 2024-06-27 17:53:44 · 705 阅读 · 0 评论 -
vue3 【提效】自动导入框架方法 unplugin-auto-import 实用教程
是否还在为每次都需要导入框架方法而烦恼呢?用 unplugin-auto-import 来帮你吧,以后只需这样写就行啦!官方示例如下图。原创 2024-06-27 17:34:47 · 332 阅读 · 1 评论 -
vue3 【提效】全局布局 vite-plugin-vue-layouts 实用教程
一个常见的需求是,同模块的若干页面需要使用同一种布局,比如俱乐部相关的页面的顶部需要展示俱乐部的名称,其他页面顶部需要展示网站名称。通常实现的方法是,将俱乐部的名称和网站名称定义成公共组件,在每个页面都书写置顶的布局,并引入响应的公共组件。显然这是非常低效的,通过全局布局 vite-plugin-vue-layouts 可以帮你解决这个麻烦!vite-plugin-vue-layouts 通常是配合一起使用的!原创 2024-06-27 16:41:46 · 968 阅读 · 0 评论 -
vue3 【提效】自动路由(含自定义路由) unplugin-vue-router 实用教程
当自动路由无法满足需求时,可以参考下方代码自定义路由routes: [...routes,// 自定义配置路由 /test ,访问文件 src/views/test.vue})原创 2024-06-27 15:21:47 · 850 阅读 · 0 评论 -
vscode中快捷生成自定义vue3模板
新建 vue 文件后,需要先写出 vue3 的基础架构代码,手动输入效率低下!期待:输入 v3 按 Tab 即刻生成自定义的vue3模板(如下图)原创 2024-06-27 10:35:51 · 286 阅读 · 0 评论 -
Vue3 【仿 react 的 hook】封装 useTitle
【代码】Vue3 【仿 react 的 hook】封装 useTitle。原创 2024-06-20 17:45:23 · 474 阅读 · 0 评论 -
手写 vue3 的 ref,reactive 和 watchEffect
【代码】手写 vue3 的 ref,reactive 和 watchEffect。原创 2024-06-11 14:47:21 · 96 阅读 · 0 评论 -
Vue3 【仿 react 的 hook】封装 useLocation
【代码】Vue3 【实战】封装 useLocation。原创 2024-06-06 09:54:25 · 326 阅读 · 0 评论 -
vue3 【实战】封装 “心跳“ 组件
在控制台每秒打印一个“hello”原创 2024-06-05 17:56:31 · 243 阅读 · 0 评论 -
vue3 自定义 v-model(无参数和带参数)【setup版】(两种方案)
子组件 Child.vue;const;</</父组件importfrom"vue";importfrom;constref"";</</</原创 2024-06-05 15:31:49 · 1222 阅读 · 0 评论