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

Question

我想使用“Chartkick”和 Vue 创建一个图表。但它无法正常工作，并且出现一些错误。错误：

\n

\n

./node_modules/vue-chartkick/dist/vue-chartkick.esm.js 23:13-14\n"在“vue”@\n 中找不到导出“h”。/node_modules/vue-chartkick/dist/vue -chartkick.esm.js @\n./src/main.js @ multi\n(webpack)-dev-server/client?http://localhost:8080\nwebpack/hot/dev-server ./src/main .js

\n

\n

main.js：

\n

import Vue from 'vue'\nimport VueRouter from 'vue-router'\nimport { BootstrapVue, IconsPlugin } from 'bootstrap-vue'\nimport Chartkick from 'vue-chartkick'\nimport Chart from 'chart.js'\n\nimport 'bootstrap/dist/css/bootstrap.css'\nimport 'bootstrap-vue/dist/bootstrap-vue.css'\n\nVue.use(Chartkick.use(Chart))\nVue.use(VueRouter)\nVue.use(BootstrapVue)\nVue.use(IconsPlugin)\n\nVue.config.productionTip = false\n\nimport App from './App.vue'\nimport Home from './components/pages/Home.vue'\nimport Products from './components/pages/Products.vue'\n\nconst router = new VueRouter({\n  mode: 'history',\n  routes: [\n    { path: '/', component: Home, name: 'index'},\n    { path: '/products', component: Products, name: 'products'},\n  ],\n\n  /*\n  scrollBehavior (to, from, savedPosition) {\n    if (savedPosition) {\n      return savedPosition\n    } else {\n      return { x: 0, y: 0 }\n    }\n  }\n  */\n})\n\nnew Vue({\n  el: '#app',\n  render: h => h(App),\n  router\n})\n

\n

包.json：

\n

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

\n

成分：

\n

<template>\n    <div>\n        <hamburger-menu class="menu-opt"></hamburger-menu>\n        <h1>Buras\xc4\xb1 \xc3\xbcr\xc3\xbcnler sayfas\xc4\xb1</h1>\n            <div id="products">\n                <geo-chart :data="chartData"></geo-chart>\n            </div>\n        <footer-box></footer-box>\n    </div>\n</template>\n\n<script>\nimport HamburgerMenu from '../HamburgerMenu.vue'\nimport FooterBox from '../FooterBox.vue'\n\n\nexport default {\n    name: 'Products',\n    components: { HamburgerMenu, FooterBox},\n    data() {\n        return {\n            chartData: [["United States", 50], ["RU", 80], ["Germany", 70]]\n        }\n    }\n}\n</script>\n\n<style lang="scss">\n    #products {\n        height: 1000px;\n        width: 100%;\n    }\n</style>\n

\n

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

\n

Answer 1

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

生长激素

最新版本适用于 Vue 3。对于 Vue 2，请使用版本 0.6.1 和此自述文件。