一小池勺-CSDN博客

原创 TypeScript 项目中接口的统一管理

接口在发起请求的时候可能是会携带参数的，以及服务器返回的数据等等这些都是需要被定义数据的类型的，因此该配置文件的作用就体现出来了。index.ts：管理 user 模块相关的接口。在 src 目录下新建一个 api 文件夹。那么 type.ts 是做什么用的呢？首先我们简单来二次封装一个。

2024-05-19 17:48:54 95

原创 Vite 项目中如何去集成 Mock 环境（插件：vite-plugin-mock）

可以看到是十分简单的，无非就是提供数据的函数 + 对外暴露一个数组，数组中包含的便是接口。之后在项目根目录创建 mock 文件夹，去创建我们需要的 Mock 数据和对应的接口。配置 vite.config.ts。

2024-05-19 14:40:51 237

原创 Vite 项目中如何去集成 Sass

可是我们在 main.ts 中进行导入了呀，为毛就不行呢？通过查看文档：原来是需要这样来配置，如下就是集成 scss 全局变量的方法。当然还有很多的 scss 文件可以编写，一些混入一些逻辑判断一些封装都可以到这里进行集成。重新启动项目，现在就可以使用了：比如项目的主题色宽高层级…

2024-05-19 13:01:31 278

原创 Vite项目当中的SVG图标的配置及图标全局组件的封装

在开发项目的时候经常会用到svg矢量图,而且我们使用SVG以后，页面上加载的不再是图片资源，这对页面性能来说是个很大的提升，而且我们SVG文件比img要小的很多。可以看到，在项目中可以使用 SVG 图标了，但是有一点不好的就是这样用起来有点麻烦，这个时候我们就可以进行ICON图标组件的封装了，并将其注册为一个全局的组件。use标签fill 属性性可以设置图标的颜色（如何设置失败，检查你复制的这个 svg 图标代码中是否有这个 fill 属性，如果有就将其移除掉，就可以使用了）为什么要使用 SVG 图标？

2024-05-19 08:52:24 310

原创 Vue开发项目过程中环境变量的配置（vite、vue3、ts)

项目开发过程中，至少会经历开发环境、测试环境和生产环境(即正式环境)三个阶段。不同阶段请求的状态(如接口地址等)不尽相同，若手动切换接口地址是相当繁琐且易出错的。于是环境变量配置的需求就应运而生，我们只需做简单的配置，把环境状态切换的工作交给代码。顾名思义，开发使用的环境，每位开发人员在自己的dev分支上干活，开发到一定程度，同事会合并代码，进行联调。注意:一般情况下，一个环境对应一台服务器,也有的公司开发与测试环境是一台服务器!测试同事干活的环境啦,一般会由测试同事自己来部署，然后在此环境进行测试。

2024-05-18 23:16:32 280

原创如何彻底卸载VSCode及其原来的插件配置缓存

【摘要】由于使用vscode配置的插件实在太多、太乱、太杂了，现在我想要一个干干净净的 vscode 来作为我的一个草稿本（webStrom 太香了，用了就回不去了），所以准备卸载重新配置从控制面板找到 vscode 将其卸载。此时仅仅是删除了应用软件，如果重新下载安装之前得插件和个人配置还会重新加载，所有需要完全删除插件和个人配置删除安装插件方法一在图示路径中找到 .vscode 文件夹，将其删除，即可彻底清除安装的插件方法二若在图示路径中找不到文件夹，…

2024-05-18 22:47:18 194

原创小而美的IKUN-UI组件库源码学习（按钮 Button）

这样做可以允许其他开发者在使用组件时能够进行类型检查。一切从这个文件 index.ts，开始。的入口文件，这里导出了组件及其类型定义。index.ts 文件作为该。这里为什么要这样处理呢？

2024-05-18 19:52:37 173

原创小而美的IKUN-UI组件库源码学习（前言）

main 应该是一个 Vue 组件，main.install 为main组件添加了一个install方法，这个方法接受一个参数app，类型为APP，return main ，withInstall 函数返回 main 组件。这意味着 main 组件现在具有一个 install 方法，可以在Vue应用中使用。🐥坤-UI是由vue3和vitejs搭建的简易组件库 🏀，身为一名合格 IKUN，我得学习学习这款专门为我偶像打造的精美组件库。组件分成了这四类：虽然量不多，但是帅呀！mixins 文件夹。

2024-05-18 17:56:59 180

原创【Vue3+TypeScript】CRM系统项目搭建之 — 关于 VUE3 语法新变化

文章目录1. Vue3简介1.1. 【性能的提升】1.2.【源码的升级】1.3. 【拥抱TypeScript】1.4. 【新的特性】2. 创建Vue3工程2.1. 【基于 vue-cli 创建】2.2. 【基于 vite 创建】(推荐)2.3. 【一个简单的效果】3. Vue3核心语法3.1. 【OptionsAPI 与 CompositionAPI】Options API 的弊端Composition API 的优势3.2. 【拉开序幕的 setup】setup 概述setup 的返回值setup 与

