Vue+echarts实现数据可视化

第一章 使用vscode创建vue3项目

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

本章节主要介绍
(1)vscode实现vue3之前需要安装哪些组件和扩展
(2)使用vscode创建vue3项目的过程

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、安装组件Node.js

（1）从官网下载vscode并安装好之后，继续下载Node.js组件（https://nodejs.org/en），下载LTS，下载完毕后，可选择安装路径，运行下载的安装包，一路 Next 安装即，之后需要将其配置到环境变量中，系统变量的path：（2）win+R输入cmd，进入终端，测试是否成功，如果出现版本号，说明安装成功。

（3）打开vscode后，在终端输入上图的两个命令，测试是否出现版本号，如果显示下图所示的无法识别node和npm

以管理员的身份打开vscode即可成功。

二、安装扩展

（1）chinese(汉化)
（2）vloar(vue3代码可以高亮显示)
（3）open in browser(浏览器打开)

三、使用vscode创建vue3项目

在vscode的终端输入npm init vue@latest,之后按照图片所示一步步输入提示命令 ，项目名称为vue-echart


最终进入http://localhost:5173/，出现下图，创建项目成功。

总结

记得配置node.js的环境变量
记得使用管理员身份打开vscode