使用Element UI官网示例报错：render function or template not defined

Hey there! I totally get how frustrating it is when you're just starting out with Vue.js and Element UI, and the official examples don't work as expected. Let's break down this error and get your Container component up and running.

First, that error usually pops up when Vue can't find a valid template or render function for a component—most often because the Element UI components aren't properly set up, or there's an issue with your component structure. Here are the steps to fix it:

1. Make sure Element UI is properly installed and registered #

If you're using a Vue CLI project, start by double-checking your setup:

• Global Registration (easiest for beginners): In your main.js file, make sure you've imported Element UI and its styles, and told Vue to use it:

  import Vue from 'vue';
  import ElementUI from 'element-ui';
  import 'element-ui/lib/theme-chalk/index.css';
  import App from './App.vue';
  
  Vue.use(ElementUI);
  
  new Vue({
    el: '#app',
    render: h => h(App)
  });
  

• Local Registration (if you only need Container components in one place): If you don't want to register all Element UI components globally, import just the ones you need in your target component:

  import { ElContainer, ElAside, ElMain, ElHeader, ElFooter } from 'element-ui';
  import 'element-ui/lib/theme-chalk/index.css';
  
  export default {
    components: {
      ElContainer,
      ElAside,
      ElMain,
      ElHeader,
      ElFooter
    },
    // ... other component logic
  }
  

Don't forget the stylesheet! Without it, not only will components look wrong, but sometimes they might not render correctly either.

2. Verify your Container component structure follows Element UI's rules #

Element UI's Container has strict nesting requirements—if you break them, you might run into rendering errors. A valid structure looks like this:

<el-container style="height: 500px; border: 1px solid #eee">
  <!-- ElAside must be a direct child of ElContainer (or nested ElContainer) -->
  <el-aside width="200px" style="background-color: #b3c0d1">
    <!-- Your aside content here -->
  </el-aside>
  <el-container>
    <!-- ElHeader and ElMain inside a nested ElContainer -->
    <el-header style="text-align: right; font-size: 12px">
      <!-- Header content -->
    </el-header>
    <el-main style="background-color: #e9eef3">
      <!-- Main content -->
    </el-main>
  </el-container>
</el-container>

Avoid putting non-Container components directly inside <el-container> unless they're wrapped in the allowed child components (el-header, el-aside, el-main, el-footer, or another el-container).

3. Check your Vue instance setup for conflicts #

If you're manually setting up your Vue instance (not using Vue CLI's default), make sure you're not mixing template and render properties—this can cause conflicts. Stick to one:

• Correct (render function):

  new Vue({
    el: '#app',
    render: h => h(App)
  });
  

• Correct (template):

  new Vue({
    el: '#app',
    template: '<App/>',
    components: { App }
  });
  

4. Double-check for typos #

It sounds silly, but typos are a common culprit! Make sure you're using the correct component names:

• <el-container> (not el-contain or el-containerr)
• <el-aside> (not el-sidebar)
• If you're using local registration, ensure the component names in your components object match the imported ones (e.g., ElContainer in JS maps to <el-container> in the template).

Start with these steps—9 times out of 10, the issue is either missing registration, incorrect nesting, or a typo. Once you fix those, your Container component should render just like the official example!

内容的提问来源于stack exchange，提问作者S7_0