电商平台数据可视化Echarts-Vue项目综合练习(黑马pink老师)学习记录

放假在家没事，跟着b站黑马前端课程手把手做了个电商平台数据可视化实时监控系统。老师课讲得非常好，几乎是保姆级别，对我这种小白非常友好。在这里记录一些自己遇到的问题，欢迎批评指正。

1.ECharts浏览器配置

刚上手ECharts的时候遇到了这样一个问题，视频中pink老师编写好html文件后，右击选择Open with Live Server即可打开谷歌浏览器展示界面，然而我打开的却是电脑设置的默认浏览器。
解决方法为：打开VS Code中设置，在搜索框中搜索browser，将

Live Server › Settings: Custom Browser
Specify custom browser settings for Live Server.
By Default it will open your default favorite browser.

设置为chrome即可。

2.node.js安装及其环境变量的配置

参考 bingo丶大佬的《node.js安装及环境变量配置》

(1)下载node.js

下载并解压node_js，官网地址为http://nodejs.cn/download/，我选择的是Windows系统（.zip）64位：

在下载目录下创建node_cache和node_global两个文件夹：

(2)配置环境变量

1. 此电脑—>属性—>高级系统设置—>高级—>环境变量
2. 复制node.js的绝对路径，我的是D:\KSoftware\Node\node_js，在用户变量中新建变量NODE_PATH并将node.js的绝对路径作为其变量值：
   
3. 将%NODE_PATH%、node.js、node_global的绝对路径加入用户变量中的变量Path中：
   

(3)命令行验证

重启cmd并输入node -v检查node版本

输入npm init -y、npm install koa即可安装Koa2。

3.Vue安装及其环境变量的配置

在全局环境中安装vue-cli脚手架：npm install -g @vue/cli，然后调用vue命令会报错，原因是没有配置环境变量：
参考 域见同学 的《Vscode报错 vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称》

1. cmd获取相关路径：npm config get prefix
2. 将该路径配置到系统变量的Path中即可

4.创建vue工程的相关配置

跟着pink老师的视频做的过程中，在选择完Router ,Vuex ,CSS Pre-processors后出现了一个Vue.js版本选项，而老师的视频中并没有该选项。此处！！一定一定一定要选择2.x版本，否则后面生成的App.vue以及一些包的导入会与老师的视频有版本差异：

5.cmd 退出Vue项目

在 cmd 中执行命令 npm run serve 后 vue项目被运行，此时 cmd 窗口不接受输入。若想终止项目，输入 Ctrl + C 即可。项目运行时间较长的情况下，一次 Ctrl + C 没有效果，连按两次即可。

6.项目基本配置vue.config.js

按照老师的配置在我的电脑上会出现连接失败，将vue.config.js文件改为如下即可：

module.exports = {
  devServer: {
    port: 8999,   //端口号配置
    open: true,   //自动打开浏览器
    host: "localhost"
  },
  lintOnSave: false
}

7.axios下载失败

按照pink老师的视频，我在 vision 文件夹下执行命令行语句 npm install axios 下载中途失败：

以管理员身份运行照样不行：

猜测是npm版本不兼容问题，参考文章 【npm错误】- npm ERR code ERESOLVE 和 npm ERR ERESOLVE could not resolve 问题 ，在在命令后面加上 --legacy-peer-deps 即可。

---

等后面学完了再来补充。