使用VSCode创建VueCLI项目

1）使用VSCode创建VueCLI项目

 

由于可以搜csdn上相关的技术博客，所以这里不做介绍。注：创建项目名称时，避免出现大写字母。如：VueCLI项目命名为 vuemap。

 

（2）使用npm安装Echarts依赖

 

其中，需要在vuemap项目下，使用npm安装Echarts依赖的命令如下所示：

 

npm install echarts --save

 

 

//指定版本安装echarts

npm install echarts@x.x.x --save

注：验证是否安装成功的方法——查看vuemap项目下的package.json文件。如，若存在echarts版本号则说明安装成功。这里安装的echarts5版本，非echarts4版本！

 

 

 

（3）在VueCLI项目中引用Echarts

 

注：echarts4 和echarts5 的引入方式不一致。但都存在2种模式的引入方式。

 

1. import echarts from 'echarts'

//echarts4 的引入方式

******************************************

2. echarts5 的引入方式：

a. import * as echarts from "echarts"

// ESmodule模式引入方式

 

b. var echarts = require('echarts'); //echart5版本的

// CommonJS模式引入方式

 

// 其中，按需引入：import * as echarts from 'echarts/lib/echarts'

 

试用确实可行