Element UI组件安装使用会了吗?-CFANZ编程社区

Element UI 是一套基于 Vue.js 构建的开源 UI 组件库，它提供了丰富且易于使用的 UI 组件，能够帮助开发者快速搭建企业级的页面。以下是详细的 Element UI 组件安装及使用步骤：

安装 Element UI

方法一：使用 npm 安装

适用于 Node.js 环境下的项目，如果你正在使用 Vue CLI 创建的项目，可以在终端中执行以下命令：

npm install element-ui --save

这将会把 Element UI 安装到你的项目中，并在 package.json 文件里记录为依赖包。

方法二：CDN 引入

如果不想在本地安装，可以选择通过 CDN 方式引入 Element UI：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My App</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app"></div>

  <!-- 引入 Vue 和 Element UI -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  
  <script>
    // 初始化 Vue 及 Element UI
    Vue.use(ElementUI);
    // ...
  </script>
</body>
</html>

引入 Element UI

在 Vue 项目中，你需要在主入口文件（通常是 src/main.js）中全局引入 Element UI 并注册到 Vue：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; // 引入默认主题样式

Vue.use(ElementUI);

new Vue({
  // ...其他配置项
}).$mount('#app');

使用 Element UI 组件

一旦 Element UI 成功引入，你就可以在 Vue 组件中使用其提供的各种 UI 组件。例如，使用一个按钮组件：

<template>
  <el-button type="primary">主要按钮</el-button>
</template>

按需引入组件

为了减小项目体积，还可以按需引入 Element UI 组件：

npm install babel-plugin-component -D

然后在 .babelrc 或 babel.config.js 中配置插件：

{
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

接着按需引入：

import { Button } from 'element-ui';

Vue.use(Button);

这样只会将 Button 组件及其对应的 CSS 样式引入到项目中。

Element UI组件安装使用会了吗?