如何引入element UI和VUE.js

在 Vue.js 项目中引入 Element UI 需要遵循以下步骤：

1. **安装依赖**:
- 使用npm（Node Package Manager）全局安装：

     npm install element-ui -D

或者使用yarn：

     yarn add element-ui -D

2. **注册插件**:
在 `main.js` 或其他应用入口文件中添加 Element UI 插件。确保在 Vue 实例化之前导入并注册：

   import { createApp } from 'vue';
   import ElementUI from 'element-ui';
   import 'element-ui/lib/theme-chalk/index.css'; // 引入主题样式

   const app = createApp(App); // 你的主应用组件
   app.use(ElementUI);
   // 如果你想为所有组件提供默认配置，可以在app全局配置：
   app.config.globalProperties.$ELEMENT = {
     size: 'small', // 可选值有：'mini', 'small', 'default', 'large'
     zIndex: 0,
     ... // 其他自定义配置
   };

   app.mount('#app'); // 假设你的应用挂载到id为'app'的元素上

3. **引入组件**:
在你需要使用 Element UI 组件的地方，可以通过 `import` 导入具体组件，然后在模板中使用它们。比如想用`<el-button>`：

   <template>
     <div>
       <el-button type="primary">Hello World</el-button>
     </div>
   </template>

   <script>
   export default {
     components: {
       ElButton: {
         // 注意这里不需要导出，因为ElementUI会自动识别
         functional: true, // 元素类型组件
         render(h, { props }) {
           return h('button', { props }, props.children);
         }
       }
     }
   };
   </script>

遵循这些步骤后，你就可以在 Vue.js 项目中开始使用 Element UI 了。记得根据你的项目需求调整样式和配置选项。