Question

我是一名Java开发者，对前端的东西完全不熟悉，目前正在研究构建一个小Vue-App。因此我想使用一个库（称为vue-good-table，但我认为这几乎无关紧要）。

我通过npm（npm install --save vue-good-table）下载并安装了它，现在我正在尝试使用vue-cli提供的基本项目模板，如下所示：1 HelloWorld-component，将它重命名为在Home.vue中加载的IssueTable.vue - 视图，App.vue作为起点，main.js和router.js也在那里：Project setup

然后我尝试将import和Vue.use语句添加到main.js文件中，因为它似乎是已经存在的导入的位置，所以它看起来像这样：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import VueGoodTable from 'vue-good-table'

Vue.use(VueGoodTable)

Vue.config.productionTip = false

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

这不会使它工作，我没有看到我期望在我的IssueTable.vue组件中创建的表。将import和Vue.use - 行添加到组件文件本身似乎也无效。

所以我的问题是，我该怎样做才能使用这个库？

非常感谢：）

Answer 1

要使用该插件，您需要将该插件导入组件或在main.js中全局声明以使用它。

尝试一下：

在组件文件中

<template>
  <div>
    <vue-good-table
      :columns="columns"
      :rows="rows"/>
  </div>
</template>

<script>
 import { VueGoodTable } from 'vue-good-table'; 
 import 'vue-good-table/dist/vue-good-table.css'
 export default {
    components: {
      VueGoodTable,
    },
    data(){
        return {
          columns: [
        {
          label: 'Name',
          field: 'name',
        },
        {
          label: 'Age',
          field: 'age',
          type: 'number',
        },
        {
          label: 'Created On',
          field: 'createdAt',
          type: 'date',
          dateInputFormat: 'YYYY-MM-DD',
          dateOutputFormat: 'MMM Do YY',
        },
        {
          label: 'Percent',
          field: 'score',
          type: 'percentage',
        },
          ],
          rows: [
        { id:1, name:"John", age: 20, createdAt: '201-10-31:9: 35 am',score: 0.03343 },
        { id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
        { id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },
        { id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 },
        { id:5, name:"Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 },
        { id:6, name:"John", age: 20, createdAt: '2011-10-31', score: 0.03343 },
          ],
        };
      },
 }
</script>

Vue.js包括图书馆

1 个答案: