Vue.js 包括库答案

【问题标题】：Vue.js including libraryVue.js 包括库
【发布时间】：2018-11-07 10:41:45
【问题描述】：

我是一个 Java 开发人员，对前端的东西完全陌生，目前正在考虑构建一个小的 Vue-App。为此，我想使用一个库（称为 vue-good-table，但我猜几乎无关紧要）。

我通过 npm (npm install --save vue-good-table) 下载并安装了它，现在我正在尝试使其与 vue-cli 提供的基本项目模板一起工作，如下所示：1 HelloWorld-component,将其重命名为 IssueTable.vue 正在加载 Home.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 - 行添加到组件文件本身似乎也不起作用。

所以我的问题是，我必须做什么才能使用图书馆？

非常感谢:)

【问题讨论】：

table lib的Getting Started部分也导入了CSS：import 'vue-good-table/dist/vue-good-table.css'，你可以试试看。此外，IssueTable.vue 的（相关）代码会很有趣。

标签： vue.js vue-component npm-install

【解决方案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>

【讨论】：