在 'vue' 中找不到导出 'h'

Question

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

./node_modules/vue-chartkick/dist/vue-chartkick.esm.js 23:13-14 "export 'h' was not found in 'vue' @ ./node_modules/vue-chartkick/dist/vue-chartkick.esm.js @ ./src/main.js @ multi (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>

如何解决这个问题。谢谢。

Answer 1

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

GH

The latest version works with Vue 3. For Vue 2, use version 0.6.1 and this readme.

在 'vue' 中找不到导出 'h'

export 'h' was not found in 'vue'

chartkick

vue.js

chart.js