qq_40026668的博客

需求：页面中的popup弹框，可以通过物理返回键进行关闭方案：（1）当打开弹框时，向history中添加一个空记录，并且监听history的popstate变化（2）当弹框打开状态用户操作了返回上一级页面，会触发监听事件，关闭弹框（3）当弹框打开状态用户通过状态值（比如popup中有个取消按钮）关闭了弹框，要把监听事件清除实现// vue3 setup模式import { useEventListener } from '@vueuse/core'//页面中点击打开弹框按钮..

最近新开的项目，尝试使用pinia做状态管理 pinia，没有发现官方提供的持久化插件，就先按照文档的插件模块，就自己先写一个凑合用import { App } from 'vue'import { createPinia, PiniaPluginContext } from 'pinia'import devalue from '@nuxt/devalue'/*需要持久化的数据*/const dataPath = { main: [], user: ['token', 'userIn

安装uni-api的typesnpm i @dcloudio/types -D配置tsconfig识别namespace UniApp// tsconfig.json{ "compilerOptions": { "types": ["node", "@dcloudio/types"], "typeRoots": ["./node_modules/@types/","./node_modules/@dcloudio/types/", "./types"], }}创建配置文件

安装依赖yarn add unplugin-icons unplugin-vue-components --dev或者npm i -D unplugin-icons unplugin-vue-components配置vite.config.ts (自定义图标)import UnpluginVueComponents from 'unplugin-vue-components/vite'import Icons from 'unplugin-icons/vite'import IconsRes

安装依赖npm i -D vite-plugin-windicss windicss//或者yarn add vite-plugin-windicss windicss --dev使用插件// vite.config.tsimport WindiCSS from 'vite-plugin-windicss'export default defineConfig({ plugins: [ WindiCSS() ],})导入样式// main.tsimport 'vi

安装依赖// 注意版本之间的依赖关系，升级最新版本后可能出现未知错误"devDependencies": { "stylelint": "^13.13.1", "stylelint-config-prettier": "^9.0.3", "stylelint-config-standard": "^22.0.0", "stylelint-order": "^5.0.0", "stylelint-scss": "^4.0.0" },配置 .stylelint

项目比较干净，填充页面即可使用百度网盘链接：https://pan.baidu.com/s/1G99HBpRbYzD_f2EyJm-8zA 提取码：1234

安装依赖"dependencies": { "qs": "^6.10.1", "axios": "^0.21.1" },统一管理配置，创建src/config/net.config.ts//src/config/net.config.tstype NetConfigSuccessCode = 200 | '200' | '000000'// 正式项目可以选择自己配置成需要的接口地址，如"https://api.xxx.com"// 问号后边代表开发环境，冒号后边代表.

在项目根目录新建 .env.development、.env.production、.env.test//开发.env.developmentVITE_MODE_NAME=developmentVITE_APP_ID=123456VITE_AGENT_ID=123456VITE_LOGIN_TEST=trueVITE_RES_URL=https://www.baidu.comVITE_APP_TITLE=风控管理平台VITE_EDITOR=webstorm//生产.env.produ.

一般后台管理系统都会有管理员和普通用户的区分，所以要做权限控制思路创建公用页面login，可以让用户进行登录操作，根据用户信息对应的身份，匹配不同的权限模块在路由前置钩子进行身份验证拦截，将拦截条件分为 白名单（不做拦截）、登录态未登录、登录态已登陆路由注册分为两步，公用页面直接注册，权限路由根据登录用户的身份来注册解决路由层级过深会导致keep-alive不缓存问题实现安装依赖"dependencies": { "nprogress": "^0.2.0", "vue-ro

预览文档，了解vuex4.0与vuex3.0的差异安装依赖"dependencies": { "vuex": "^4.0.2", "vuex-persistedstate": "^4.0.0" },在src路径下创建store文件夹，目录结构如图用vuex实现切换语言，点击按钮增1，注意setup中怎么获取store值，vuex模块取值、注册，以及借助插件实现持久化// store/store.d.tsdeclare namespace MyStore { ty.

elemntPlus的主题变量本来时延用2.0版本的，所以文档也是和2.0很相似，但是根据文档去修改主题色已经不生效了，看了下主题变量代码，发现已经更换了新的写法，去查看更新日志也有更新记录，可能是对应的主题文档没有来得及更新把，也可能是我的使用姿势有误。。。首先自定义一个变量文件，并在main.ts中引入// elementPlus.scss/* 改变主题色变量 */ $--color-primary: teal; /* 改变 icon 字体路径变量，必需 */$--font-path: 'e.

element提供了完整引入和按需引入的方案，并且使用dayjs国际化完整引入 + 普通国际化新建 elementPlus.ts文件，并在main.ts中引入// elementPlus.tsimport { App } from 'vue'import ElementPlus from 'element-plus'import 'element-plus/lib/theme-chalk/index.css'const install = (app: App) => { ap

在vite.config.ts新增 resolve: { alias: { '@': resolve('src'), '*': resolve('') } },

在项目根目录创建 tsconfig.json{ "compilerOptions": { // 允许从没有设置默认导出的模块中默认导入。这并不影响代码的输出，仅为了类型检查 "allowSyntheticDefaultImports": true, // 解析非相对模块名的基准目录 "baseUrl": ".", "esModuleInterop": true, // 从 tslib 导入辅助工具函数（比如 __extends， __rest等）

安装依赖 "devDependencies": { "standard": "^16.0.3", "vue-eslint-parser": "^7.10.0", "@typescript-eslint/parser": "^4.29.0", "@typescript-eslint/eslint-plugin": "^4.29.0", "eslint-plugin-vue": "^7.15.1", "eslint": "^7.32.0", "eslint-p

我的项目，非引入资源（主要是图片）一般存放在/public/assets，根据vite文档指引，public下的文件会在打包和移入build/outDir目录下，访问时使用 /assets绝对路径的方式。public入口入坑：看到文档的说明，我就天真的使用/assets的方式访问项目图片资源，本地访问正常，但是打包到线上后出现图片找不到的情况，根据图片404的结果，直接原因就是 我的项目实在域名根目录下面的 /admin-risk/目录下存放，所以图片中缺少了/admin-risk，但我根据

背景1. 最近使用了vite2.0 + vue3.0 + elementPlus构建了一个后台管理系统，dev环境运行正常，打包时线上抛出一个异常，导致项目无法正常运行打开。2. 当我去打包代码中删除这个报错方法，项目就可以正常运行了，经过多次排查，发现这个报错方法就是element提供的国际化方法导致的。求助为什么会出现此问题···...