- 博客(75)
- 资源 (16)
- 收藏
- 关注
RSS订阅原创 Vue3最佳实践 第八章 ESLint 与 测试 (TypeScript 中Jest与检测环境集成)
Vite 已经发布很久了现在Vue3和Vite的生态正在蓬勃发展，现在很多项目中都用到了Vite +vue3+TypeScript技术栈，进行企业级的项目开发。本文将一步步帮助你创建一个标准的Vite + Vue3 + TypeScript+Jest企业级开发与测试环境。
2023-10-30 09:44:31
468
1
原创 Vue3最佳实践 第八章 ESLint 与 测试 ( Jest )
在前端项目开发过程中，有很多时候也会要进行测试工作。本文将重点介绍如何利用 JavaScript 测试框架 Jest 进行高效的测试。Jest 是由 FaceBook 开发的顶级测试框架之一，广受开发者们的欢迎和信赖。在接下来的内容中，我们将通过简明扼要的解释和代码示例，向大家展示如何使用 Jest 这个强大的测试工具。无论你是初学者还是有经验的开发者，都能从下面的内容中获得深入的理解和实践的启发。
2023-10-30 09:28:03
1244
3
原创 Vue3最佳实践 第八章 ESLint 与 测试 ( ESLint )
在所有的JavaScript 项目开发中我们都会接触到 ESLint 这个词，ESLint 是个什么样的组件会给为项目做些什么吗？ESLint 是一种检查语法错误以及代码是否按照预定规则编写的工具。ESLint 可以帮助开发者发现代码中潜在的错误。在Vue项目中Eslint一般都会配合其他语法检测工具一起使用，最经典的组合是Eslint+ Prettier。Eslint 和 Prettier 并不局限于 Vue.js，而是掌握 JavaScript 的必备知识，所以推荐给不懂 ESLint 的同学。
2023-10-18 12:01:22
2150
1
原创 Vue3最佳实践 第七章 TypeScript 创建Trello 任务管理器
我们将探讨如何使用Vue.js从零开始创建一个类似于Trello的任务管理应用程序。如果你不熟悉Trello，它是一款非常流行的任务管理工具，允许你把任务写在卡片上，然后通过一个看板的方式来直观地管理这些任务。Trello不仅可以用于个人的任务管理，还可以作为团队协作工具，在许多公司和组织中得到了广泛的应用。我们的目标是创建一个具有Trello核心功能的应用程序，包括创建任务卡片，以及通过拖放操作来移动这些卡片，以此来改变任务的状态或优先级。
2023-10-07 10:01:20
485
1
原创 Vue3最佳实践 第七章 TypeScript 中
在Vue组件中，我们可以使用TypeScript进行各种类型的设置，包括props、Reactive和ref等。下面，让我们详细地探讨一下这些设置。
2023-10-07 09:40:11
470
1
原创 Vue3最佳实践 第七章 TypeScript 上
在浏览网上的JavaScript相关文档时，大家可能已经注意到了一个趋势：越来越多的项目和教程都采用了TypeScript编写代码。对于那些没有TypeScript经验的人来说，阅读这些由TypeScript编写的代码可能会感到有些压力。Vue3的出现无疑加剧了这种趋势。Vue3本身就是用TypeScript编写的，因此我们可以直接在Vue3中使用TypeScript，无需进行任何特殊设置。在实际的大型项目开发中使用TypeScript编写的情况会越来越普遍。
2023-10-07 09:39:19
594
1
原创 Vue3最佳实践 第六章 Pinia,Vuex与axios,VueUse 4（axios）
axios 是一个基于 Promise 的 HTTP 客户端，不仅可以与 vue.js 一起使用，还可以与其他前端框架以及后端 Node.js 一起使用。当你想从包括后端服务器在内的外部服务获取数据时，可以使用axios 中的方法很方便的获得数据内容。在本文档中，我们将介绍如何在 vue.js 版本 3 的环境中使用 axios。对于 Vue 3，它不仅解释了如何将它与 Options API 一起使用，还解释了如何将它与 Composition API 一起使用。
2023-09-27 08:52:14
817
1
原创 Vue3最佳实践 第六章 Pinia,Vuex与axios,VueUse 3（VueUse ）
使用VueUse，可以通过执行导入函数返回的变量和函数，在导入组件中使用导入函数的功能。这样就完成了可组合函数的创建。特别是对于组件，有些人一开始可能会感到困惑，因为它们使用的是 scoped slots，但是一旦你理解了如何传递和接收值，我认为创建它们的难度与函数并没有那么大的不同。使用可组合函数时，我们将反应性数据和函数从可组合函数传递给导入的组件。如果你看一下VueUse的功能，有一些你可以自己创建，但是注册的功能有100多个，所以如果你没有使用它的经验，请浏览一遍，看看有没有你的功能可以用。
2023-09-27 08:50:12
768
1
原创 Vue3最佳实践 第六章 Pinia,Vuex与axios,VueUse 2（Vuex）
Vuex 是一种集中管理所有组件中数据的机制。它和Pinia一样都是解决使用 props 和 $emit 事件在组件之间传递数据时，当组件之间频繁传递，层级增加时管理数据就变得困难。Vue 的官方状态管理库已更改为Pinia，Pinia 具有与 Vue 几乎完全相同它还增强的很多API的功能。Vuex 虽然仍在维护中，但是它不会在添加的新功能了，Vuex 应用程序迁移到 Pinia它可能会是一个更好的选择。在这里我们还会讲解一下Vuex 的使用方法，以方便大家在迁移Vuex的时候更加方便。
2023-09-27 08:44:42
773
1
原创 Vue3最佳实践 第六章 Pinia,Vuex与axios,VueUse 1（Pinia）
在 Vue3 中项目中组件之间传递数据时，可以使用 Props 和 Emit，还可以使用 Provide/Inject 来代替 Props 和 Emit。Props 和 Emit 只能在具有父子关系的组件之间传递数据，所以层级越深，过程就越复杂。为了解决此类问题需要一种在所有组件之间共享数据的机制（State Management）。在原来的Vue世界中Vuex 以全局状态管理库着称，但是现在出现了一个新的存储库 Pinia，现在所有Vue3创建的新项目都建议使用 Pinia。
2023-09-27 08:44:04
1781
1
原创 Vue3最佳实践 第五章 Vue 组件应用 5 (Vue 插件)
想了解Vue插件所以你看了官方文档却看不懂，或者你想知道Vue.use()方法和插件的关系。在本文档中，我们将参照文档讲解插件制作的基础知识，了解基础知识后，我们将制作与更实用的下拉菜单和脚本加载相关的插件。读完之后，您应该知道如何创建自己的插件以及如何添加插件。
2023-09-20 09:57:16
479
1
原创 Vue3最佳实践 第五章 Vue 组件应用 4 ( provide 和 inject )
前面的知识告诉我们vue中组件之间传递值需要使用props来完成，但是props也有一定局限性。这个时候在vue3中还有另外的解决方法。那就是使用 provide 和 inject 允许父组件将数据传递给所有后代组件，而不管组件层次结构有多深。你要做的很简单，就是Props 可用于将数据从父组件传递到子组件。但是，如果从父组件到子组件传递数据的层次很深，使用props就很麻烦了。
2023-09-20 09:55:47
411
1
原创 Vue3最佳实践 第五章 Vue 组件应用 3( Slots )
要查看更多使用 Scoped Slots 的方法，我们将了解如何使用简单代码自定义表格。创建一个可重用的子组件 Table.vue。从父组件接收包含 headers 和 items 信息的 props 数组，并将其显示为表格。
2023-09-20 09:54:53
1337
1
原创 Vue3最佳实践 第五章 Vue 组件应用 2 ( Emit )
本章带领大家理解组件、props、emits、slots、providers/injects，Vue 插件 等Vue组件使用的基础知识。
2023-09-20 09:48:48
1508
1
原创 Vue3最佳实践 第五章 Vue 组件应用 1( Props )
本章带领大家理解组件、props、emits、slots、providers/injects，Vue 插件 等Vue组件使用的基础知识。
2023-09-20 09:48:07
532
4
原创 Vue3最佳实践 第四章 VUE常用 UI 库 2 ( ailwind 后台框架)
上面介绍的都是国内比较优秀的UI框架，现在我们在介绍一款国外比较流行的CSS UI框架ailwind 。官方网站https://tailwindcss.com/docs/guides/vite#vue CSShttps://flowbite.com/docs/getting-started/introduction/ 。这个ailwind 架构需要自己去写一些基础组件功能，它只提供了UI样式，所以扩展新和二次开发能力比较强，适合更高水平的开发者使用。
2023-09-07 16:07:05
1169
1
原创 Vue3最佳实践 第四章 VUE常用 UI 库 1 ( element-plus,Ant ,naiveui,ArcoDesign)
现在常用的前台UI 分别是以下几种，我们将从中间选择介绍几个主流的UI的用于后台的系统搭建与开发。
2023-09-07 15:37:43
1771
1
原创 Vue3最佳实践 第三章 Vue Router路由器的使用
Vue Router 是 Vue.js 的官方路由器。通过使用 Vue Router，你可以构建一个包含多个页面的应用程序。它可以样多个页面之间流畅地跳转，而无需每次移动到另一个页面时都要重新加载整个页面。Vue Router 路由是使用 Vue.js 构建单页应用项目的必备库。官网地址https://router.vuejs.org/zh/introduction.html由一个 HTML 页面组成的应用程序称为单页应用程序 (SPA)。
2023-09-07 14:01:35
1071
1
原创 Vue3最佳实践 第二章 Vue3 基础语法指令
本章主要介绍vue3中的基础指令使用方式和一些开发技巧。分为基础指令，逻辑指令，列表指令，事件，MVVM数据绑定与监听。本章中所有代码例子都是在使用Vite 创建的 vue项目中来完成的。
2023-09-07 13:18:18
738
1
原创 Vue3最佳实践 第一章 Vue3项目创建 3 (Vite 创建 vue项目 )
目前，Vue.js 官网建议在创建新项目的时候要使用 Vite 而不是 Vue CLI，尽量在开发环境中以 Vite 它作为 Vue.js 的编译基础来使用。Vite 是 Vue.js 作者Evan You 制作的 webpack 的无捆绑替代品，Vite + vue 方式很可能会成为未来的vue项目主流方式。Vite官网 https://cn.vitejs.dev/地址。Vite 是一种新型前端构建工具，能够显著提升前端项目开发效率。它主要由两部分组成。
2023-09-07 13:16:20
1114
1
原创 Vue3最佳实践 第一章 带你深入了解Vue3项目创建 1 (Vue CLI 创建vue项目)
Vue.js是一款广受欢迎的JavaScript框架，专为创建网站、web应用程序和管理系统等前端用户界面(UI)设计。其流行不仅因为它拥有庞大的开发者社区和丰富的学习资源，还因为它具有低学习成本和易于上手的特点。当你在使用中遇到疑问或困难时，可以轻松地找到各种解决方案和指南，这是Vue.js成为当前最主流开发框架的重要原因之一。现在，我们主要使用三种方法来创建Vue3项目，分别是Vue CLI，Webpack和Vite。接下来，我将为你详细介绍每种方法创建Vue项目环境的步骤。
2023-09-07 13:13:40
556
1
原创 Vue3最佳实践 第一章 带你深入了解Vue3项目创建 2 (使用 Webpack 5 搭建 vue项目)
在之前的文章中，我们已经了解了如何使用Vue CLI来创建Vue项目的开发环境。现在，大家已经可以轻松地运用Vue CLI来构建自己的Vue项目了。然而，你可能仍然对背后的工作原理感到困惑。接下来，我将引导你们在不使用Vue CLI的情况下，如何创建一个Vue项目环境。我们将使用Webpack工具和它的一系列打包组件来编译和打包Vue模板文件及其相关的代码。我会详细介绍如何安装Webpack，以及它是如何打包Vue模块的，并且每个步骤都会进行详尽的解释。
2023-09-07 13:03:33
726
1
原创 【Springboot 入门培训 】#19 Spring Boot 组件扫描与bean生命周期
为了进行依赖注入，Spring 创建了一个所谓的应用程序上下文。在启动期间，Spring 实例化对象并将它们添加到应用程序上下文中。应用程序上下文中的对象称为“Spring beans”或“组件”。Spring 解决了 Spring bean 之间的依赖关系，并将 Spring bean 注入到其他 Spring bean 的字段或构造函数中。那么，什么是组件扫描呢？组件扫描就是Spring框架用来发现并自动注册你的应用程序中的bean的方式。
2023-05-29 15:28:48
1155
1
原创 【教程】用 HTML JavaScript 制作 2.5D 迷宫游戏地图
我写了一个能够随机生成迷宫的算法，得到了用户很好的反响，对大家有所帮助。我现在想将这个迷宫以2.5D游戏地图的方式呈现出来。最初我考虑使用CSS来实现这个目标，但效果并不太理想，因为我无法只将它渲染成背景，而不对整个网站进行重新排版。因此，虽然我不打算继续使用CSS来达到这个目标，但我想与大家分享如何使用CSS来按比例渲染迷宫的方法。后来，我决定使用HTML5画布功能和地图块的坐标变换来生成2.5D游戏地图。为此，我在JavaScript脚本中添加了坐标变换的脚本，分享出来希望能对大家能有所帮助。在文章
2023-05-11 10:47:09
2712
2
原创 JavaScript 特性 this与“bind“和“call“，“apply“的理解
本文的目的是帮助JavaScript初学者更好地理解"bind"方法，并帮助那些对"this"的理解不太清楚的人更好地理解"bind"方法和"this"之间的关系。特别是对于那些对"this"的理解不太清楚的人是有所帮助的。在深入学习"bind"方法之前，先查看一下MDN Web Docs中的说明。"bind"方法可以生成一个新的函数，当新函数被调用时，"this"关键字将被设置为指定的值。如果您不理解"bind"方法，即使阅读了上述说明，也可能不知所云。
2023-05-08 16:40:50
927
1
原创 JavaScript中的Object.assign与Getter,Setters 和 definePropert使用
本文介绍关于JavaScript中操作元素对象的Object.assign与Getter,Setters ，definePropert方法。通过对这些概念的理解，能帮助大家更好的理解在JavaScript中项目开发中我们是如何使用这些概念。这些基础概念也是现代JavaScript开发中必知必会的知识点，掌握它们对提供项目代码质量有很大的帮助。
2023-04-04 08:47:38
894
2
原创 JavaScript 中Proxy（代理）和Reflect（反射）基础知识
最近在Vue3项目开发中，我们经常使用与Proxy和Reflect相关的函数。这些函数以各种形式出现在Vue3 Reactivity函数、各种库和框架中。然而，对于JavaScript Proxy的概念和使用方法，许多人可能不太熟悉。因此，下面我将通过一个例子来更好地解释Proxy和Reflect的使用方法。Reflect和Proxy是EC6引入的两个新功能，可以帮助开发人员更轻松地操作和控制对象。
2023-03-31 13:04:33
1302
3
原创 大家如何理解JavaScript 中的Destructuring 使用
JavaScript 中已经推出了解构赋值（Destructuring Assignment）语法，它允许我们通过 const {name, dept } = user 这样的语句，将 user 对象中的 name 和 dept 属性提取出来并分别赋值给变量 name 和 dept。如果您习惯于使用 user.name 和 user.dept，那么一开始可能会感到非常迷惑，但是你可以使用 { } 将用户对象中的 name 和 dept 属性分别分配给 name 和 email 变量。
2023-03-31 09:53:05
422
1
原创 让大家都能理解 XMLHttpRequest
XMLHttpRequest 是一个 JavaScript 对象，它能够在浏览器和 Web 服务器之间发送和接收数据。即使在从 Web 服务器读取了所有数据之后，XMLHttpRequest 仍然可以发送和接收数据，从而实现不重新加载页面就能够重写页面内容的功能。在当今的 Web 服务中，使用 XMLHttpRequest 发送和接收数据是非常必要的。
2023-03-30 09:44:50
2948
4
原创 [ES6] 理解JavaScript中 map、forEach、filter 和 find 与箭头函数的使用
如果你是一个刚开始学习 JavaScript 的人，你可能会觉得编写箭头函数很容易。但如果在箭头函数出现之前你已经习惯了 JavaScript 的写法，那么在你适应之前，每次遇到箭头函数时，你可能需要上网搜索箭头函数的语法或整理笔记。我相信很多人都有这样的经历。然而，一旦你适应了箭头函数的写法，你就可以写出更简洁的代码，以至于在以后你可能会忘记传统的写法。在本文中，我们将讲解如何使用箭头函数和 map、forEach、find、filter 函数，帮助你掌握箭头函数的编写方法和各个函数的使用方法。
2023-03-24 15:29:28
2098
1
原创 JavaScript 中的Promise 函数
在现在的前端开发中我们常常会使用到 JavaScript Promise 函数，但是很多人都不能正确理解Promise 的是什么，只是听说过Promise 这个词。我们将通过下面的简单例子与一些实例代码来解释一下Promise，样大家能更好的理解。在学习Promise的时候，往往会和同步、异步等词一起出现。很多初学JavaScript的人，因为他们不理解异步和同步，导致了它们同时也不能正确理解Promise原理。
2023-03-21 10:34:47
1149
1
原创 HMTL中使用js代码RequireJS 模板化与分层
现在的Node 开发中我们都会用到require 函数，将Node js打包生成为前端js后，前端js依然会有require 函数的存在。它会帮助我们把前端生成的javasricpt 代码进行模块化处理。如果需要在打包后的代码中修改，就需要理解require 函数的运行模式与原理。在服务器端（Node）和前端（JavaScript）开发编码中require 函数会有很大的差异，但是它们的开发思想是基本相同的，这样导致很多时候开发者在使用的时候很容易混淆它们。
2023-03-01 11:06:00
1141
原创 Q Learnin 关于机器人在巡检与点检中的最佳路线获得
本文简单介绍了在工厂生产环境中，使用巡检与点检机器人的时候，机器人的路线选择问题。通过使用Q Learnin 算法中的，随机，奖励，行为等状态训练，来完成每次任务的路线选择。
2022-10-24 11:49:09
1115
7
原创 【Springboot 入门培训 】#18 SpringBoot Cache 缓存实现
介绍几个 Spring Boot项目中使用到的主流缓存技术。
2022-10-18 10:07:29
1253
3
原创 【Springboot 入门培训】# 17 WebJars + BootStrap5 常用JS组件应用
在传统的前后一体项目开发中，大部分人会使用到BootStrap加其它JS组件的配合方式来完成页面UI功能的实现。下面介绍几种后台开发中常用到的几个JS库的使用方法。
2022-10-18 10:04:39
2316
1
原创 WPF 项目开发入门（十）DevExpress 插件+NHibernate 登录实现
WPF开发中最常使用的是DevExpress 插件。下面实现一个DevExpress 插件+NHibernate 操作数据库开发一个简单的用户登录与菜单框架页面功能。
2022-09-07 10:22:57
2219
1
Zhtbs WebJars + BootStrap5 后台常用JS组件应用
2022-10-14
sringbootWebjars+bootstrap5 实例代码
2022-06-27
Springboot入门培训 9 登录过滤器 Security 初始化例子.zip
2021-09-06
(Framework7 移动webapp) Springboot 入门培训 7 页面路由跳转.zip
2021-08-16
spring boot mybatis 多数据源与缓存.zip
2021-07-28
kendoDome.zip
2021-07-05
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人