vue 权限控制的思考我们的项目一般来说分为三个部分 - 路由控制 - 组件控制 - 接口控制 但是公司的后端是只处理了接口。针对接口进行控制。 在这样的前提下， 对权限控制进行一下梳理 路由控制一般来说在 route 的 mate 里面添加权限。 然后 beforeEach的时候对权限进行判断。没有对应的权限就跳到404页面 组件控制在网络中搜索，一般都是用自定义指令进行处理。 但是这样有一个问题。他需要挂载后然后移除子元素 我认为可以用 v-if 来省略这个问题 伪代码 123456789101112131415161718192021222324<template> <template v-if="hasPermission"> <slot></slot> </template></template><script lang="ts">export default { prop: { perm ...

vue3 延迟显示 loading仓库地址 https://github.com/abigmiu/vue-delay-loading 用途： 在 x 秒后显示 loading 比如 x = 300 现在请求一个接口。 用时500ms 就会在 300 - 500 这个时间段显示 loading 如果用时 200ms， 就不会显示 loading 用法： 123456789101112<script setup lang="ts">import { ref } from 'vue'const loading = ref(true)setTimeout(() => { loading.value = false}, 5000);</script><template> <div> <div v-loading:2000="loading"></div> </div></tem ...

webpack5 多页面打包配置确定页面结构123456├── package-lock.json├── package.json├── postcss.config.js├── src 代码├── tsconfig.json└── webpack.config.js webpack配置文件 12345src├── assets 静态资源├── models ts 定义├── pages 页面└── scripts 一些工具函数 123456789src/pages├── course│ ├── index.html│ ├── index.ts│ └── style.scss├── course-intro│ ├── index.html│ ├── index.ts│ └── style.scss 步骤1. 安装 webpack1npm install webpack webpack-cli -D 配置package.json. - ...

webstorm使用live-server最近从vscode切换到了webstorm，但是苦于webstorm没有live-server插件不太方便，下面说一说webstorm怎么使用live-server，主要原理就是下载live-server这个npm包 玩过前端开发的都应该知道有局部安装和全局安装两种方式吧。你可以自由选择 安装live-server很简单，我是用yarn全局安装yarn global add live-server 使用live-server如果你是全局安装的l， 然后直接在终端输入live-server显示命令行无效，那么就是没有添加到环境变量， 自行搜索npm 全局安装包在那，yarn的全局安装包位置是bin文件夹，也有可能你自定义了名字。哎呀，怎么都是自行搜索呢？🙃 因为我懒啊 使用npm脚本运行也是很简单，在package.json 里面自行添加一个scripts就行 1{ "scripts": { "dev": "live-server" },&# ...

一次 vue 跨组件通信方法的选择 需求分析这是一个对话框页面。分为 对话列表 对话输入 角色选择 三个组件 对话列表（1）依赖对话输入（2）和角色选择（3）两个模块的内容。 在对话列表里面点击编辑的时候。 2 和 3 的内容也需要对应改变。 这样就形成了相互依赖 第一次尝试 - props使用 props 传值。1 是父组件，2和3是子组件。设计一个 editId用来表示是否在编辑某段话。如果editId为0就表示新增。看起来挺简单也是挺符合要求的，但是写着写着，要处理的边界条件太多。props一大堆。加上所有的状态都保存在1里面。导致代码十分长。不易于分辨。遂放弃这种方式 第二次尝试 - eventBus由于没有事先在脑海里理清哪里需要传值。一上来就写代码。导致后面越来越多的 on 和emit。无法辨别值究竟是从哪里传过来的。又又放弃。 最后一次 - pinia也就是用仓库的方式进行数据渲染。把状态， 事件什么的全丢 store里面去。 这样方便管理多了。 1234567891011121314151617181920212223242526272829import { ...

下载抖音表情包首先进入抖音的网站， 打开控制台， 找到表情包对应的请求。 1https://www.douyin.com/aweme/v1/web/emoji/list?device_platform=webapp 后面还有一大串不重要的信息 看到里面的emoji_list 字段，右键点击复制object，这样你就可以得到一个json串。 接下来我们就可以写代码下载， 一顿啪啪啪， 下载 request库（node的， 不是python的） 再一顿啪啪啪， 123456789101112const request = require('request')const dataFile = require('./data.json') // 在浏览器里面复制的json串放到了这个文件里面const data = dataFile.map((item) => { return { name: item.display_name.slice(1, -1), // 去除括号 url: ite ...

使用云盾cdn 注册账户https://www.yundun.com/ 点击右上角用户中心– 菜单栏 –> 用户中心 –> 用户认证 等待认证完成（没有消息通知， 只能每天看一眼） 控制台， 左侧菜单–> WEB安全加速 –> 业务列表 –>添加网站 添加后还是这个页面， 点击控制台， 点击新增， 设置回源地址，就是你的服务器地址。 https 注意一定要在 左侧菜单–> WEB安全加速 –> 证书管理里面上传你的证书 接入模式左侧菜单–> WEB安全加速 –> 业务列表 里面有个接入模式， 选择canme还是 ns都可以

基于Element Tree 组件和vue-contextmenujs 实现文件夹树基于ElementTree 组件和vue-contextmenujs 实现文件夹树 插件版本号 1{ "vue-contextmenujs": "^1.4.9", "element-ui": "^2.4.5",} 实现效果 Screen-2023-08-18-151841 完整代码123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293<!-- 文件夹Tree --><template> <div v-loading="loading"> ...

开发一个 vue 的 eslint 插件需求vue template里面的事件名只能已on 开头 实现效果 image-20230528172725188 实现步骤创建调试程序和 eslint插件程序 创建调试程序 我创建的文件夹名称为eslint-demo 1pnpm create vue 创建eslint 插件程序 我创建的文件夹名称为v-on-name-sartwith-on 首先安装eslint 脚手架 123pnpm i -g yopnpm i -g generator-eslint 生成 Eslint 插件工程。 1yo eslint:plugin 为插件创建一条规则，执行如下命令: 1yo eslint:rule 文件目录参考 image-20230528173706552 link 插件在v-on-name-sartwith-on 这个项目里面执行 1pnpm link --global 在eslint-demo 这个项目里面执行(注意，这里的名称是package.json 里面的名称) 12pnpm link --global eslint-plugin- ...