今天和同事聊天，听同事说工作中经常要使用到表格统计数据并且将数据用统计图呈现出来，通常情况下使用Excel就可以满足大部分场景需求，但是自动生成的图多半丑陋，如果需要好看一点的图该如何实现呢？今天教大家用最简单的代码生成统计图，当同事问起你图做的真好怎么做到的，直接告诉她我用代码生成的，瞬间逼格满满有木有！
1.给代码提供一个合适的环境
既然是用代码生成，那么自然要做一下前期准备工作。每个人的电脑情况不同，我将用可以适用大部分情况的文字来描述接下来的教程。如果在跟着教程实践的过程中遇到任何问题，欢迎在文末留言，我会解决方案。
windows系统：
win10及以上：按win健，输入cmd,可以看到一列选项，选以管理员身份运行，输入npm install -g @vue/cli-service-global ，写到这里我突然想到个更先决的条件，输入这串代码之前先要安装npm，安装npm的途径是安装node。至于npm和node是什么，先不用关注，只管跟着教程走就好。
百度 node 看到nodejs.org这个域名，进去后找下载，按照32或者64位系统下载安装包。下好后一路next就OK了。然后打开cmd，输入node -v看到一串字母数字，再输入npm -v看到另一串字母数字，就准备好了环境了。然后输入npm install -g @vue/cli-service-global稍等片刻就装好了开展后面工作所需的基础工作。
2.一个编辑器
一个趁手的编辑器可以事半功倍，代码和编辑器的关系就像鱼和水的关系一样，鱼离开水无法生存，代码离开一个好编辑器就没法顺利的生产出来。这里推荐使用vscode，直接百度搜好后下载安装就行了
3.准备开工
在d、e、f任意一个你看得顺眼的磁盘下新建一个文件夹，用字母命名，然后打开vscode后，选文件-->打开文件夹，选择刚刚建立的文件夹，这时左边栏就一个文件夹，在文件夹下新建文件：App.vue，输入如下代码：
<template>
<div id="app">
helloworld
</div>
</template>
<script>
export default{
}
</script>
<style>
</style>
保存后，在文件上右键，选择 在终端中打开，输入vue serve，待出现
App running at:
-local: http://localhost:8080/
后，在浏览器中输入http://localhost:8080，看到出现helloworld后，恭喜你，你的第一条代码成功生效了！