2024-03-19 01:13:57 860

原创【Vue3+TypeScript】CRM系统项目搭建之 — 关于如何设计出优质的 Vue 业务组件

前面知道了 Element Plus 关于组件设计时使用 CSS 变量来进行重构，接着这里就在正式进入业务开发之前，来学习如何在封装组件时在其可拓展性与贴合业务去寻找一个平衡点。这是来自 B 站 up 主的分享，在上水课的时候偶然刷到的，就决定学习学习。

2024-03-18 19:51:37 871

原创【Vue3+TypeScript】CRM系统项目搭建之 — 关于 Element Plus 样式覆盖

在以前使用 Element-ui 2.x 版本的时候，是没有提供对应的样式覆盖变量的，不像 vant 组件库，可以很方便看到样式变量，很不幸， Element-plus 仍然是没有提供这样一个速查变量的方式，但是当使用其组件的时候，就发现，这些组件都在使用这些变量了。这就很有意思了，用了这么多变量，居然不提供变量表？

2024-03-18 18:48:58 435

原创【Vue3+TypeScript】CRM系统项目搭建之 — 处理 .app 背景宽高

前面完成了 Elment-plus 的集成，现在就可以进行项目的开发了，首先本项目是在一整个视口宽高下的。可以使用视口单位来处理，视口单位不会去考虑当前盒子的父盒子，只是相对于其所处的当前视口而言的。可以看到，这并没有占满屏幕的整个高度，他是默认根据内容来撑起来的。修改 index.html。

2024-03-18 18:37:24 354

原创【Vue3+TypeScript】CRM系统项目搭建之 — Element-Plus集成

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件。然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中。这里使用按需自动导入组件。这里是 vite 的项目。接下来就可以直接使用了。

2024-03-18 18:18:26 386

原创【Vue3+TypeScript】CRM系统项目搭建之 — 区分 development 和 production 环境

服务器地址，线上环境和开发环境一般是用的不是同一台服务器，那为什么不用同一台服务器呢？因为在开发阶段，前后端开发是会对服务器进行各种操作的，是及其不稳定的，因此这个在开发过程中使用的服务是测试服务器，当开发到一个稳定的版本的时候，就可以部署到生产服务器，这个生产服务器是给到用户去使用的，是不可以进行十分频繁的修改的，这样是及其不稳定的。很明显，这个方式是十分依赖于开发过程中人的修改，如果出现人为失误，这是一个十分危险的操作，这有很大的隐患性。那么，如何可以自动区分开发环境和生产环境呢？

2024-03-18 15:10:59 560

原创【Vue3+TypeScript】CRM系统项目搭建之 — Axiox 网络请求封装

综上所述，虽然技术上GET请求可以包含请求体，但出于上述原因，通常不建议在GET请求中包含请求体。在HTTP协议中，GET请求通常用于请求数据，而POST请求则通常用于提交数据。使用 vue 开发时，频繁使用到了 axios 这个网络请求库，这里对其做一个发起请求时携带参数方式的小结。注意：POST 请求的有参、无参请求与如上的 GET 是一样的，只不过是请求方式名换一下。如果使用 Axios 的 POST 请求的简写形式，需要将数据以 JSON 格式传递。，可以是可以有请求体body的,但是不建议带。

2024-03-17 23:38:24 858

原创【Vue3+TypeScript】CRM系统项目搭建之 — 状态管理

前面完成了路由的基本的配置工作，现在进行项目的状态管理的配置，这里使用到的是。

2024-03-17 22:42:40 302

原创【Vue3+TypeScript】CRM系统项目搭建之 — 路由配置

前面完成了项目的结构划分，也进行了样式的重置以及全局变量的配置，现在开始该项目的路由配置。

2024-03-17 22:02:58 381 1

原创【Vue3+TypeScript】CRM系统项目搭建之 — CSS样式方案

前面完成了项目结构的划分后，接着进行项目的 CSS 样式的重置。

2024-03-17 21:08:16 400

原创【Vue3+TypeScript】CRM系统项目搭建之 —项目目录结构的划分

完成了前面的对于团队项目代码的规范检测后，接着对项目进行目录结构的初步划分如下：

2024-03-17 20:30:42 355

原创【Vue3+TypeScript】CRM系统项目搭建之 — 代码规范

比如在 prettier 中规定在代码保存的时候自动格式化代码，使得所有得单引号变为双引号，但是我们在 eslint 中规定的是，不可以是双引号。完成如上配置之后，当代码保存的时候，eslint 就会按照 pretter 里面的这个保存规范来进行代码风格检测了。在前面创建项目的时候，我们就选择了ESLint，所以Vue会默认帮助我们配置需要的ESLint环境。等语言，基本上前端能用到的文件格式它都可以搞定，是当下最流行的代码格式化工具。这个就配置了解除对声明但未被使用的变量的警告。安装 prettier。

