https://juejin.cn/post/7226554037172437048
使用到的工具与技术
vue3
Vue3是一种流行的JavaScript前端框架，用于构建用户界面。它是Vue.js框架的最新版本，于2020年9月正式发布。Vue3相比于Vue2在性能、开发体验和可维护性上有许多改进和优化。
Vue3引入了一种名为Composition API的新的API风格，这使得代码更具可组合性和复用性。它还提供了更好的TypeScript支持，并通过一些编译时的优化来提高性能。在Vue3中，还进行了许多针对响应式系统的改进，使其更高效和灵活。
总的来说，Vue3提供了更好的开发体验、更高的性能以及更好的可维护性，使得开发者能够更轻松地构建出高质量的Web应用程序。
vite
Vite是一种现代化的前端构建工具，用于开发快速、轻量级的Web应用程序。它由Vue.js的创作者尤雨溪开发，旨在提供更快的开发和构建体验。
Vite采用了一种全新的开发模式，称为"快速冷启动"（Fast Refresh），它利用了现代浏览器的原生ES模块解析能力，实现了即时的热模块替换（HMR），无需打包即可实时预览和调试代码。这意味着开发者可以更快地启动应用程序，并在开发过程中立即看到更改的效果，提高了开发效率。
此外，Vite还支持自动的按需编译，只编译和响应修改的文件，而不需要重新构建整个项目。这使得构建过程更快，减少了开发者等待的时间。
Vite主要用于构建Vue.js应用程序，但也可以用于构建其他类型的前端应用程序，如React和Preact等。它提供了一种简单、快速、灵活的开发体验，成为前端开发中备受欢迎的工具之一。
typescript
TypeScript是一种开源的编程语言，它是JavaScript的一个超集。它添加了静态类型检查和其他一些新特性，以提供更好的开发工具和开发体验。
TypeScript的主要目标是提供更强大、更可靠的代码结构和错误检查，以帮助开发人员编写更健壮、可维护的应用程序。通过引入类型注解和类型检查，TypeScript可以在编码阶段捕获一些常见的错误，例如类型不匹配、方法不存在等。这可以减少运行时错误，并提高代码的可读性和可维护性。
TypeScript还支持ECMAScript最新的特性，并提供了面向对象编程的概念，例如类、接口和模块。它可以与现有的JavaScript库和框架无缝集成，并且可以通过编译为普通的JavaScript代码来运行在任何支持JavaScript的环境中。
总的来说，TypeScript可以被视为JavaScript的增强版，它提供了更好的工具和语言特性来帮助开发人员构建高质量的应用程序。
elementplus
Element Plus是一款基于Vue.js的开源UI组件库。它是Element UI的升级版本，提供了一系列美观、易用且高质量的组件，可以帮助开发者快速搭建现代化的Web应用界面。Element Plus具有响应式设计、可定制化主题、多语言支持等特性，可以满足不同项目的需求。值得一提的是，Element Plus是为Vue 3设计的，与Vue 3的生态系统完美兼容，可以充分发挥Vue 3的性能优势。
pinia
Pinia是一个基于Vue 3的状态管理库，它是为了替代Vuex而创建的。Pinia提供了一种简单且直观的方式来管理应用程序的状态。与Vuex不同，Pinia使用了Vue 3的新特性，例如响应式引用、Proxy和Composition API，以提供更好的性能和开发体验。
使用Pinia，你可以创建一个中心存储（store），用于存储和管理应用程序的状态。通过定义状态、操作和获取器等功能，你可以在应用程序的不同组件中访问和修改状态。Pinia还支持模块化的存储，允许你将状态拆分为多个模块，以便更好地组织和维护代码。
Pinia的设计目标是提供一种轻量、灵活和可扩展的状态管理解决方案，同时与Vue 3的响应式系统紧密集成。它提供了与Vue 3的生态系统完美兼容的API，并且可以与其他Vue 3插件和工具无缝集成。如果你正在使用Vue 3，并且对状态管理有需求，Pinia是一个值得考虑的选择。
scss
SCSS（Sass）是一种CSS预处理器，它是CSS的扩展语言。SCSS提供了一些额外的功能和语法，以帮助开发者更高效地编写和组织CSS代码。
SCSS允许使用变量、嵌套规则、混合（Mixins）、继承和函数等特性。这些功能可以使CSS代码更具可维护性和可重用性。例如，你可以定义一个变量来存储颜色或字体大小，并在整个样式表中引用它们，以便在需要时进行更改。
嵌套规则是SCSS的另一个有用的功能。它允许你在一个选择器内嵌套另一个选择器，以减少样式层级的嵌套和提高代码的可读性。
混合（Mixins）是一种可以重用的样式块。你可以定义一个混合，然后在需要的地方通过调用它来应用这些样式。
继承允许你从一个选择器继承样式，从而减少重复的CSS代码。
除了这些功能之外，SCSS还提供了一些内置的函数和操作符，可以进行字符串处理、颜色计算等操作。
需要注意的是，SCSS是一种预处理器，需要通过编译器将其转换为普通的CSS代码，然后才能在浏览器中使用。有许多工具可以将SCSS代码编译为CSS，例如Sass、Node-sass和Dart Sass等。
Tailwind CSS
Tailwind CSS是一种现代化的CSS框架，它提供了一组可重用的UI组件和实用工具类，以帮助开发者快速构建用户界面。与传统的CSS框架不同，如Bootstrap或Foundation，Tailwind CSS不依赖任何预定义的样式类，而是提供了一系列原子级的CSS类，每个类都代表一个特定的样式属性。通过组合这些类，开发者可以自由地创建自定义的样式，并灵活地适应不同的设计需求。
Tailwind CSS的设计理念是"utility-first"，即将CSS样式定义为可重用的工具类，而不是预定义的组件样式。这种方式使得开发者可以更加高效地编写和组织CSS代码，同时提供了更大的灵活性和定制化能力。另外，Tailwind CSS还提供了响应式设计的支持，可以根据不同的屏幕尺寸和设备类型应用不同的样式。
总的来说，Tailwind CSS是一个强大且灵活的CSS框架，适用于各种规模和类型的项目，它能够提高开发效率并帮助构建出具有自定义样式的现代化用户界面。
VueRouter
Vue Router是Vue.js官方提供的路由管理器，它用于在Vue应用中实现客户端路由功能。客户端路由是指在单页应用（SPA）中，通过URL的变化来切换不同的页面内容，而不需要重新加载整个页面。
Vue Router提供了一种简洁和友好的方式来管理应用的路由，包括定义路由、创建嵌套路由、配置路由参数、导航守卫等。通过Vue Router，开发者可以轻松地实现页面之间的导航、路由参数传递、动态路由匹配等功能。
使用Vue Router，开发者可以将应用分割成多个组件，并通过定义路由来决定哪个组件在哪个URL下进行渲染。这样，用户在浏览器中输入不同的URL或者点击链接时，可以实现页面的无刷新切换，给用户带来更好的交互体验。
总而言之，Vue Router是Vue.js框架中的一个插件，用于实现客户端路由功能，使得开发者能够更方便地构建单页应用，并提供了一系列的路由管理工具和特性，以满足不同的应用需求。
eCharts
ECharts（Enterprise Charts）是一个由百度开发和维护的开源JavaScript图表库。它提供了丰富的数据可视化图表类型，包括折线图、柱状图、饼图、雷达图、散点图等，以及地图、热力图等各种特殊类型的图表。
ECharts具有灵活的配置和丰富的交互功能，可以根据多种需求进行定制，支持响应式设计和移动端适配。通过使用ECharts，开发者可以将数据以视觉化的方式呈现，使得复杂的数据更加易于理解和分析。
作为一个功能强大的图表库，ECharts具有以下特点：
- 多种图表类型：ECharts提供了多种常用的图表类型，可以满足各种数据可视化的需求。
- 丰富的配置项：开发者可以通过配置项来自定义图表的样式、数据、交互等属性，以满足不同的展示需求。
- 响应式设计：ECharts支持响应式设计，可以根据不同的屏幕尺寸自动调整图表的大小和布局，适应不同的设备。
- 交互功能：ECharts支持多种交互方式，如数据筛选、图例切换、数据缩放、拖拽重计算等，提供了更加丰富的用户体验。
- 扩展性：ECharts提供了丰富的API和插件机制，可以方便地扩展和定制功能，满足不同的需求。
总之，ECharts是一个功能强大、灵活易用的JavaScript图表库，适用于各种数据可视化场景，帮助开发者将数据以直观、清晰的方式呈现给用户。
Eslint、Prettier
ESLint是一个用于在JavaScript代码中识别和报告模式问题的工具。它可以帮助开发者遵循一致的编码风格，并捕获一些常见的错误。ESLint可以根据预定义的规则或自定义的规则集来检查代码，并提供可自定义的错误和警告消息。它可以与大多数编辑器集成，以便在编写代码时实时检查和修复问题。ESLint支持广泛的JavaScript语法和扩展，可以用于各种项目，包括前端和后端开发。
Prettier是一个代码格式化工具，它可以根据预定义的规则自动格式化代码，使其符合统一的编码风格。与传统的代码风格检查工具不同，Prettier不仅可以检查代码中的错误和警告，还可以自动修复这些问题。它可以识别各种编程语言的代码，并根据预设的规则进行格式化。Prettier的目标是消除开发人员之间关于代码格式的争论，使团队能够更专注于编写高质量的代码，而不是纠结于代码的样式。Prettier可以与多种编辑器和集成开发环境（IDE）一起使用，并且可以通过命令行工具或在构建过程中自动应用于代码。
创建项目
创建Vite项目
- 前置安装node.js
- npm命令：
npm install -g create-vite
