smallteddy.blog.csdn.net

前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章的文章目录

旨在帮助初学者掌握使用现代前端技术栈构建应用的基础知识和技能。在这个系列中，我们将深入探讨如何结合Vue.js、Vite、TypeScript、Pinia和Sass这些强大的工具和框架来开发现代化的前端应用。通过这个系列，我们将从零开始构建一个完整的前端项目，覆盖项目初始化、组件开发、状态管理、样式处理等方方面面。我们将介绍每个技术的基本概念，并提供实际的代码示例和最佳实践，让读者能够快速上手并建立扎实的技术基础。

磨刀不误砍柴工，再开发之前，我们需要先搭建好我们开发所需要的环境，安装好插件等，以便我们快速便捷的进行开发。Node.js 就是运行在服务端的 JavaScrip，基于 Chrome JavaScript 运行时建立的一个平台，Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境，基于 Google 的 V8 引擎，V8 引擎执行 Javascript 的速度非常快，性能非常好。

本篇文章开始，我们就要开始创建自己的项目，并进行配置和开发啦。本文介绍了如何使用Vite工具创建自己的vue项目。

本文简要介绍了使用 `Vite` 初始化项目之后，目录各个文件的作用，后面我们也会增加很多项目的配置文件以及对现有配置文件的修改，上文中 `README.md` 的配置可在 `github` 仓库中直接`copy`，仓库路径：[https://github.com/SmallTeddy/testing-web](https://github.com/SmallTeddy/testing-web)。

在本篇文章中，介绍了使用 `Element-Plus` 组件库进行开发时的安装和快速开始流程。文章中首先介绍了 `Element-Plus` 组件库的优势，包括一致性、反馈、效率和可控性。接着详细说明了安装 `Element-Plus` 的步骤，以及在代码中的快速开始指南。随后，对自动引入和自定义配置 `Vite` 和插件进行了详细讲解。最后，在测试组件可用性前，进行了一些文件的删除以保证项目的纯净度，并通过示例代码演示了组件库的使用。

本文主要介绍了如何安装 `sass` 并在 `package.json` 中确认安装成功，创建了 `styles` 文件夹，并添加了 `variables.module.scss`、`transition.scss`、`element.scss` 和 `index.scss` 文件，安装了 `normalize.css` 并在入口文件 `main.ts` 中引入，修改了 `App.vue` 文件以测试样式应用。上文中的配置代码可在 `github` 仓库中直接 `copy`，仓库路径：[https://g

本文深入解读了 `vue-router` 的各个属性，并结合代码示例进行了详细演示，为您提供了全面的理解。通过本文，您可以更好地掌握 `vue-router` 的核心概念和功能。上文中的配置代码可在 `github` 仓库中直接 `copy`，仓库路径：[https://github.com/SmallTeddy/testing-web](https://github.com/SmallTeddy/testing-web)。

本文继续项目的开发，增加了登录页面和 Layout 组件，并实现了路由的跳转，接下来我们就可以进行菜单的开发以及业务逻辑的开发了，不过在开发之前，我们要先使用 pinia，来对项目做状态管理。上文中的配置代码可在 `github` 仓库中直接 `copy`，仓库路径：[https://github.com/SmallTeddy/testing-web](https://github.com/SmallTeddy/testing-web)。

本文介绍了简单介绍了如何在项目中使用 `Pinia`。其优势包括支持 `dev-tools`、热模块更换、插件扩展、提供良好的 `TypeScript` 支持和服务器端渲染支持等。介绍了如何安装和配置 `Pinia`，以及使用 `pinia-plugin-persistedstate` 插件可实现数据持久化，提升系统稳定性和用户体验。上文中的配置代码可在 `github` 仓库中直接 `copy`。

本文介绍了在Vue项目中使用axios进行HTTP通信的方法。首先详细介绍了axios的安装和配置方法，包括npm或yarn安装以及文件请求的简单示例。然后讲解了axios拦截器的作用和使用方法，分别介绍了请求拦截器和响应拦截器的使用。接着讲解了对axios请求的封装，包括config、types和http三个文件的具体内容，以及如何使用封装好的BaseRequest类进行请求。最后，介绍了mockjs的作用和安装配置方法，展示了mock的使用测试请求。

Vue 是前端开发中非常常见的一种框架，它的易用性和灵活性使得它成为了很多开发者的首选。而在 Vue2 版本中，组件的开发也变得非常简单，但随着 Vue3 版本的发布，组件开发有了更多的特性和优化，为我们的业务开发带来了更多便利。本文将介绍如何使用 Vue3 开发业务组件，并通过代码实例进行演示。通过以上的介绍和代码实例，我们可以看到 Vue3 提供了更多的特性和优化，让我们更加方便地开发业务组件。在实际开发中，我们可以根据实际需求选择合适的组件开发方式，并通过 Vue3 的特性来提升开发效率.。

在项目开发中，我们经常会使用一些工具函数，也经常会用到例如loadsh等工具库，但是这些工具库的体积往往比较大，如果项目本身已经引入了这些工具库，那么我们就没有必要再引入一次，所以我们需要自己封装一些工具函数，来简化我们的开发。工具函数的封装，可以提高代码的复用性，降低维护成本，本文只是介绍了一小部分工具函数的封装，更多的工具函数的封装，可以参考lodash等函数工具库，也可以根据实际需求，封装自己的工具函数。上文中的配置代码可在github仓库中直接copy。