2024-03-17 19:58:28 803

转载循序渐进引入 jsx 文件写法和函数式组件写法

打开 Vue3 的官方文档，它首先会告诉你，Vue的组件可以按两种不同的风格书写：选项式API和组合式API。文档为我们提供一系列两种风格的代码参考，供我们按照偏好进行选择。实际上，Vue3 组件可不止两种写法，而是多达十几种！然而，不管是什么写法，它们都是基于同一个底层系统实现的，概念之间也是彼此相通的，只是使用的接口不同。在实际开发中，我们也不会同时使用到那么多种写法，但是这并不意味着我们不需要去了解这些写法！

2024-02-06 12:20:03 137

原创 v-for 遍历图片的时候，正常写法 src 路径读不出来

注意这里面的相对路径是相对于当前这文件而言的图片相对路径，不是相对渲染组件而言的。进行遍历的时候，正常写的相对路径引入，结果页面引入图片资源失败了。这是之前指定路径的方式。

2024-02-05 09:48:24 467

原创如何显著提高 GitHub 的访问速度

GitHub是全世界最大的同性交友平台，但是在中国，访问起来是十分慢的，很多人会使用魔法，但是魔法是要钱的，因此这里有一种不要钱的解决方案，在这里分享出来，emmm… 不过不知道会不会帮助到你，总之这段时间，我确实感到了访问速度的提高。

2024-02-03 09:51:04 874 1

原创 2670.找出不同元素数目差数组-力扣(LeetCode)

感谢《LeetCode》平台给你一个下标从开始的数组，数组长度为。的不同元素数目差数组可以用一个长度为的数组表示，其中等于前缀中不同元素的数目减去后缀中不同元素的数目。返回的不同元素数目差数组。注意表示的一个从下标 i 开始到下标结束的子数组（包含下标和对应元素）。特别需要说明的是，如果 > ，则表示一个空子数组。输入：输出：解释：对于 i = 0，前缀中有 1 个不同的元素，而在后缀中有 4 个不同的元素。因此，diff[0]

2024-01-31 22:41:22 922

原创原来 React 搭档 TailwindCSS 会这么好用

TailwindCSS中文文档|TailwindCSS中文网可不是来吹风的，它是个“实用至上”的CSS框架。不像其他框架那样，给你一堆组件让你去挑选，提供了一堆小巧精致的工具类，可以让你自由组合。它的核心理念就是“功能类优先”，也就是说，每一个class都代表了一个CSS属性，这可真是把“原子化”发挥到了极致。而且，它还支持响应式设计，可以根据不同的屏幕尺寸，自动调整样式。同时，它还支持暗黑模式。React官方中文文档React是一个用于构建用户界面的JavaScript库，由Facebook。

2024-01-31 15:54:30 1066

原创 821.字符的最短距离-力扣(LeetCode)

感谢《LeetCode》平台给你一个字符串 s 和一个字符 c ，且 c 是 s 中出现过的字符。返回一个整数数组 answer ，其中 answer.length == s.length 且 answer[i] 是 s 中从下标 i 到离它最近的字符 c 的距离。两个下标 i 和 j 之间的距离为 abs(i - j) ，其中 abs 是绝对值函数。输入：输出：解释：字符 ‘e’ 出现在下标 3、5、6 和 11 处（下标从 0 开始计数）。距下标 0 最近的 ‘e’ 出现在下标 3 ，所

2024-01-30 20:41:55 380

原创【HTML+CSS+JavaScript】Animated Navigation

【代码】【HTML+CSS+JavaScript】Animated Navigation。

2024-01-30 18:52:48 333

原创【HTML+CSS+JavaScript】animated-countdown

【代码】【HTML+CSS+JavaScript】animated-countdown。

2024-01-30 18:47:18 337

原创【HTML+CSS+JavaScript】3d-boxes-background

【代码】【HTML+CSS+JavaScript】3d-boxes-background。

2024-01-30 18:41:30 354

原创 VUE2实现iHRM人力资源后台管理

项目目录。

2024-01-30 18:20:19 942

原创【尚硅谷Vue3入门到实战，最新版vue3+TypeScript前端开发教程】学习笔记

也得到了一个最佳实践的结论：监视对象里面的属性，最好是写成函数式，注意点：如果在关注监视对象的地址值的同时还需要关注该对象内部的值的变化，则需要手动开启深度监视。定义的对象类型数据的时候，将对象名写到 watch 的第一个参数中时，其实我们监视的是对象的地址，只有当这个对象的地址改变了，才会触发监视，因此这个时候我们可以开启深度监视，此时修改这个对象里面的属性的时候，就能触发监视逻辑，但是有趣的是，当我们修改被监视对象的属性的时候，可以发现。这个返回的函数就是用来取消对数据的监听的，从而停止执行回调函数。

2024-01-30 18:16:03 999

空空如也

空空如也