【详细操作流程】从零开始创建Vue3项目 ‘vueproject’，并且引入echarts，element-plus，thress.js库

本文档涉及内容:

1.创建Vue3项目 ‘vueproject’ ，本文档涉及的操作和代码都在此项目中实现
2.Vue3引入echarts并写一个实例
3.Vue3引入elements-plus并写一个实例
4.Vue3引入thress.js库并写一个实例
5.涉及的代码清单

*******************前提：构建 Vue.js 项目的工具：Vue CLI 或者 Vite *****************

1.Vue CLI 是官方推荐的构建 Vue.js 项目的标准工具，成熟且稳定，适用于构建中大型和复杂的 Vue.js 项目。

2.Vite 是一个新兴的构建工具，它专注于提供快速的开发体验。Vite 适用于中小型的 Vue.js 项目，特别是那些需要快速开发和迭代的项目。

---

一、创建Vue3项目

1.构建Vue的工具我选择的是Vue CLI，如果你的选择和我一样，那在第一次执行时候全局安装@vue/cli: npm install -g @vue/cli

2.键盘输入视窗+R，输入cmd 进入windows命令提示符界面，进入你要创建文件的目录，
输入：vue create vueproject 来创建vue项目， 项目名称是vueproject，注意vue项目名称要全部小写。

选择：[Vue3]，回车

此时，会创建项目并且安装，这个过程需要些时间去安装很多依赖和包。正常来说是动态的，如果停留的过久，按一下回车等待一会儿就会继续进行

创建项目成功：

3.现在就可以进入项目 cd vueproject
启动项目 npm run serve

根据上面的网址，在浏览器任意打开一个即可看到官方给出的Vue3模板项目

进入VSCode，打开该文件夹，模板项目结构如下：

常用的是图中标红的部分

下图我最初的package.json文件里的内容，此时还没有引入别的库：

如果以后引入新的库了，例如在引入过ecahrts，element-plus之后，package.json中就会多出ecahrts，element-plus：

4.熟悉一下Vue3中代码编写流程吧！【可跳过不了解，这是图片，详细代码可在第五部分获得】
main.js，App.vue，HelloWorld.vue这三个文件里有改动，这是我自己写和补充的，为了熟悉一下编写流程：

【main.js文件】

【App.vue文件】

【HelloWorld.vue文件】

在终端启动项目 npm run serve，进入网页

实现的前端效果是这样的：

二、引入echarts

echarts 是一个用于数据可视化的开源 JavaScript 图表库。它提供了丰富的图表类型和交互功能，可以帮助开发者将数据转化为直观、易于理解的图表，从而更好地展示数据的趋势和关系。

步骤：

1. 安装：在项目目录下执行此命令安装 echarts：npm install echarts
2. 在 Vue 组件中引入 echarts： import * as echarts from “echarts”
3. 创建图表容器：在 Vue 模板中创建一