随笔分类 -  Vue

vue3
pinia数据持久化
摘要：方式一 使用vueuse提供的hook函数useSessionStorage和useLocalStorage，可以实现对某个变量的持久话 安装vueuse库 npm i @vueuse/core 在stoer中使用 import { useLocalStorage } from '@vueuse/c 阅读全文
posted @ 2023-05-13 15:00 光影星宸 阅读(314) 评论(0) 推荐(0)
vite.config.ts配置文件
摘要：import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { resolve } from 'path' import vueSetupExtend from 'vite-plugin-vue-se 阅读全文
posted @ 2023-05-06 19:12 光影星宸 阅读(307) 评论(0) 推荐(0)
Vue3移动端适配解决方案
摘要：导读： 使用vw和vh解决适配问题 vw：view width屏幕宽度，1vw等于屏幕宽度的百分之一 vh：view height屏幕高度，1vh等于屏幕高度的百分之一 使用插件postcss-px-to-viewport可以自动将px转换为vw/vh 安装 npm i postcss-px-to- 阅读全文
posted @ 2023-04-18 17:19 光影星宸 阅读(870) 评论(0) 推荐(0)
Vue中使用全局事件总线
摘要：使用第三方库mitt实现全局事件总线，其原理，和Vue2类似，在app.config.globalProperties上添加总线，然后在需要的组件中引入，调用其on/emit/off等方法实现绑定、派发和解绑等操作 1、下载安装 npm i mitt 2、在main.ts中配置 import { c 阅读全文
posted @ 2023-04-17 00:02 光影星宸 阅读(270) 评论(0) 推荐(0)
Vue3组合API自动引入插件
摘要：插件名：unplugin-auto-import url：https://github.com/antfu/unplugin-auto-import 安装 1、下载插件 npm i unplugin-auto-import -D 2、配置vite.config.ts import vue from 阅读全文
posted @ 2023-04-15 16:47 光影星宸 阅读(289) 评论(0) 推荐(0)
prettier配置项
摘要：vs code的settings.json配置文件 { ... // 其他配置项 "editor.defaultFormatter": "esbenp.prettier-vscode",// 设置prettier为默认格式化程序 "prettier.enable": true, // 启用prett 阅读全文
posted @ 2023-04-11 16:52 光影星宸 阅读(1527) 评论(0) 推荐(0)
Vue3 setup语法糖添加name属性
摘要：1. 安装插件vite-plugin-vue-setup-extend npm i vite-plugin-vue-setup-extend -D 2. 配置vite.config.ts import vue from '@vitejs/plugin-vue' import { defineConf 阅读全文
posted @ 2023-04-11 14:25 光影星宸 阅读(875) 评论(0) 推荐(0)
Vue3+TS配置路径别名@
摘要：##1. vite.config.ts import vue from '@vitejs/plugin-vue' import { resolve } from 'path' import { defineConfig } from 'vite' export default defineConfi 阅读全文
posted @ 2023-04-11 14:11 光影星宸 阅读(515) 评论(0) 推荐(0)