- 博客(327)
- 资源 (5)
- 收藏
- 关注
RSS订阅
原创 前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 系列文章(目录)
前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章的文章目录
2023-11-20 10:14:28
653
原创 前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第十二章 常用工具函数 (Utils配置)
在项目开发中，我们经常会使用一些工具函数，也经常会用到例如loadsh等工具库，但是这些工具库的体积往往比较大，如果项目本身已经引入了这些工具库，那么我们就没有必要再引入一次，所以我们需要自己封装一些工具函数，来简化我们的开发。工具函数的封装，可以提高代码的复用性，降低维护成本，本文只是介绍了一小部分工具函数的封装，更多的工具函数的封装，可以参考lodash等函数工具库，也可以根据实际需求，封装自己的工具函数。上文中的配置代码可在github仓库中直接copy。
2024-02-19 09:35:30
921
原创 前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第十一章 基础界面开发 (组件封装和使用)
Vue 是前端开发中非常常见的一种框架，它的易用性和灵活性使得它成为了很多开发者的首选。而在 Vue2 版本中，组件的开发也变得非常简单，但随着 Vue3 版本的发布，组件开发有了更多的特性和优化，为我们的业务开发带来了更多便利。本文将介绍如何使用 Vue3 开发业务组件，并通过代码实例进行演示。通过以上的介绍和代码实例，我们可以看到 Vue3 提供了更多的特性和优化，让我们更加方便地开发业务组件。在实际开发中，我们可以根据实际需求选择合适的组件开发方式，并通过 Vue3 的特性来提升开发效率.。
2024-02-19 09:34:14
665
原创 如何在 vue 项目中创建 svg 组件
在Vue项目中，SVG是一种非常常见的图像形式。与传统的矢量图像不同，SVG可以设置可缩放且清晰度高的图像形式。Vue使得使用SVG组件非常容易，本文将介绍如何在Vue项目中创建SVG组件。
2023-12-01 09:36:38
597
原创 前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第十章 请求配置 (Axios请求和响应拦截)
本文介绍了在Vue项目中使用axios进行HTTP通信的方法。首先详细介绍了axios的安装和配置方法，包括npm或yarn安装以及文件请求的简单示例。然后讲解了axios拦截器的作用和使用方法，分别介绍了请求拦截器和响应拦截器的使用。接着讲解了对axios请求的封装，包括config、types和http三个文件的具体内容，以及如何使用封装好的BaseRequest类进行请求。最后，介绍了mockjs的作用和安装配置方法，展示了mock的使用测试请求。
2023-11-27 15:49:11
1276
原创 前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第九章 登录开发 (Pinia的使用和数据持久化)
本文介绍了简单介绍了如何在项目中使用 `Pinia`。其优势包括支持 `dev-tools`、热模块更换、插件扩展、提供良好的 `TypeScript` 支持和服务器端渲染支持等。介绍了如何安装和配置 `Pinia`，以及使用 `pinia-plugin-persistedstate` 插件可实现数据持久化，提升系统稳定性和用户体验。上文中的配置代码可在 `github` 仓库中直接 `copy`。
2023-11-24 10:16:38
1464
2
原创 前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第八章 Layout组件 (Element-Plus的使用)
本文继续项目的开发，增加了登录页面和 Layout 组件，并实现了路由的跳转，接下来我们就可以进行菜单的开发以及业务逻辑的开发了，不过在开发之前，我们要先使用 pinia，来对项目做状态管理。上文中的配置代码可在 `github` 仓库中直接 `copy`，仓库路径：[https://github.com/SmallTeddy/testing-web](https://github.com/SmallTeddy/testing-web)。
2023-11-23 14:44:20
1290
1
原创 前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第七章 路由配置(vue-router深入解读)
本文深入解读了 `vue-router` 的各个属性，并结合代码示例进行了详细演示，为您提供了全面的理解。通过本文，您可以更好地掌握 `vue-router` 的核心概念和功能。上文中的配置代码可在 `github` 仓库中直接 `copy`，仓库路径：[https://github.com/SmallTeddy/testing-web](https://github.com/SmallTeddy/testing-web)。
2023-11-22 11:27:29
2333
2
原创 前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第六章 样式格式化 (Sass配置)
本文主要介绍了如何安装 `sass` 并在 `package.json` 中确认安装成功，创建了 `styles` 文件夹，并添加了 `variables.module.scss`、`transition.scss`、`element.scss` 和 `index.scss` 文件，安装了 `normalize.css` 并在入口文件 `main.ts` 中引入，修改了 `App.vue` 文件以测试样式应用。上文中的配置代码可在 `github` 仓库中直接 `copy`，仓库路径：[https://g
2023-11-20 16:08:30
1044
1
原创 前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第五章 组件库安装和使用(Element-Plus基础配置)
在本篇文章中，介绍了使用 `Element-Plus` 组件库进行开发时的安装和快速开始流程。文章中首先介绍了 `Element-Plus` 组件库的优势，包括一致性、反馈、效率和可控性。接着详细说明了安装 `Element-Plus` 的步骤，以及在代码中的快速开始指南。随后，对自动引入和自定义配置 `Vite` 和插件进行了详细讲解。最后，在测试组件可用性前，进行了一些文件的删除以保证项目的纯净度，并通过示例代码演示了组件库的使用。
2023-11-20 15:29:53
1064
3
原创 前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第四章 认识项目目录 (项目整体介绍)
本文简要介绍了使用 `Vite` 初始化项目之后，目录各个文件的作用，后面我们也会增加很多项目的配置文件以及对现有配置文件的修改，上文中 `README.md` 的配置可在 `github` 仓库中直接`copy`，仓库路径：[https://github.com/SmallTeddy/testing-web](https://github.com/SmallTeddy/testing-web)。
2023-11-20 11:17:20
903
原创 前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第三章 项目创建 (Vite项目初始化)
本篇文章开始，我们就要开始创建自己的项目，并进行配置和开发啦。本文介绍了如何使用Vite工具创建自己的vue项目。
2023-11-17 15:29:05
1069
原创 前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第二章 环境部署 (Node等环境安装)
磨刀不误砍柴工，再开发之前，我们需要先搭建好我们开发所需要的环境，安装好插件等，以便我们快速便捷的进行开发。Node.js 就是运行在服务端的 JavaScrip，基于 Chrome JavaScript 运行时建立的一个平台，Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境，基于 Google 的 V8 引擎，V8 引擎执行 Javascript 的速度非常快，性能非常好。
2023-11-17 11:29:36
1296
1
原创 前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第一章 技术栈简介 (开篇)
旨在帮助初学者掌握使用现代前端技术栈构建应用的基础知识和技能。在这个系列中，我们将深入探讨如何结合Vue.js、Vite、TypeScript、Pinia和Sass这些强大的工具和框架来开发现代化的前端应用。通过这个系列，我们将从零开始构建一个完整的前端项目，覆盖项目初始化、组件开发、状态管理、样式处理等方方面面。我们将介绍每个技术的基本概念，并提供实际的代码示例和最佳实践，让读者能够快速上手并建立扎实的技术基础。
2023-11-17 10:13:51
1364
8
原创 前端文件下载实现方案，Blob对象为你实现任意文件下载
本文主要介绍了如何使用Blob对象在前端实现文件下载的功能。文中首先介绍了什么是Blob对象，它表示一个二进制大型对象，可以用来表示文件或二进制数据。然后详细讲解了几种生成Blob对象的方式，以及如何通过方法生成一个对象URL，设置到a 标签的href属性实现文件下载。文末还提到了一些优化下载体验的方法,比如设置download属性、使用click方法触发下载等。掌握Blob的使用可以实现强大的前端文件下载、上传、二进制数据处理功能,是很重要的能力。本文内容通俗易懂,可以帮助读者快速理解Blob的用法。
2023-11-07 14:34:33
1757
2
原创 一文了解Vue3.3新特性
通过 defineSlots 宏定义，您可以明确指定插槽的名称、预期接收的属性类型以及在模板中使用插槽时的属性类型。您可以使用事件名作为键，参数列表的数组类型作为值，以指定事件的参数。Vue 3.3 引入了 defineModel 宏定义，可以自动注册 prop，并返回一个可直接修改的 ref，简化了双向绑定的使用方式。除了这些特性之外，Vue 3.3 版本还进行了一些维护基础设施的改进，以提升构建速度、测试速度和类型生成速度，并引入了全面的回归测试。的组件中使用导入的类型，并支持一些复杂类型。
2023-07-14 14:06:09
575
原创 深入浅出搞懂JavaScript中的变量提升和函数声明提升
什么是变量提升？变量提升是当栈内存作用域形成时，JS代码执行前，浏览器会将带有var, function关键字的变量提前进行声明 declare (值默认就是 undefined)，定义 defined (就是赋值操作)，这种预先处理的机制就叫做变量提升机制也叫预定义。在变量提升阶段：带 var 的只声明还没有被定义，带 function 的已经声明和定义。所以在代码执行前有带 var 的就提前声明。
2023-05-17 01:42:25
1427
1
原创 线上项目缓存导致数据不一致问题解决方法
项目做了cache缓存，用户登录之后，会将table的列表项缓存起来，每次用户登录，会先取缓存的数据，如果没有缓存，再取代码中的数据，就导致发布项目之后，线上项目数据优先取本地缓存，导致发布后的一些数据与线上数据不一致。
2023-03-03 18:01:48
366
原创 el-table无限滚动问题解决方法
做项目的时候，二次封装了el-table 组件，但是当想让 table 高度随着内容增大而增大时，空数据的时候导致了页面无限增加高度的问题。
2023-03-03 17:45:08
2165
原创 tsconfig.json无法写入文件“xxx”，因为它会覆盖输入文件报错解决
无法写入文件“xxx”，因为它会覆盖输入文件。文件中添加如下代码配置。
2022-10-26 17:07:03
7133
原创 element-plus中el-dialog导致props报错问题解决
当我们在开发 `vue3` 项目搭配 `element-plus` 时，要使用 `el-dialog` 组件时，可能很多小伙伴是从 `vue2 + element-ui`过来的，因此在使用的时候会将 `visible` 控制显示的参数通过父组件传递进来，导致上面的报错。> tips：因为`element-plus` 删除了 `visible` 属性，因此这里要用 `v-model`，否则会报 `el-dialog` 组件上找不到 `visible` 属性的错误。
2022-10-24 23:26:06
3332
4
原创 Aria2基础使用教程
ria2 是一个轻量级多协议和多源命令行下载实用工具。它支持 HTTP / HTTPS, FTP, SFTP, bt 和 Metalink。通过内置 Aria2 可以操作 json - rpc 和 xml - rpc。对，Aria2 没有 GUI 图形界面，只有粗糙的命令行界面！但这也正是 Aria2 之轻快好省所在。Aria2作为一款Linux下的下载神器，很多极客都在使用，可以下载http资源、种-子文件、磁力链接等，功能强大，而且整合Chrome插件可以摆脱百度云盘的速度限制。Aria2具有特点：使用
2022-06-16 10:45:27
4692
9
原创 Cypress测试框架从零到一（第二篇：目录介绍）
|-- cypress| |-- fixtures| |-- integration| |-- plugins| |-- support|-- cypress.json|-- package-lock.json|-- package.json如果你的测试需要对某些外部接口进行访问并依赖它的返回值，则可以使用测试夹具而无须真正访问这个接口（有点类似 mock）测试文件就是测试用例，默认位于 cypress/integration ，但也可以配置到另一个目录所有在 integrat
2022-06-01 10:12:23
498
原创 Cypress测试框架从零到一（第一篇：下载安装）
简介采用Cypress对项目各单元进行测试，地址 -> cypress.io下载mac系统，在terminal或iterm2中win系统，在cmd或powershell中mkdir your_project && cd your_project # 创建项目目录npm install cypress --save-dev # 下载cypressnode_modules/.bin/cypress open # 运行cypress在
2022-05-31 13:36:22
474
原创 Mac上安装Nerd fonts教程
1、什么是 Nerd fonts ？Nerd Fonts 是一个使用大量字体图标来解决程序员在开发过程中缺少合适字体的问题的项目。它可以从流行的字体图标库中将大量外部字体引入待开发的项目中，它支持的字体图标库包括 Font Awesome , Devicons , Octicons , and others。Nerd fonts 就是把各种常见的 ‘iconic fonts’，打包到你常用的字体里，这样在命令行里就支持显示这些图标了。官网地址：https://www.nerdfonts.com/#
2022-05-18 21:26:45
6634
2
原创 Vim基本操作（入门篇）
1、Vim简介Vim 是一个高度可配置的文本编辑器，旨在让创建和更改任何类型的文本变得非常高效。大多数 UNIX 系统和 Apple OS X 都将它作为“vi”包含在内。Vim 非常稳定，并且不断被开发以变得更好。其特点包括：持久的多级撤消树广泛的插件系统支持数百种编程语言和文件格式强大的搜索和替换与许多工具集成2、Vim模式VIM 常用的有四个模式：正常模式 (Normal-mode)插入模式 (Insert-mode)命令模式 (Command-mode)可视模式 (V
2022-05-18 10:29:23
668
原创 Vim使用技巧（第2版）第三章笔记：技巧13 - 技巧19
第3章 插入模式技巧 13 在插入模式中可即时更正错误如果在插入模式下撰写文本时出了错，我们可以立刻对它进行更正，而无需切换模式。要迅速更正错误，除了用退格键外，我们还可以用插入模式中的其他一些命令。按键操作用途删除前一个字符（同退格键）删除前一个单词删至行首技巧 14 返回普通模式插入模式只专注于做一件事，那就是输入文字，而普通模式却是我们大部分时间所使用的模式（顾名思义），因此能快速在这两种模式间切换是很重要的。切换回普通模式的经典方式是使用
2022-05-17 23:49:52
605
原创 解决el-select远程搜索数据抖动问题
1、问题描述在选择下面项目团队，容器集群，容器堆栈，容器服务名的时候，第一次输入el-option列表会从无数据变成搜索到的数据，就像上图中，会出现数据抖动。2、解决方法<style scoped> .el-autocomplete-suggestion { display: none; }</style>...
2022-05-17 22:27:12
1661
原创 mac上安装lua
1、官网访问lua下载页面：https://www.lua.org/download.html2、源码安装lua-- 1、下载luacurl -R -O http://www.lua.org/ftp/lua-5.4.4.tar.gz-- 2、解压tar -zxvf lua-5.4.4.tar.gz-- 3、进入lua目录cd lua-5.4.4-- 4、执行make命令make-- 5、安装luasudo make all install ps：mac安装make =>
2022-05-17 11:47:52
2004
原创 Vim使用技巧（第2版）第二章笔记：技巧7 - 技巧12
第2章：普通模式技巧 7 停顿时请移开画笔就像画家只花一小部分时间涂色一样，程序员也只花一小部分时间编写代码。绝大多数时间用来思考、阅读，以及在代码中穿梭浏览。而且，当确实需要做修改时，谁说一定要切换到插入模式才行？我们可以重新调整已有代码的格式，复制它们，移动其位置，或是删除它们。在普通模式中，我们有众多的工具可以利用。技巧 8 把撤销单元切成块在 Vim 中，我们自己可以控制撤销的粒度。u键会触发撤销命令，它会撤销最新的修改。i{insert some text}<
2022-05-17 00:09:49
757
原创 mac终端iterm2配置imgcat插件直接打开图片
imgcat官网地址安装imgcat在mac下的terminal或者iterm2上运行：curl -L https://iterm2.com/shell_integration/install_shell_integration_and_utilities.sh | bashimgcat源码shell脚本安装#!/bin/bash# tmux requires unrecognized OSC sequences to be wrapped with DCS tmux;# <seq
2022-05-16 01:03:22
2026
原创 Vim使用技巧（第2版）第一章笔记：技巧1 - 技巧6
Vim笔记：技巧1 - 技巧51、简要说明1、占位符标记含义f{char}按 f，后面跟任意字符`{a-z}按`，后面跟任意小写字母m{a-zA-Z}按 m，后面跟任意小写或大写字母d{motion}按 d，后面跟任意动作命令{register}同时按 和 r，后面跟一个寄存器地址2、特殊键对照表标记含义按退出键按回车键，也写作 按控制键按制表键按切换键同时按 和 按
2022-05-14 14:55:33
947
原创 youcompleteMe unavailable: requires Vim compiled with Python (3.6.0+) support.解决方案
1、问题描述m1芯片的mac中，nvim使用vim-plug做插件管理，在安装youcompleteme后报错：youcompleteMe unavailable: requires Vim compiled with Python (3.6.0+) support.2、踩坑经历因为这里提示python版本，就下载了最新的python -> 3.10.4。将python3映射到了python上，解决了command not found：python报错。open .bash_prof
2022-05-11 00:56:13
4855
1
原型图设计 AxureRPPro8
2022-05-20
谷歌浏览器ColorConversion插件源码
2022-05-20
Iris防蓝光护眼神器（程序员必备）
2020-05-29
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人