在 node_modules 中找不到第三方 VueJS 组件

Posted 2023-02-23

【中文标题】在 node_modules 中找不到第三方 VueJS 组件

【英文标题】：Third party VueJS component can't be found in node_modules

【发布时间】：2019-02-28 07:20:18

【问题描述】：

将vue-cli 版本3 用于新的vuejs 项目（我已经研究了很多vuejs，但这是第一次尝试实现第三方组件）。我正在尝试使用看起来令人印象深刻的网格组件。组件是here。

我已经设置了我的环境，按照他们网站的指示使用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  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" >
                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 中，我的 linter 在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，但还是不行。

【问题讨论】：

请添加ReportsGrid.vue的代码。

完成。非常感谢

你试过add new declaration (.d.ts) file containing declare module 'vue-cheetah-grid';` 吗？

我查了一下，但我没有这方面的经验，也不确定。在等待这里的帮助时，我实际上仍在阅读它。我在哪里添加这样的声明？

我发生了什么事...我需要先构建原始的cheetah-grid 吗？它是通过 npm 安装的，但我必须编译吗？ future-architect.github.io/cheetah-grid/0.7/demos/…

【参考方案1】：

问题似乎与高度样式有关。

查看 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>

【讨论】：

有趣，所以他们破坏了自己的组件？谢谢！我想我会按照我想要的方式使用您的代码作为开始。非常感谢！