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

放假在家没事,跟着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即可。

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

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

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

(1)下载node.js

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

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

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

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

(2)配置环境变量

  1. 此电脑—>属性—>高级系统设置—>高级—>环境变量
  2. 复制node.js的绝对路径,我的是D:\KSoftware\Node\node_js,在用户变量新建变量NODE_PATH并将node.js的绝对路径作为其变量值:
    电商平台数据可视化Echarts-Vue项目综合练习(黑马pink老师)学习记录_第4张图片
  3. 将%NODE_PATH%、node.js、node_global的绝对路径加入用户变量中的变量Path中:
    电商平台数据可视化Echarts-Vue项目综合练习(黑马pink老师)学习记录_第5张图片

(3)命令行验证

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

输入npm init -ynpm 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以及一些包的导入会与老师的视频有版本差异:
电商平台数据可视化Echarts-Vue项目综合练习(黑马pink老师)学习记录_第6张图片

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 下载中途失败:
电商平台数据可视化Echarts-Vue项目综合练习(黑马pink老师)学习记录_第7张图片
以管理员身份运行照样不行:
电商平台数据可视化Echarts-Vue项目综合练习(黑马pink老师)学习记录_第8张图片
猜测是npm版本不兼容问题,参考文章 【npm错误】- npm ERR code ERESOLVE 和 npm ERR ERESOLVE could not resolve 问题 ,在在命令后面加上 --legacy-peer-deps 即可。
电商平台数据可视化Echarts-Vue项目综合练习(黑马pink老师)学习记录_第9张图片


等后面学完了再来补充。

你可能感兴趣的:(小学期实训项目,echarts,vue.js,学习,前端)