在Vue 2和Vue 3中,Element UI和Element Plus的Container组件都用于布局,但它们是两个不同的版本库,提供不同程度的兼容性和更新。
Element UI 是为 Vue 2 设计的UI库,它提供了丰富的Vue 2组件。
Element Plus 是Element UI的升级版,专门为Vue 3设计,提供了与Vue 3完全兼容的组件。
安装方法:
对于Vue 2项目,使用Element UI:
npm install element-ui --save或者使用yarn:
yarn add element-ui对于Vue 3项目,使用Element Plus:
npm install element-plus --save或者使用yarn:
yarn add element-plus在项目中全局或局部引入Container组件:
Vue 2 使用Element UI:
// main.js 或 app.js
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)
});Vue 3 使用Element Plus:
// main.js 或 app.js
import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
 
const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');在组件内部使用Container:
<template>
  <el-container>
    <!-- 内容 -->
  </el-container>
</template>
 
<script>
export default {
  // 组件逻辑
};
</script>注意:在Vue 3项目中,不需要单独引入Container组件,因为Element Plus包含了所有组件。如果你只需要Container组件,可以按需引入。
以上是安装和基本使用的方法,具体使用时,请参考对应版本的Element UI或Element Plus官方文档。