当前位置: 首页 > 后端技术 > Node.js

VUE+Echarts创建项目

时间:2023-04-04 01:36:43 Node.js

#barchart{width:600px;高度:400px;}1.使用cnpm添加vue-cli安装cnpm由于npm服务器在国外,网速很慢。为了解决这个问题,淘宝在国内做了一个同步镜像网站http://npm.taobao.org/。我们可以安装国内镜像cnpm来提高模块的安装速度。npminstallcnpm-gvue-cli脚手架全局安装cnpminstall-g@vue/cliinstallyarn使用cnpm全局安装yarn,可以直接在项目中使用yarn安装模块,比npm快(这部分不用,可以继续用cnpm)cnpminstall-gyarn2.初始化vue+Echarts项目,创建vue项目vuecreateprojectname选择默认设置跳转到项目目录cdprojectname运行项目使用yarnserve运行项目,在http://localhost:8080访问如下界面浏览器,表示vue项目成功创建cnpm并添加echarts在项目根目录使用cnpm安装echarts'Vue.prototype.$echarts=echarts在BarChart.vue中引用创建一个div,用于放置柱形图并在脚本标签中配置组件元素。,因为要保证BarChart挂载到页面上,所以需要在挂载函数#barchart{width:600px;高度:400px;}在app.vue中引入组件BarChart.vue部分导入因为使用全局导入时,会将所有图形打包到文件中,会造成文件非常大。所以在项目中推荐使用按需导入的方式。只有使用到的图形才会打包到文件中,大大减小了打包文件的体积。加载速度更快。只需要改BarChart.vue