通过element-ui文档,它可以"完全导入,或者只导入你需要的东西".我已经在应用程序入口点main.js中完全导入了它.
main.js
import Vue from 'vue'
import ElementUI from 'element-
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
const Component = () => import(/* webpackChunkName: "component" */ './views/Component.vue')
// eslint-disable-next-line no-new
new Vue({
el: '#app',
components: {Component}
})
Run Code Online (Sandbox Code Playgroud)
像这样可以在我的自定义组件中使用所有element-ui组件.例如,我在Component.vue中使用了按钮组件.看起来很好,按钮在App.vue中呈现.
Component.vue
<template>
<div>
<el-button>{{ buttonText }}</el-button>
</div>
</template>
<script>
export default {
name: 'component',
data () {
return {
buttonText: 'Button Text'
}
},
components: {}
}
</script>
Run Code Online (Sandbox Code Playgroud)
现在我使用vue-jest和@ vue/test-utils创建了对这个组件的测试,我测试的是按钮中的文本是否正确呈现.测试通过,但我有Vue警告按钮组件未注册:
[Vue警告]:未知的自定义元素: - 您是否正确注册了组件?对于递归组件,请确保提供"名称"选项.
这可能正在发生,因为我已经在main.js文件中直接导入了所有element-ui组件(正如他们在文档中提出的那样),而不是在Component.vue中.有谁知道如何避免此警告或如何在测试中导入组件?
Component.spec.js
import { shallow } from '@vue/test-utils'
import Component from …Run Code Online (Sandbox Code Playgroud)