Vue elementUI 按需引用时为何引入 Button 成功而引入 Container 失败？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 1924 天前的主题，其中的信息可能已经有所发展或是发生改变。

可以看到按钮是成功的

但 el-container 组件没有成功

附上代码：

<template>
  <el-container>
    <el-header>Header</el-header>
    <el-main>
      <el-button type="success">成功按钮</el-button>
    </el-main>
  </el-container>
</template>

<script>
import Vue from "vue/dist/vue.js";

import "element-ui/lib/theme-chalk/index.css";
import { Button, Container } from "element-ui";
Vue.component(Button.name, Button);
Vue.component(Container.name, Container);

export default {};
</script>

<style scoped>
</style>

5 条回复 • 2019-08-13 13:47:49 +08:00

imherer

2019-08-13 12:34:10 +08:00

Header 也是需要单独引入的，至于 Container 为啥没成功，未知，看代码好像也没问题啊

imherer

2019-08-13 12:35:37 +08:00

@imherer 不对啊，报错不是提示了么，是 header 和 main 啊，你没引入 header 和 main ....

hewelzei

2019-08-13 12:39:02 +08:00 via Android

Main 和 Header 组件都需要单独引入的，Container 是成功没有报错，报的是 Main 和 Header 没有找到，仔细看看报错提示吧

Newyorkcity

2019-08-13 12:41:29 +08:00

@imherer
按您说的改成
import "element-ui/lib/theme-chalk/index.css";
import { Button, Container,Header,Main } from "element-ui";
Vue.component(Button.name, Button);
Vue.component(Container.name, Container);
Vue.component(Header.name,Header);
Vue.component(Main.name,Main);
就解决了。。。
但我觉得这文档写得还需要完善吧。我很自然的就以为一个 Container 组件就够了。。

imherer

2019-08-13 13:47:49 +08:00

@Newyorkcity element.eleme.cn/2.7/#/zh-CN/component/quickstart#an-xu-yin-ru
文档有写的