在“vue”中找不到导出“h”

问题描述

我想使用“Chartkick”和 Vue 创建图表。但它工作不正常，我遇到了一些错误。错误：

./node_modules/vue-chartkick/dist/vue-chartkick.esm.js 23:13-14 “在‘vue’中没有找到出口‘h’@ ./node_modules/vue-chartkick/dist/vue-chartkick.esm.js @ ./src/main.js @ 多 (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

main.js：

import Vue from 'vue'
import VueRouter from 'vue-router'
import { BootstrapVue,IconsPlugin } from 'bootstrap-vue'
import Chartkick from 'vue-chartkick'
import Chart from 'chart.js'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(Chartkick.use(Chart))
Vue.use(VueRouter)
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

Vue.config.productionTip = false

import App from './App.vue'
import Home from './components/pages/Home.vue'
import Products from './components/pages/Products.vue'

const router = new VueRouter({
  mode: 'history',routes: [
    { path: '/',component: Home,name: 'index'},{ path: '/products',component: Products,name: 'products'},],/*
  scrollBehavior (to,from,savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0,y: 0 }
    }
  }
  */
})

new Vue({
  el: '#app',render: h => h(App),router
})

package.json：

{
  "name": "yns-site","description": "A Vue.js project","version": "1.0.0","author": "Yunus Emre Söğüt <yunusesogut@gmail.com>","license": "MIT","private": true,"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot","build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },"dependencies": {
    "bootstrap": "^4.6.0","bootstrap-vue": "^2.21.2","chart.js": "^2.9.4","vue": "^2.6.12","vue-chartkick": "^1.0.0","vue-router": "^3.5.1"
  },"browserslist": [
    "> 1%","last 2 versions","not ie <= 8"
  ],"devDependencies": {
    "babel-core": "^6.26.0","babel-loader": "^7.1.2","babel-preset-env": "^1.6.0","babel-preset-stage-3": "^6.24.1","cross-env": "^5.0.5","css-loader": "^0.28.7","file-loader": "^1.1.4","node-sass": "^4.5.3","sass-loader": "^6.0.6","vue-loader": "^13.0.5","vue-template-compiler": "^2.4.4","webpack": "^3.6.0","webpack-dev-server": "^2.9.1"
  }
}

组件：

<template>
    <div>
        <hamburger-menu class="menu-opt"></hamburger-menu>
        <h1>Burası ürünler sayfası</h1>
            <div id="products">
                <geo-chart :data="chartData"></geo-chart>
            </div>
        <footer-Box></footer-Box>
    </div>
</template>

<script>
import HamburgerMenu from '../HamburgerMenu.vue'
import FooterBox from '../FooterBox.vue'


export default {
    name: 'Products',components: { HamburgerMenu,FooterBox},data() {
        return {
            chartData: [["United States",50],["RU",80],["Germany",70]]
        }
    }
}
</script>

<style lang="scss">
    #products {
        height: 1000px;
        width: 100%;
    }
</style>

这如何解决问题。谢谢。

解决方法

您正在尝试使用仅适用于 Vue 3 的 vue-chartkick 版本，但您正在使用 Vue 2

最新版本适用于 Vue 3。对于 Vue 2，使用版本 0.6.1 和 this readme。

chartkick vue.js