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

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

1.Node.js

• Node.js简介
• • 简单说，Node.js就是运行在服务端的JavaScript。
• • Node.js是一个基于Chrome Javascript运行时建立的一个平台。
• • Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。
• 使用node.js运行一个Hello World程序

写server.js文件

代码如下：

var http=require('http');
http.createServer(function (request, response){
   
	response.writeHead(200,{
   'Content-Type':'text/plain'});
	response.end('Hello World\n');
}).listen(8888);
console.log('Server running at http://127.0.0.1:8888/');

运行server.js

在终端运行server.js文件，可以看到终端控制台输出信息。

打开相应本地端口可以看到Hello World信息。

2.Vite+Vue

• 安装vue：npm install vue
• 安装vite：npm install vite
  ps：可以使用yarn来代替npm run。yarn的安装命令为npm install -g yarn
• 初始化创建一个工程：npm init vite-app vite-project，其中vite-project为项目名。（或使用yarn init vite-app vite-project命令）
• 终端中使用cd命令进入对应文件夹：cd vite-project
• 经过配置后，可以使用code .命令直接将文件夹在VSCode中打开
• 如果编辑网站代码，那么更新的内容会在保存后实时同步在网页上，不需要经过刷新操作，方便查看。
  使用npm run dev命令就可以运行起vue工程，hello项目工程运行效果如下图所示：
  

3.Vue+D3可视化

我们以字母表数据为例，使用d3来做一个可视化demo。

• 首先安装d3依赖：yarn add d3
• 安装axios：yarn add axios
• 首先在public文件夹下导入json格式的数据文件alphabet
• 之后在source文件夹中的components文件夹下简历BarChart.vue文件，文件代码如下：

<template>
  <h2>📊 咱是直方图</h2>
  <div id="bar-chart-container"></div>
</template>

<script>
import {
    defineComponent } from "vue";
import axios from "axios";
import * as d3 from "d3";

export default defineComponent({
   
  data() {
   
    return {
   
      color: "steelblue",
      margin: {
    top: 30, right: 0, bottom: 30, left: 40 },
    }