在 Visual Studio Code 中创建 Vue 工程使用 Echarts 代码实现可视化

一、下载安装Node.js

（1）Node.js官方安装包及源码下载地址：Node.js — Run JavaScript Everywhere

（2）检测是否安装成功：win+R，输入“cmd”，打开，输入“node --version”检查Node.js版本

（3）Node.js安装完毕，会自动在系统的path环境变量中配置，无法在终端查看，重启电脑重新加载就可以了。也可以删掉自动配置的，手动再加上即可。如：打开计算机属性-高级系统设置-环境变量，在系统变量列表中找到path变量

 

二、安装vue脚手架

【win+R，输入“cmd”，打开，复制粘贴】

（1）切换淘宝镜像：npm config set registry https://registry.npmmirror.com

（2）安装vue脚手架：npm install -g @vue/cli

 

三、下载安装Visual Studio Code

（1）Visual Studio Code 官方安装包及源码下载地址：Visual Studio Code - Code Editing. Redefined

（2）快捷键Ctrl + Shift + X，左侧上方输入Chinese，安装中文包

 

四、创建文件夹方便代码存放

（1）找到Visual Studio Code的安装目录，进入创建文件夹（不要用中文），我这里为vue_stud

 

五、进入Visual Studio Code 创建vue项目

（1）新建终端

（2）cd进入之前创建的文件夹里面vue_study，点击新建终端也可能直接进入这个路径

（3）创建项目：vue create vue_project  这里的（vue_project）为项目名称，回车

（4）选择安装版本，我这里选择的自义定配置（Manually select features），相比直接配置vue3和vue2，可以节省后续的一些配置，键盘上下方向键选择，回车

（5）按空格键选择要安装的配置资源，（）中带“*”说明选中，未选完前千万不要按回车，不小心按了回车可以退出重来。下面是我用到的一些配置资源选择，回车

（6）选择版本，我这里用的是2.x，键盘上下方向键选择，回车

（7）Use history mode for router? (Requires proper server setup for index fallback in production)，是否为路由使用历史模式？（在生产环境中需要正确设置服务器以实现索引回退），我这里选择的是n

（8）请选择Css预处理语言 键盘上下方向键选择Less，回车 (选择Less主要为css解决浏览器兼容,简化css代码等问题)

（9）如何存放配置，键盘上下方向键选择In package.json，回车

（10）是否保存本地配置（这里选择yes会保存一个模版，以后创建项目可以直接选择，但是刚学习应该多练手，不建议保存），所以我选择的是n

（11）等待安装配置即可，自义定配置的过程相比会比较慢

（12）搭建完毕，输入所给命令进入项目：cd vue_project 启动项目：npm run serve 按住Ctrl点击Local后面的http://localhost:8080/ 进行访问

 

六、vue引入echarts

在终端输入npm install echarts

 

七、vue引入Axios

（1）新建终端，进入刚才创建的项目cd vue_project

（2）命令安装axios和vue-axios

npm install axios

npm install vue-axios

（3）之后在main.js里面完整引入

import axios from 'axios'

import VueAxios from 'vue-axios'

// VueAxi0s 与 axios 的位置不能交换

//否则出现 TypeError:Cannot read property 'protocol' of undefined

Vue.use(VueAxios,axios)

 

八、修改vue.config.js文件

module.exports = {

  devServer: {

    port: 9000, // 端口号的配置

    open: true, // 自动打开浏览器

    proxy: {

      '/api': {

        target: 'http://192.168.45.10:8999/', // 目标 API 地址

        changeOrigin: true, // 允许跨域

        pathRewrite: {

          '^/api': '' // 重写路径

        }

      }

    }

  }

}

 

九、删除无关内容

（1）项目vue_project下的App.vue

嫌美观可以删掉这里面的内容，之后会在这引入自定的组件按钮，也可以直接注释，当一个模板使用

（2）项目vue_project下的子文件夹views，直接删除这俩个vue项目，

jsconfig.json文件会警告，重新保存即可

（3）项目vue_project下的子文件夹router里的index.js文件

嫌美观的可以删掉这里面的内容，之后会在这引入自定的组件，也可以不用删除，当一个模板使用

 

十、新建子组件

我这里建了bar_study.vue 和 pie_study.vue

 

十一、引入子组件

项目vue_project下的子文件夹router里的index.js文件

import bar_study from '../views/bar_study.vue'

import pie_study from '../views/pie_study.vue'

======================================

  {

    path: '/echatr_bar',

    name: 'bar',

    component: bar_study,

  },

  {

    path: '/echart_pie',

    name: 'pie',

    component: pie_study,

  },

======================================

 

十二、在父组件中调用子组件

    <nav>

     ♡ <router-link to="/echatr_bar">服务器柱状图</router-link> ♡

      <router-link to="/echatr_pie">服务器饼图</router-link> ♡

    </nav>

    <router-view/>

 

十三、在子组件中编写echarts代码获取服务器数据

基本格式

<template>

 

</template>

 

 

<script>

 

</script>

 

 

<style>

 

</style>

终端启动

任务一：用柱状图展示消费额最高的省份

编写Vue工程代码，根据接口，用柱状图展示2020年消费额最高的5个省份，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。

代码如下，注意调用部分已经使用特殊格式标注：

<template>

    <div id="echart_bar"></div>

</template>