elementui npm

安装 Element UI 的步骤

使用 npm 安装 Element UI 前，确保已安装 Node.js 和 npm 环境。Node.js 官网提供下载和安装指南。

打开终端或命令行工具，进入项目目录，运行以下命令安装 Element UI：

npm install element-ui -S

在项目中引入 Element UI

安装完成后，在项目的 main.js 或入口文件中全局引入 Element UI：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

如需按需引入组件以减少打包体积，可借助 babel-plugin-component 插件。先安装插件：

npm install babel-plugin-component -D

在 babel.config.js 中配置插件：

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

使用 Element UI 组件

配置完成后，可在组件中按需引入并使用 Element UI 的组件。例如引入按钮和表格：

import { Button, Table } from 'element-ui'

export default {
  components: {
    'el-button': Button,
    'el-table': Table
  }
}

主题定制

Element UI 支持主题定制。通过安装主题生成工具，可自定义主题颜色：

npm install element-theme -g
npm install element-theme-chalk -D

初始化变量文件并编译主题：

et -i
et

常见问题解决

安装过程中若出现网络问题，可尝试切换 npm 镜像源：

npm config set registry https://registry.npm.taobao.org

若遇到版本兼容性问题，可指定 Element UI 版本安装：

npm install element-ui@2.15.13 -S