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

问题记录

1.ECharts浏览器配置
2.node.js安装及其环境变量的配置
- (1)下载node.js
- (2)配置环境变量
- (3)命令行验证
3.Vue安装及其环境变量的配置
4.创建vue工程的相关配置
5.cmd 退出Vue项目
6.项目基本配置vue.config.js
7.axios下载失败

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)配置环境变量

此电脑—>属性—>高级系统设置—>高级—>环境变量
复制node.js的绝对路径，我的是D:\KSoftware\Node\node_js，在用户变量中新建变量NODE_PATH并将node.js的绝对路径作为其变量值：
将%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、函数、脚本文件或可运行程序的名称》

cmd获取相关路径：npm config get prefix
将该路径配置到系统变量的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 即可。

等后面学完了再来补充。

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

基于JavaScript+Koa2实现 Echarts 电商平台数据可视化大屏全栈【100010415】
全新 Echarts 电商平台数据可视化大屏全栈 1. 前言五一假期重学了新版 Echarts,一个基于 JavaScript 的开源可视化图表库,收集参考了很多网上资料,最终选择电商平台作为练手项 ...
电商平台数据可视化如何实现
一.什么是API? API,即Application Programming Interface,翻译过来就是"应用程序编程接口".它是用于不同软件和应用之间进行交互的一种技术规范 ...
「ECharts」电商平台数据可视化实时监控系统之后台开发
此项目后台采用 Koa2 进行开发配置,相关配置整理如下. 1. Koa2 概述 Koa 是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领 ...
电商平台数据可视化实时监控系统(开发目录)
目录项目地址github 1.koa2快速上手 2.后台项目初步 3.前端项目的创建和准备 4.单独图表组件的开发---商家销售统计(横向柱状图) 5.单独图表组件的开发---销量趋势图表(折线图) ...
电商平台数据仓库搭建01-项目介绍
1,项目说明本项目来源于github 电商平台数据仓库搭建 .该项目仅供个学习使用项目为个人学习记录,项目代码及文件可访问电商平台数据仓库搭建获得.访问不了的同学也可以私信我. 2,项目流程设 ...
JAVA毕设项目社区电商平台系统（java+VUE+Mybatis+Maven+Mysql）
JAVA毕设项目社区电商平台系统(java+VUE+Mybatis+Maven+Mysql) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Web ...
ssm毕设项目木棉堂水果电商平台1r83i（java+VUE+Mybatis+Maven+Mysql+sprnig）
ssm毕设项目木棉堂水果电商平台1r83i(java+VUE+Mybatis+Maven+Mysql+sprnig) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + H ...
电商平台数据仓库搭建02-Hadoop集群搭建
1,项目说明本项目来源于github 电商平台数据仓库搭建 . 项目为个人学习记录,项目代码及文件可访问电商平台数据仓库搭建获得. 2,项目准备虚拟机准备虚拟机开发工具为 VMware15. ...
电商平台数据解锁网红零食销量密码
" 你知道"巨型猪饲料""单身狗粮"是什么吗?这不是给动物吃的,也许你或多或少听说过,这些在网上引起巨大反响的零食,完全激起了大家的购买欲望. &qu ...

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