Vue.js, включая библиотеку

Question

Я разработчик Java, совершенно новый для Frontend, и в настоящее время изучаю создание небольшого Vue-приложения.Для этого я хочу использовать библиотеку (называемую vue-good-table, но я думаю, что она не очень важна).

Я скачал и установил ее через npm (npm install --save vue-good-table)и теперь я пытаюсь заставить его работать с базовым шаблоном проекта, предоставленным vue-cli, похожим на это: 1 HelloWorld-компонент, переименовал его в IssueTable.vue, загружая в Home.vue - представление, App.vue в качестве начальной точкии main.js и router.js тоже там: Настройка проекта

Затем я попытался добавить оператор 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>