zhtbs的博客

​Vite 已经发布很久了现在Vue3和Vite的生态正在蓬勃发展，现在很多项目中都用到了Vite +vue3+TypeScript技术栈，进行企业级的项目开发。本文将一步步帮助你创建一个标准的Vite + Vue3 + TypeScript+Jest企业级开发与测试环境。

​在前端项目开发过程中，有很多时候也会要进行测试工作。本文将重点介绍如何利用 JavaScript 测试框架 Jest 进行高效的测试。Jest 是由 FaceBook 开发的顶级测试框架之一，广受开发者们的欢迎和信赖。在接下来的内容中，我们将通过简明扼要的解释和代码示例，向大家展示如何使用 Jest 这个强大的测试工具。无论你是初学者还是有经验的开发者，都能从下面的内容中获得深入的理解和实践的启发。

​在所有的JavaScript 项目开发中我们都会接触到 ESLint 这个词，ESLint 是个什么样的组件会给为项目做些什么吗？ESLint 是一种检查语法错误以及代码是否按照预定规则编写的工具。ESLint 可以帮助开发者发现代码中潜在的错误。在Vue项目中Eslint一般都会配合其他语法检测工具一起使用，最经典的组合是Eslint+ Prettier。​Eslint 和 Prettier 并不局限于 Vue.js，而是掌握 JavaScript 的必备知识，所以推荐给不懂 ESLint 的同学。

​ 我们将探讨如何使用Vue.js从零开始创建一个类似于Trello的任务管理应用程序。如果你不熟悉Trello，它是一款非常流行的任务管理工具，允许你把任务写在卡片上，然后通过一个看板的方式来直观地管理这些任务。Trello不仅可以用于个人的任务管理，还可以作为团队协作工具，在许多公司和组织中得到了广泛的应用。我们的目标是创建一个具有Trello核心功能的应用程序，包括创建任务卡片，以及通过拖放操作来移动这些卡片，以此来改变任务的状态或优先级。

在Vue组件中，我们可以使用TypeScript进行各种类型的设置，包括props、Reactive和ref等。下面，让我们详细地探讨一下这些设置。

​ 在浏览网上的JavaScript相关文档时，大家可能已经注意到了一个趋势：越来越多的项目和教程都采用了TypeScript编写代码。对于那些没有TypeScript经验的人来说，阅读这些由TypeScript编写的代码可能会感到有些压力。​Vue3的出现无疑加剧了这种趋势。Vue3本身就是用TypeScript编写的，因此我们可以直接在Vue3中使用TypeScript，无需进行任何特殊设置。在实际的大型项目开发中使用TypeScript编写的情况会越来越普遍。

axios 是一个基于 Promise 的 HTTP 客户端，不仅可以与 vue.js 一起使用，还可以与其他前端框架以及后端 Node.js 一起使用。当你想从包括后端服务器在内的外部服务获取数据时，可以使用axios 中的方法很方便的获得数据内容。在本文档中，我们将介绍如何在 vue.js 版本 3 的环境中使用 axios。对于 Vue 3，它不仅解释了如何将它与 Options API 一起使用，还解释了如何将它与 Composition API 一起使用。

使用VueUse，可以通过执行导入函数返回的变量和函数，在导入组件中使用导入函数的功能。这样就完成了可组合函数的创建。特别是对于组件，有些人一开始可能会感到困惑，因为它们使用的是 scoped slots，但是一旦你理解了如何传递和接收值，我认为创建它们的难度与函数并没有那么大的不同。使用可组合函数时，我们将反应性数据和函数从可组合函数传递给导入的组件。如果你看一下VueUse的功能，有一些你可以自己创建，但是注册的功能有100多个，所以如果你没有使用它的经验，请浏览一遍，看看有没有你的功能可以用。

Vuex 是一种集中管理所有组件中数据的机制。它和Pinia一样都是解决使用 props 和 $emit 事件在组件之间传递数据时，当组件之间频繁传递，层级增加时管理数据就变得困难。Vue 的官方状态管理库已更改为Pinia，Pinia 具有与 Vue 几乎完全相同它还增强的很多API的功能。Vuex 虽然仍在维护中，但是它不会在添加的新功能了，Vuex 应用程序迁移到 Pinia它可能会是一个更好的选择。在这里我们还会讲解一下Vuex 的使用方法，以方便大家在迁移Vuex的时候更加方便。

在 Vue3 中项目中组件之间传递数据时，可以使用 Props 和 Emit，还可以使用 Provide/Inject 来代替 Props 和 Emit。Props 和 Emit 只能在具有父子关系的组件之间传递数据，所以层级越深，过程就越复杂。为了解决此类问题需要一种在所有组件之间共享数据的机制（State Management）。在原来的Vue世界中Vuex 以全局状态管理库着称，但是现在出现了一个新的存储库 Pinia，现在所有Vue3创建的新项目都建议使用 Pinia。

想了解Vue插件所以你看了官方文档却看不懂，或者你想知道Vue.use()方法和插件的关系。在本文档中，我们将参照文档讲解插件制作的基础知识，了解基础知识后，我们将制作与更实用的下拉菜单和脚本加载相关的插件。读完之后，您应该知道如何创建自己的插件以及如何添加插件。

前面的知识告诉我们vue中组件之间传递值需要使用props来完成，但是props也有一定局限性。这个时候在vue3中还有另外的解决方法。那就是使用 provide 和 inject 允许父组件将数据传递给所有后代组件，而不管组件层次结构有多深。你要做的很简单，就是Props 可用于将数据从父组件传递到子组件。但是，如果从父组件到子组件传递数据的层次很深，使用props就很麻烦了。

要查看更多使用 Scoped Slots 的方法，我们将了解如何使用简单代码自定义表格。创建一个可重用的子组件 Table.vue。从父组件接收包含 headers 和 items 信息的 props 数组，并将其显示为表格。

本章带领大家理解组件、props、emits、slots、providers/injects，Vue 插件 等Vue组件使用的基础知识。

本章带领大家理解组件、props、emits、slots、providers/injects，Vue 插件 等Vue组件使用的基础知识。

上面介绍的都是国内比较优秀的UI框架，现在我们在介绍一款国外比较流行的CSS UI框架ailwind 。官方网站https://tailwindcss.com/docs/guides/vite#vue CSShttps://flowbite.com/docs/getting-started/introduction/ 。这个ailwind 架构需要自己去写一些基础组件功能，它只提供了UI样式，所以扩展新和二次开发能力比较强，适合更高水平的开发者使用。

现在常用的前台UI 分别是以下几种，我们将从中间选择介绍几个主流的UI的用于后台的系统搭建与开发。

Vue Router 是 Vue.js 的官方路由器。通过使用 Vue Router，你可以构建一个包含多个页面的应用程序。它可以样多个页面之间流畅地跳转，而无需每次移动到另一个页面时都要重新加载整个页面。Vue Router 路由是使用 Vue.js 构建单页应用项目的必备库。官网地址https://router.vuejs.org/zh/introduction.html由一个 HTML 页面组成的应用程序称为单页应用程序 (SPA)。

本章主要介绍vue3中的基础指令使用方式和一些开发技巧。分为基础指令，逻辑指令，列表指令，事件，MVVM数据绑定与监听。本章中所有代码例子都是在使用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 是一种新型前端构建工具，能够显著提升前端项目开发效率。它主要由两部分组成。

Vue.js是一款广受欢迎的JavaScript框架，专为创建网站、web应用程序和管理系统等前端用户界面(UI)设计。其流行不仅因为它拥有庞大的开发者社区和丰富的学习资源，还因为它具有低学习成本和易于上手的特点。当你在使用中遇到疑问或困难时，可以轻松地找到各种解决方案和指南，这是Vue.js成为当前最主流开发框架的重要原因之一。现在，我们主要使用三种方法来创建Vue3项目，分别是Vue CLI，Webpack和Vite。接下来，我将为你详细介绍每种方法创建Vue项目环境的步骤。

在之前的文章中，我们已经了解了如何使用Vue CLI来创建Vue项目的开发环境。现在，大家已经可以轻松地运用Vue CLI来构建自己的Vue项目了。然而，你可能仍然对背后的工作原理感到困惑。接下来，我将引导你们在不使用Vue CLI的情况下，如何创建一个Vue项目环境。我们将使用Webpack工具和它的一系列打包组件来编译和打包Vue模板文件及其相关的代码。我会详细介绍如何安装Webpack，以及它是如何打包Vue模块的，并且每个步骤都会进行详尽的解释。