Vue后台管理系统开发,相关代码的笔记。

从零开始开发后台管理系统,还是有很多值得记录的地方。构建工具Vite、使用Vue3。 /* * @author 友人a丶 * @date 2022-07-11 * @app Vue应用对象 * */ export default function (app) { /* * 指定要导入的文件目录 * 直接加载用{eager:true},懒加载用glob * */ const modules = im
Vue后台管理系统开发,相关代码的笔记。

Pinia状态管理器学习笔记,持续记录

足够轻量,Pinia 重约 1kb,甚至会忘记它的存在! 去除 Mutation ,Actions 支持同步和异步(Actions一个顶俩,写起来简洁); 无需手动注册 Store,Store 仅需要时才自动注册。如果从不使用,则永远不会“注册”(省心); 没有模块嵌套,只有 Store 的概念,Store 之间可以自由使用,更好的代码分割; Vue2 和 Vue3 都能支持; 支持大型项目迁移期
Pinia状态管理器学习笔记,持续记录

Vue组件设计学习笔记,持续记录

组件化思想并不是前端独有的,但却是前端技术的延伸 任何软件开发过程,或多或少都有那么一些组件化的需求。 每个组件对应一个目录,组件所需的各种资源都在这个目录下就近维护;(最具软件工程价值) 页面上的每个独立的可视/可交互区域视为一个组件; 由于组件具有独立性,可以自由组合; 页面是组件的容器,负责组合组件形成功能完整的界面; 当不需要某个组件,或者想要替换组件时,可以整个目录删除/替换 分子是由原
Vue组件设计学习笔记,持续记录

Vue-Cli该如何使用?Vue-Cli学习笔记,持续记录

修改.Env环境变量文件之后,需要重新运行server才会生效。环境变量通过process.ENV访问。可以在项目根目录中放置下列文件来指定环境变量: .env # 在所有的环境中被载入 .local # 在所有的环境中被载入,但会被 git 忽略 .env. # 只在指定的模式中被载入 .env..local # 只在指定的模式中被载入,但会被 git 忽略 以 VUE_
Vue-Cli该如何使用?Vue-Cli学习笔记,持续记录

JS实用函数收集,持续记录

function getBase64(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => resolve(reader.result); reader.onerror = e
JS实用函数收集,持续记录

Node.js 初入门?持续记录

教程:https://www.runoob.com/nodejs/nodejs-tutorial.html 事件循环:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/EventLoop 版本列表:https://nodejs.org/dist/,下载并解压: xz -d node-v17.2.0-linux-x64.tar.xz ta
Node.js 初入门?持续记录

HTML DOM的各种宽高、偏移位置的属性总结

兼容性:All; 指的是元素的可视部分宽度和高度,即padding+content,如果没有滚动条,即为元素设定的高度和宽度,如果出现滚动条,滚动条会遮盖元素的宽高,那么该属性就是其本来宽高减去滚动条的宽高,包含内边距,但不包括水平滚动条、边框和外边距。 测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)(如果存在的话)、以及CSS设置的宽
HTML DOM的各种宽高、偏移位置的属性总结

Ant Design Vue使用记录,持续记录

好些问题,每次解决了,下次遇到了又要重新翻文档,干脆就自己记录一下。 Form.create(options) | this.$form.createForm(this, options) ,通过JFX方式去定义一个Form组件的各种属性。经 Form.create() 包装过的组件会自带 this.form 属性,如果使用 template 语法,可以使用 this.$form.createFo
Ant Design Vue使用记录,持续记录

SortableJS / vue.draggable.next 使用笔记,持续记录

东西确实是好东西,奈何一开始文档没捋清,费了一番时间好好琢磨了一下。 Github:https://github.com/SortableJS/vue.draggable.next,完整代码如下: <draggable v-model=\"myArray\" group=\"people\" @start=\"drag=true\" @end=\"drag=false\" :move=\"move\" hand
SortableJS / vue.draggable.next 使用笔记,持续记录

JS定时器清除之后,已经开始但是没有运行完的函数还会继续运行吗?

最近使用定时器的时候遇到这样一种情况,定时器清除了,功能仍然在跑(遍历数组,同步定时网络请求)。 排查了一下代码,发现逻辑确实没问题。后来一想,是不是函数没运行完,仍然在跑,于是上代码测试了一下: let timer = setInterval(async () => { console.log(\"开始\") await new Promise((resolve) => { setTim
JS定时器清除之后,已经开始但是没有运行完的函数还会继续运行吗?

前端Mockjs学习笔记,持续记录

相比于自己写一个模拟数据返回的后端接口,好像还是这个来的更加方便。 让前端攻城师独立于后端进行开发。不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。 基于对window的xhr对象的二次封装,增加了用于拦截的逻辑。 npm install mockjs Mock.setup({ timeout: 400 }) M
前端Mockjs学习笔记,持续记录

前端自适应方案总结,前端最佳自适应方案

我们看到的每个屏幕都是由一颗颗我们肉眼难以看到的小颗粒(物理像素)组成的。 是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。一个CSS像素对应多少个设备像素是根据当前的缩放比例 12px对应36px,缩放0.5,12px对应18px。扩大2.0,12px对应72px。 它的数值体现了物理像素和逻辑像素之间的关系,用公式可以计算出该设备的DPR的大小: DPR
前端自适应方案总结,前端最佳自适应方案

WebRTC开发经验总结,持续记录

volume 音量约束 sampleRate: 采样率 sampleSize: 采样大小,采样的位数 echoCancellation: 回音消除 autoGaincontrol: 增加音量 noiseSuppression: 降噪 latency : 延迟大小 channelCount: 切换声道 deviceID: 多个音频输入输出设备的进行切换 groupId: 同一个物理设备,是一个分组,
WebRTC开发经验总结,持续记录