![](/img/trans.png)
[英]Module not found: Can't resolve '@emotion/react' in 'E:\frontend\node_modules\@mui\styled-engine'
[英]Third party VueJS component can't be found in node_modules
将vue-cli
version 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
中,我的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
但它仍然不起作用。
问题似乎出在高度样式上。
查看 Cheetah Vue 演示的页面源代码,它们添加了一些似乎覆盖标准猎豹样式的样式。
如果你把它添加到你的组件中,它看起来没问题
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.