Node.JS+Vue+Vite+D3可视化

从 Vite 与 Vue 开始的 D3 数据可视化之旅（MAC）

本文章用于入门学习Vue和Vite的搭建，同时使用D3实现数据可视化。

准备些啥呢？

首先准备好我们旅行的行李清单

1. Node.js ，因为mac自带，所以我就直接使用的自带；
2. npm or yarn:包管理工具，这里我使用的是yarn；
3. D3:Data-Driven Documents 数据可视化最为流行的基础库，没有之一；
4. Vue:The Progressive JavaScript Framework 目前最为流行的前端框架之一，不可否认的是它相比 React 的学习曲线要更为平缓。；
5. Vite:Native-ESM powered web dev build tool. It’s fast. 面向未来的前端构建工具；

前期工作

在搭建vue之前，我们需要先进行一下准备活动，搭建好上述环境、命令。

Node.js

我们可以理解Node.js就是一个运行在服务端的JavaScript。

1.安装node
下载地址：http://nodejs.cn/download/
在下载完成后，我们可以在mac的终端输入node --version检查是否安装成功

2.创建JS文件server.js

yarn

直接通过命令npm install -g yarn安装yarn

git

直接通过命令brew install git安装yarn

Vite站

环境配置好之后，就可以正式搭建vite站了
1.在终端输入
yarn create vite-app vue-d3-demo

2.进入项目文件夹
cd vue-d3-demo
ps
我们在mac的终端可以使用 open .打开文件夹
如果我们想用vs-code打开文件夹,用的命令是 code .,不过你得先按照code
安装code：打开VSCode –> command+shift+p –> 输入shell command –> 点击提示Shell Command: Install ‘code’ command in PATH运行
使用：打开终端，cd到要用VSCode打开的文件夹，然后输入命令code .即可打开

3.安装依赖
yarn

4.启动项目
yarn dev

这样我们就已经搭建好了项目