- 博客(99)
- 收藏
- 关注
RSS订阅原创 【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
825
原创 【Vue3+TypeScript】CRM系统项目搭建之 — 关于如何设计出优质的 Vue 业务组件
前面知道了 Element Plus 关于组件设计时使用 CSS 变量来进行重构，接着这里就在正式进入业务开发之前，来学习如何在封装组件时在其可拓展性与贴合业务去寻找一个平衡点。这是来自 B 站 up 主的分享，在上水课的时候偶然刷到的，就决定学习学习。
2024-03-18 19:51:37
855
原创 【Vue3+TypeScript】CRM系统项目搭建之 — 关于 Element Plus 样式覆盖
在以前使用 Element-ui 2.x 版本的时候，是没有提供对应的样式覆盖变量的，不像 vant 组件库，可以很方便看到样式变量，很不幸， Element-plus 仍然是没有提供这样一个速查变量的方式，但是当使用其组件的时候，就发现，这些组件都在使用这些变量了。这就很有意思了，用了这么多变量，居然不提供变量表？
2024-03-18 18:48:58
395
原创 【Vue3+TypeScript】CRM系统项目搭建之 — 处理 .app 背景宽高
前面完成了 Elment-plus 的集成，现在就可以进行项目的开发了，首先本项目是在一整个视口宽高下的。可以使用视口单位来处理，视口单位不会去考虑当前盒子的父盒子，只是相对于其所处的当前视口而言的。可以看到，这并没有占满屏幕的整个高度，他是默认根据内容来撑起来的。修改 index.html。
2024-03-18 18:37:24
350
原创 【Vue3+TypeScript】CRM系统项目搭建之 — Element-Plus集成
首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件。然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中。这里使用按需自动导入组件。这里是 vite 的项目。接下来就可以直接使用了。
2024-03-18 18:18:26
369
原创 【Vue3+TypeScript】CRM系统项目搭建之 — 区分 development 和 production 环境
服务器地址，线上环境和开发环境一般是用的不是同一台服务器，那为什么不用同一台服务器呢？因为在开发阶段，前后端开发是会对服务器进行各种操作的，是及其不稳定的，因此这个在开发过程中使用的服务是测试服务器，当开发到一个稳定的版本的时候，就可以部署到生产服务器，这个生产服务器是给到用户去使用的，是不可以进行十分频繁的修改的，这样是及其不稳定的。很明显，这个方式是十分依赖于开发过程中人的修改，如果出现人为失误，这是一个十分危险的操作，这有很大的隐患性。那么，如何可以自动区分开发环境和生产环境呢？
2024-03-18 15:10:59
554
原创 【Vue3+TypeScript】CRM系统项目搭建之 — Axiox 网络请求封装
综上所述，虽然技术上GET请求可以包含请求体，但出于上述原因，通常不建议在GET请求中包含请求体。在HTTP协议中，GET请求通常用于请求数据，而POST请求则通常用于提交数据。使用 vue 开发时，频繁使用到了 axios 这个网络请求库，这里对其做一个发起请求时携带参数方式的小结。注意：POST 请求的有参、无参请求与如上的 GET 是一样的，只不过是请求方式名换一下。如果使用 Axios 的 POST 请求的简写形式，需要将数据以 JSON 格式传递。，可以是可以有请求体body的,但是不建议带。
2024-03-17 23:38:24
811
原创 【Vue3+TypeScript】CRM系统项目搭建之 — 状态管理
前面完成了路由的基本的配置工作，现在进行项目的状态管理的配置，这里使用到的是。
2024-03-17 22:42:40
300
原创 【Vue3+TypeScript】CRM系统项目搭建之 — 路由配置
前面完成了项目的结构划分，也进行了样式的重置以及全局变量的配置，现在开始该项目的路由配置。
2024-03-17 22:02:58
373
1
原创 【Vue3+TypeScript】CRM系统项目搭建之 —项目目录结构的划分
完成了前面的对于团队项目代码的规范检测后，接着对项目进行目录结构的初步划分如下：
2024-03-17 20:30:42
348
原创 【Vue3+TypeScript】CRM系统项目搭建之 — 代码规范
比如在 prettier 中规定在代码保存的时候自动格式化代码，使得所有得单引号变为双引号，但是我们在 eslint 中规定的是，不可以是双引号。完成如上配置之后，当代码保存的时候，eslint 就会按照 pretter 里面的这个保存规范来进行代码风格检测了。在前面创建项目的时候，我们就选择了ESLint，所以Vue会默认帮助我们配置需要的ESLint环境。等语言，基本上前端能用到的文件格式它都可以搞定，是当下最流行的代码格式化工具。这个就配置了解除对声明但未被使用的变量的警告。安装 prettier。
2024-03-17 19:58:28
792
转载 循序渐进引入 jsx 文件写法和函数式组件写法
打开 Vue3 的官方文档，它首先会告诉你，Vue的组件可以按两种不同的风格书写：选项式API和组合式API。文档为我们提供一系列两种风格的代码参考，供我们按照偏好进行选择。实际上，Vue3 组件可不止两种写法，而是多达十几种！然而，不管是什么写法，它们都是基于同一个底层系统实现的，概念之间也是彼此相通的，只是使用的接口不同。在实际开发中，我们也不会同时使用到那么多种写法，但是这并不意味着我们不需要去了解这些写法！
2024-02-06 12:20:03
101
原创 v-for 遍历图片的时候，正常写法 src 路径读不出来
注意这里面的相对路径是相对于当前这文件而言的图片相对路径，不是相对渲染组件而言的。进行遍历的时候，正常写的相对路径引入，结果页面引入图片资源失败了。这是之前指定路径的方式。
2024-02-05 09:48:24
450
原创 如何显著提高 GitHub 的访问速度
GitHub是全世界最大的同性交友平台，但是在中国，访问起来是十分慢的，很多人会使用魔法，但是魔法是要钱的，因此这里有一种不要钱的解决方案，在这里分享出来，emmm… 不过不知道会不会帮助到你，总之这段时间，我确实感到了访问速度的提高。
2024-02-03 09:51:04
864
1
原创 2670.找出不同元素数目差数组-力扣(LeetCode)
感谢《LeetCode》平台给你一个下标从 开始的数组 ，数组长度为 。 的 不同元素数目差 数组可以用一个长度为 的数组 表示，其中 等于前缀 中不同元素的数目 减去 后缀 中不同元素的数目。返回 的 不同元素数目差 数组。注意 表示 的一个从下标 i 开始到下标 结束的子数组（包含下标 和 对应元素）。特别需要说明的是，如果 > ，则 表示一个空子数组。输入：输出：解释：对于 i = 0，前缀中有 1 个不同的元素，而在后缀中有 4 个不同的元素。因此，diff[0]
2024-01-31 22:41:22
908
原创 原来 React 搭档 TailwindCSS 会这么好用
TailwindCSS中文文档|TailwindCSS中文网可不是来吹风的，它是个“实用至上”的CSS框架。不像其他框架那样，给你一堆组件让你去挑选，提供了一堆小巧精致的工具类，可以让你自由组合。它的核心理念就是“功能类优先”，也就是说，每一个class都代表了一个CSS属性，这可真是把“原子化”发挥到了极致。而且，它还支持响应式设计，可以根据不同的屏幕尺寸，自动调整样式。同时，它还支持暗黑模式。React官方中文文档React是一个用于构建用户界面的JavaScript库，由Facebook。
2024-01-31 15:54:30
908
原创 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
378
原创 【HTML+CSS+JavaScript】Animated Navigation
【代码】【HTML+CSS+JavaScript】Animated Navigation。
2024-01-30 18:52:48
330
原创 【HTML+CSS+JavaScript】animated-countdown
【代码】【HTML+CSS+JavaScript】animated-countdown。
2024-01-30 18:47:18
334
原创 【HTML+CSS+JavaScript】3d-boxes-background
【代码】【HTML+CSS+JavaScript】3d-boxes-background。
2024-01-30 18:41:30
350
原创 【尚硅谷Vue3入门到实战，最新版vue3+TypeScript前端开发教程】学习笔记
也得到了一个最佳实践的结论：监视对象里面的属性，最好是写成函数式，注意点：如果在关注监视对象的地址值的同时还需要关注该对象内部的值的变化，则需要手动开启深度监视。定义的对象类型数据的时候，将对象名写到 watch 的第一个参数中时，其实我们监视的是对象的地址，只有当这个对象的地址改变了，才会触发监视，因此这个时候我们可以开启深度监视，此时修改这个对象里面的属性的时候，就能触发监视逻辑，但是有趣的是，当我们修改被监视对象的属性的时候，可以发现。这个返回的函数就是用来取消对数据的监听的，从而停止执行回调函数。
2024-01-30 18:16:03
959
原创 uni-app 踩坑实录
当项目使用的是 scss 预处理器的时候，结果设置的一些全局性质的样式没有生效，这时候，检查一下 App.vue 的。当编写了全局相关的 scss 文件后，就可以到这里进行导入即可，就用不着到各个页面导入。
2024-01-30 18:08:52
307
原创 CSS预处理器之Sass
*`:root` 伪类选择器用于选择文档根元素，对于 HTML 文档来说，它选择的是 `<html>` 元素。在这里，它定义了全局的 `CSS` 变量。*/:root {/*`body` 选择器选择了页面的 `<body>` 元素，这里定义了其他全局的 `CSS` 变量。*/body {/*`.header` 选择器选择了页面的 .header 类元素，这里定义了 header 元素区域的 `CSS` 变量*/.header {定义规则变量以开头，后跟变量名。
2024-01-24 08:46:49
893
1
原创 虽迟但到的项目总结【尚品汇前台项目 巩固你的坤本功】
还是那个炎热的暑假，懵懵懂懂地开始学习这个商城的前台项目，没有一点收获感，刚好到了寒假，我决定重新复盘复盘这个项目，正好也有项目组的小伙伴陪伴，一起复盘。
2024-01-14 09:25:26
557
原创 VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
/ 全局指令 focusel.focus()})
2024-01-10 22:31:14
473
1
原创 JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 （剩余参数）、拓展运算符、对象与数组的解构赋值】
嘟三~ 嘟三~ 今日份广播题目：“怎么让JavaScript越来越6”。接下来，小菜鸡本人将和大家一起来探讨ES6-ES13的那些酷酷的新特性，从这次广播开始，你也可以炫耀：“这个ES新特性我都用得溜溜的！
2024-01-08 00:41:43
892
原创 JavaScript编码之路【ES6新特性之 Symbol 、Set 、Map、迭代器、生成器】
嘟三~ 嘟三~ 今日份广播题目：“怎么让JavaScript越来越6”。接下来，小菜鸡本人将和大家一起来探讨ES6-ES13的那些酷酷的新特性，从这次广播开始，你也可以炫耀：“这个ES新特性我都用得溜溜的！// 不能这样获取。
2024-01-07 23:07:42
765
原创 JavaScript编码之路【ES6新特性之Class类】
嘟三~ 嘟三~ 今日份广播题目：“怎么让JavaScript越来越6”。接下来，小菜鸡本人将和大家一起来探讨ES6-ES13的那些酷酷的新特性，从这次广播开始，你也可以炫耀：“这个ES新特性我都用得溜溜的！按照构造函数形式创建类，不仅仅和编写普通的函数过于相似，而且代码并不容易理解。因此在新的标准中使用了class关键字来直接定义类，但是，其实这只不过是一个糖衣炮弹【原名：语法糖】，其核心元素是构造函数和原型链。所以学好了构造函数、原型链更有利于去理解类的概念和i其继承关系。
2024-01-07 17:18:45
843
原创 JavaScript编码之路【ES6新特性之模块化】
这是专门针对浏览器端设计的，跟它名字一样，可以异步加载你的模块。它手里有两个武器 “define” 和 “require”，听起来跟CommonJS差不多，可实则不然，这娃子可是异步加载的，不像CommonJS那样会阻塞，性格活跃开朗，给它个大大的赞！，听我说，这就类似于，作为一个孤胆英雄的模块，我就独自上场吧，那你作为引入方，直接用 import 声明一个变量，相应地引入我就行了。是不是很厉害，就像是开了挂，来来去去就那么几行代码，动不动就能加载和导出任何模块，令人惊叹，这就是开挂的生活，我太羡慕了！
2024-01-07 13:15:20
887
原创 Vue之异步组件【探究 Vue 的异步组件的魔力所在】
有时候，你可能会全力以赴，走最长的路。但是正是你的选择塑造了你的代码，你的应用，甚至你的职业生涯，去打开新世界的大门，加油，冒险家！幸运的是，JavaScript 提供了 Async 和 Await ，让你的代码变得更直观，更像是同步的方式处理异步，让你摆脱回调地狱。例如我们有货真价实的“瞬时移动术”，这是一个非常重的技能，需要大量的内存，而在大多数的情况下，我们其实并不需要它。嘘 ~，我们有个“信鸽术”组件，这个组件是从数据库中获取信息，然后显示给用户，这可就用到了 Promise 的力量了。
2024-01-06 12:48:44
353
原创 Vue之异步组件【按需加载，动态引入，乃Vue异步组件之精髓也】
搞一搞Vue的学习吧，咱们来说说Vue中的那个家伙——异步组件。这异步组件来头不小，究竟是个啥呢？它有那么重要吗？咱们一探究竟。有的时候，我们的Vue项目有些页面可能包含了大量的组件，而且每个组件又大如猪笼相同，一下子在页面加载的时候把所有组件都给用户看，这不就相当于端着大猪笼去赶集嘛。于是，我们就想到了按需加载。想用啥，就加载啥，用不着的东西，先放放。这就是Vue异步组件的来历。使用异步组件的话，可以大大减少首页加载需要的时间，网页反应会更快，用户也会得到更好的体验。异步组件就是我们的Vue项目中，需要但
2024-01-06 12:31:34
401
原创 Vue之Mixin【一种代码重用机制】
代码重用：通过将共同的代码提取到一个 Mixin 中，可以避免在多个类中重复编写相同的代码，从而提高代码的可维护性和可读性。功能扩展：使用 Mixin 可以在不修改原始类的情况下，向类中添加新的功能或行为。这对于已经在使用的类特别有用，因为你可以通过添加 Mixin 来扩展其功能，而无需修改现有代码。灵活定制：Mixin 允许你根据具体需求组合不同的功能，从而创建出具有特定行为的类。你可以选择应用一个或多个 Mixin，以及自定义 Mixin 的实现，以满足项目的特定要求。更好的代码组织：Mixin 有助于
2024-01-06 10:19:31
1010
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人