Vue.js, включая библиотеку
Я разработчик Java, совершенно новичок в работе с Frontend и сейчас собираюсь создать небольшое Vue-приложение. Для этого я хочу использовать библиотеку (называемую 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: Настройка проекта
Затем я попытался добавить оператор 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. Добавление строк импорта и Vue.use - в сам файл компонента тоже не работает.
Итак, мой вопрос: что мне нужно сделать, чтобы воспользоваться библиотекой?
Большое спасибо :)
Ответы 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>
Раздел Начиная таблицы lib также импортирует CSS:
import 'vue-good-table/dist/vue-good-table.css', вы можете попробовать. Кроме того, будет интересен (соответствующий) код отIssueTable.vue.