若依分离版-前端使用echarts组件
创始人
2024-11-04 14:39:34

 

1  npm list:显示已安装的模块

        该命令用于列出当前项目的所有依赖关系,包括直接依赖和间接依赖。执行 npm list 时,npm 将从当前目录开始,递归地列出所有已安装的模块及其版本信息

npm list

 2 npm outdated:用于检查当前项目中的npm包是否有新的版本可用


          npm outdated是一个npm命令,用于检查当前项目中的npm包是否有新的版本可用。运行npm outdated命令会列出当前项目中已安装的包的版本信息,并显示出最新的可用版本。如果某个包的当前版本已经过时,npm outdated会在版本信息中用红色标记出来,提醒开发者更新该包。这个命令可以帮助开发者及时了解项目中的包是否需要更新,以便保持项目的安全性和稳定性。

npm outdated

 3 npm view: 此命令显示有关包的数据并将其打印到标准输出。

            根据后面跟有包名,显示详细的信息

npm view   echarts   

4 Package.json:文件来查看已安装的模块。这些方法可以帮助我们了解项目中使用的模块及其版本.

        前面的工作总结了,有关查看模块的安装信息和更新的信息。


5  安装echarts组件,安装命令如下:npm install echarts vue-echarts  --force -save

注:vue,echarts,vue-echarts的版本问题,版本错误,也不能运行起来啊,

  • 基于vue2版本使用的echarts、vue-echarts依赖包版本:
    “vue”: “^2.6.11”,
    “echarts”: “^4.9.0”,
    “vue-echarts”: “^5.0.0-beta.0”

  • 基于vue3版本使用的echarts、vue-echarts依赖包版本:
    “echarts”: “^5.2.2”,
    “vue”: “^3.2.16”,
    “vue-echarts”: “^6.0.0”

npm install echarts@4.9.0 vue-echarts@5.0.0-beta.0  --force -save 

6 安装  composition-api,命令如下:
        注:Vue 2 下使用 vue-echarts,必须还要安装 @vue/composition-api :

npm i -D @vue/composition-api

7 main.js中全局注册组件

import 'echarts' import ECharts from 'vue-echarts' Vue.component('v-chart', ECharts)

可使得如下命令来查看echarts的使用情况 

import ECharts from 'vue-echarts' console.log(ECharts)

8 基本使用

        注:如下代码所示,v-chart标签的名称,要和main.js中Vue.component('v-chart', ECharts)注册的名称一致,都要为v-chart

        v-chart的属性值options,不是option,注意这个坑!

   

vue-echarts基本使用-CSDN博客

 Vue-ECharts基本使用及Demo_ailed to resolve import "vue-echarts" from-CSDN博客

相关内容

热门资讯

裸辞做“一人公司”,我后悔了 去年这个时候,一位以色列程序员正在东南亚旅行。他顺手把一个在脑子里转了很久的想法做成了产品,一个让任...
南京建成国内首个Pre-6G试... 4月21日,2026全球6G技术与产业生态大会在南京开幕。全息互动技术展台前,一名远在北京的工作人员...
超梵求职受邀参加“2025抖音... 超梵求职受邀参加“2025抖音巨量引擎成人教育行业生态大会”,探讨分享优质内容传播,服务万千学员。 ...
摩托罗拉Razr 2026(R... IT之家 4 月 22 日消息,摩托罗拉宣布新一代 Razr 折叠手机将于 4 月 29 日在美国发...
库克卸任,特纳斯领航:苹果新纪... 苹果首席执行官蒂姆·库克将卸任,硬件工程主管约翰·特纳斯将接任,苹果公司今天宣布此事。 库克将在夏季...