Question

将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 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，但还是没用。

Answer 1

问题似乎出在高度样式上。

在查看Cheetah Vue演示的页面源代码时，他们放弃了一些样式，这些样式似乎覆盖了标准的Cheetah样式。

如果将其添加到组件中，看起来就可以了

 Private Sub Document_ContentControlOnExit(ByVal ContentControl As ContentControl, Cancel As Boolean)

ContentControls(10).Range.Text = ContentControls(8).Range.Text
ContentControls(13).Range.Text = ContentControls(11).Range.Text
ContentControls(16).Range.Text = ContentControls(14).Range.Text

End Sub

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

1 个答案: