随笔分类 -  vue3.0

5个好看的vue3后台管理模板
摘要：- 1.SoybeanAdmin https://soybeanjs.cn 简介 SoybeanAdmin 是一个清新优雅、高颜值且功能强大的后台管理模板，基于最新的前端技术栈，包括 Vue3, Vite5, TypeScript, Pinia 和 UnoCSS。 采用 Vue3, Vite5, T 阅读全文
posted @ 2024-08-03 19:35 古墩古墩 阅读(12771) 评论(0) 推荐(0)
vue3拖拽插件vue-draggable-next
摘要：- 基于sortablejs； npm地址：https://www.npmjs.com/package/vue-draggable-next 配置项：https://github.com/SortableJS/Sortable#options import { VueDraggableNext as 阅读全文
posted @ 2023-07-28 17:17 古墩古墩 阅读(2055) 评论(0) 推荐(0)
pinia持久化存储插件pinia-plugin-persist
摘要：- 文档地址：https://seb-l.github.io/pinia-plugin-persist/basic-usage.html 有时候需要把pinia中的数据持久化存储（存到localstorage或sessionstorage中） pinia-plugin-persist插件可以帮我们轻 阅读全文
posted @ 2022-07-24 19:42 古墩古墩 阅读(8857) 评论(1) 推荐(0)
vue3响应式reactive的实现原理；proxy深层代理；vue3响应式api
摘要：- 参考链接： https://segmentfault.com/a/1190000039194351 我们已经知道vue3的响应式实现从defineProperty变成了proxy defineProperty有个弊端，只能监听已有属性的变化，新增属性就监听不到，vue2时，需要配合Vue.set 阅读全文
posted @ 2022-06-03 15:59 古墩古墩 阅读(2410) 评论(0) 推荐(0)
vue3状态驱动动态css
摘要：- vue3单文件组件的 <style> 标签可以通过 v-bind 这一 CSS 函数将 CSS 的值关联到动态的组件状态上： template <div class="dynamicClass"></div> script const theme = reactive({ border: '1p 阅读全文
posted @ 2022-06-03 13:49 古墩古墩 阅读(490) 评论(0) 推荐(0)
mitt.js
摘要：- 最近项目上用了一个自己写的emitter.js； 发现off解绑回调的时候出了问题，off方法是把回调函数转换成字符串对比，如果相同，则去除发射器中的回调；但是我在很多组件中传入的方法几乎一样，于是奇怪的事情发生了； emitter无缘无故的不触发，经过一番调试，发现是以上原因；于是找了一个插件 阅读全文
posted @ 2022-03-30 20:07 古墩古墩 阅读(1074) 评论(0) 推荐(0)
pinia
摘要：- 文档地址：https://pinia.vuejs.org/ 安装： yarn add pinia # or with npm npm install pinia vue3引入（vue2引入需要使用插件） import { createPinia } from 'pinia' app.use(cr 阅读全文
posted @ 2022-03-29 23:10 古墩古墩 阅读(462) 评论(0) 推荐(0)
vue项目集成mock.js
摘要：- mockjs是用来拦截请求，模拟数据的，使前端不用等待后端出接口，就可以模拟接口来开发业务 mockjs官网：http://mockjs.com/ 安装： npm install mockjs 在src目录下创建mock文件夹 mock/index.ts import Mock, { Rando 阅读全文
posted @ 2022-03-27 14:32 古墩古墩 阅读(219) 评论(0) 推荐(0)
vue cli创建vue3项目
摘要：- 文档地址：https://cli.vuejs.org/zh/guide/ vue cli可以帮助我们快速搭建一个工程化的vue项目；就像工地盖房子前，会先建一些脚手架，工人就可以在上面盖房子了； 安装： npm install -g @vue/cli # OR yarn global add @ 阅读全文
posted @ 2022-03-27 14:21 古墩古墩 阅读(107) 评论(0) 推荐(0)
yarn的使用
摘要：- 文档地址：https://yarn.bootcss.com/ 安装 npm install --global yarn 检查是否安装成功 yarn --version 初始化一个项目 yarn init 添加依赖包 yarn add [package] yarn add [package]@[v 阅读全文
posted @ 2022-03-27 14:06 古墩古墩 阅读(58) 评论(0) 推荐(0)
pxtorem网页自适应方案
摘要：- 之前为了些自适应网页，会在项目里写rem。如果设置的rem不恰当，每次还要经过一番计算来得出像素转换成rem的值；有些麻烦； pxtorem解决了这样的问题 我们可以根据设计图大小设置好根节点的字体大小，也就是1rem=多少像素； pxtorem帮助我们自动将px转换成rem； 在代码中就可以直 阅读全文
posted @ 2022-02-20 16:34 古墩古墩 阅读(2942) 评论(0) 推荐(0)
vue-worker
摘要：- 一般使用worker都是单独执行一个js脚本文件；最近发现一个vue插件，vue-worker，支持了传入一个方法，就可以让这个方法在worker线程执行；使用worker更加方便； vue-worker地址：https://www.npmjs.com/package/vue-worker 安装 阅读全文
posted @ 2022-02-12 19:35 古墩古墩 阅读(4281) 评论(0) 推荐(0)
vue3新特性
摘要：-- teleport可以指定元素渲染到某一元素下； 如： <teleport to="body"> <div>父级teleport</div> </teleport> emits自定义事件 emits: ['inFocus', 'submit'] // 会覆盖原生事件 emits: { // 没有 阅读全文
posted @ 2022-02-06 14:45 古墩古墩 阅读(118) 评论(0) 推荐(0)
vite无法使用require的替代方案
摘要：- webpack const modulesFiles = require.context('./modules', true, /\.js$/) vite const modulesFiles = import.meta.globEager("./modules/*.js") vite中 / 绝 阅读全文
posted @ 2022-01-18 23:02 古墩古墩 阅读(4208) 评论(0) 推荐(0)
vue3组件内部改变props的值
摘要：-- vue2： 内部触发改变： this.$emit("update:visible", value); 外部绑定是需要加上.sync修饰符： :visible.sync="shows" vue3: vue3取消了.sync修饰符，通过 @update:show="shows = $event" 阅读全文
posted @ 2022-01-18 22:51 古墩古墩 阅读(4039) 评论(0) 推荐(0)
vue3.0初体验
摘要：中文文档：https://vue-docs-next-zh-cn.netlify.app/guide/installation.html#vue-devtools 不2.0和vue3.0新特性：https://www.vue3js.cn/docs/zh/ 只想了解vue3：https://www.v 阅读全文
posted @ 2020-10-17 17:44 古墩古墩 阅读(230) 评论(0) 推荐(0)