vue-cli + vue3 + echarts5

Posted 2022-10-01

前言

• 需求：实现柱状图、折线图、饼图、仪表盘
• 柱状图，​​参考​​
• ​​参考2​​
• ​​参考3​​

案例一

• ​​vue-cli4.x + vue3 + echarts5​​
• ​​案例地址​​
• 构建vue项目​​参考​​
• 安装​​开发依赖​​

npm install less
npm install less-loader@5.0.0 

• 安装echarts

npm install echarts -S

• 项目入口main.js中挂载echarts，因为需要挂载echarts，所以main.js使用了如下写法

import Vue from "vue";
import App from ./App.vue;
// 引入
import echarts from echarts
// 全局方法挂载
Vue.prototype.echarts = echarts
new Vue(
  render: h => h(App)
).$mount("#app");

• 结果报错：​​export ‘default’ (imported as ‘Vue’) was not found in ‘vue​​
• 错误原因：当前项目使用vue-cli4.x构建的vue3，重新构建vue2即可使用老版本的写法
• ​​参考​​

# vue老版本写法：
import Vue from "vue";
import App from ./App.vue;
import router from "./router";
new Vue(
  router,
  render: h => h(App)
).$mount("#app");
---------------------------------
# vue新版本写法：
import createApp from vue;
import App from ./App.vue
import router from ./router
createApp(App).use(router).mount(#app)

• 解决方案，将main.js改为如下方式

import  createApp  from vue
import App from ./App.vue
// 引入echarts
import * as echarts from echarts;

// createApp(App)默认是没有赋值，需要赋值出去
const app = createApp(App)
app.mount("#app")
// 进行挂载，类似Vue.prototype.xxx=xxx
app.config.globalProperties.$echarts = echarts

• 使用echarts时报错：​​“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘​​
• 错误原因：引入echarts的方式不对，

# echarts4.x
import echarts from echarts;
# echarts5.x
import * as echarts from echarts;

案例二

• ​​vue3+echarts5+vite2​​
• ​​案例地址​​
• ​​使用vite2构建vue3，my-vue-app是直接指定项目名​​

# npm 6.x
npm init @vitejs/app my-vue-app --template vue

• 安装echarts

npm install echarts --save

• 方式1：直接在子组件中引入并使用

<script>
import * as echarts from echarts;
export default 
    

</script>

• 方式2：项目入口main.js中挂载echarts

import  createApp  from vue
import App from ./App.vue
import * as echarts from echarts
 
const app = createApp(App).mount(#app)
app.echarts=echarts