Сторонний компонент VueJS не может быть найден в node_modules - PullRequest
Новая
       12

Сторонний компонент VueJS не может быть найден в node_modules

0 голосов
/ 24 сентября 2018

Использование vue-cli версии 3 для нового vuejs проекта (я много изучал vuejs, но впервые пытаюсь реализовать сторонний компонент).Я пытаюсь использовать компонент сетки, который выглядит впечатляюще.Компонент здесь .

Я настроил свою среду, установил сетку и компонент, используя npm, как указано на их сайте, настроил свой собственный компонент и импортировал все (я думал)должным образом.Я даже настроил свойство массива данных для использования в качестве теста для заполнения сетки.Я запустил npm install и подтвердил, что папки были установлены в моей папке node_modules (они есть).Вот мой main.js: 

import Vue from 'vue'
import App from './App.vue'
import CGrid from 'vue-cheetah-grid'

Vue.config.productionTip = false;
Vue.use(CGrid);

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

А вот мой App.vue: 

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <reports-grid></reports-grid>
  </div>
</template>

<script>
import ReportsGrid from './components/ReportsGrid.vue'

export default {
  name: 'app', 
  components: {
    reportsGrid: ReportsGrid
  }
}
</script>

Вот мой файл компонента, ReportsGrid.vue: 

<template>
    <div class="grid">
        <c-grid ref="grid" :data="records" :frozen-col-count="1">

            <c-grid-column field="team" width="85">
                Team
            </c-grid-column>
            <c-grid-column-group caption="Estimate">

                <c-grid-column field="quotenum">
                    Quote #
                </c-grid-column>

                <c-grid-column field="quotedate">
                    Date
                </c-grid-column>

                <c-grid-column field="customer">
                    Customer
                </c-grid-column>

                <c-grid-column field="country">
                    Country
                </c-grid-column>

                <c-grid-column field="type">
                    Type
                </c-grid-column>

                <c-grid-column field="quoteamount">
                    Quote Amount
                </c-grid-column>
            </c-grid-column-group>
            <c-grid-column-group caption="Sales Order">

                <c-grid-column field="salesordernum">
                    Sales Order #
                </c-grid-column>

                <c-grid-column field="salesorderamount">
                    Sales Order Amount
                </c-grid-column>

                <c-grid-column field="margin">
                    Average Margin
                </c-grid-column>

                <c-grid-column field="status">
                    Status
                </c-grid-column>
            </c-grid-column-group>
        </c-grid>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data: function() {
            return {
                 records: [
                {
                    team: 'GG', quotenum: '20211', quotedate:'today', customer: 'AirNN', country: 'Peru', salesordernum: '11111',
                    type: 'Production', quoteamount: '$1300', salesorderamount: '$1200', margin: '25%', status: 'WIN Partial'
                },
                {
                    team: 'LL', quotenum: '20200', quotedate:'today', customer: 'Paris', country: 'Mexico', salesordernum: '11122',
                    type: 'Bid', quoteamount: '$12300', salesorderamount: '$10300', margin: '20%', status: 'WIN Partial'
                }
            ]

            }
        }
    }
</script>

Когда я запускаю это, я ничего не вижу на своей странице (также без ошибок).Я заметил, что в моем main.js мой линтер выдает ошибку на линии import CGrid from 'vue-cheetah-grid' (эта ошибка не отображается в моем терминале, только в моем файле main.js: 

[ts]
Could not find a declaration file for module 'vue-cheetah-grid'. 'path.to/node_modules/vue-cheetah-grid/dist/vueCheetahGrid.js' implicitly has an 'any' type.
  Try `npm install @types/vue-cheetah-grid` if it exists or add a new declaration (.d.ts) file containing `declare module 'vue-cheetah-grid';`

Этоновая ошибка для меня. Папки находятся в папке node_modules. Я даже попробовал npm install @types/vue-cheetah-grid, но он все еще не работал.

1 Ответ

0 голосов
/ 25 сентября 2018

Проблема, похоже, связана со стилем высоты.

Если посмотреть на исходный код страницы для демонстрации Cheetah Vue, они упали в некоторых стилях, которые, кажется, перекрывают стандартные стили Cheetah.

Если вы добавите это к своему компоненту, он выглядит хорошо 

<style scoped>
  html {
    height: 100%;
  }
  body {
    height: calc(100% - 100px);
  }
  .contents {
    padding: 30px;
    box-sizing: border-box;
  }
  .demo-grid {
    width: 100%;
    height: 300px;
    box-sizing: border-box;
    border: solid 1px #ddd;
  }
  .demo-grid.large {
    height: 500px;
  }
  .demo-grid.middle {
    height: 300px;   
  }
  .demo-grid.small {
    height: 240px;   
  }
  .log {
    width: 100%;
    height: 80px;
    background-color: #F5F5F5;
  }
  .hljs { 
    tab-size: 4;
  }
</style>
...