npm elementui

安装 Element UI

使用 npm 安装 Element UI 需要运行以下命令：

npm install element-ui -S

安装完成后，可以在项目中引入 Element UI 的组件和样式。

引入 Element UI

在项目的入口文件（如 main.js）中，全局引入 Element UI：

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)
});

按需引入 Element UI

如果只需要部分组件，可以使用按需引入的方式，减少打包体积。需要安装 babel-plugin-component：

npm install babel-plugin-component -D

在 babel.config.js 或 .babelrc 中添加配置：

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

然后在项目中按需引入组件：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import 'element-ui/lib/theme-chalk/button.css';
import 'element-ui/lib/theme-chalk/select.css';

Vue.use(Button);
Vue.use(Select);

使用 Element UI 组件

在 Vue 组件中可以直接使用 Element UI 的组件：

<template>
  <div>
    <el-button type="primary">按钮</el-button>
    <el-select v-model="value" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' }
      ],
      value: ''
    };
  }
};
</script>

自定义主题

如果需要自定义 Element UI 的主题样式，可以使用官方提供的主题生成工具：

1. 安装主题生成工具：

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

1. 初始化变量文件：

et -i

1. 修改生成的 element-variables.scss 文件中的变量值。

2. 编译主题：

et

1. 在项目中引入编译后的主题文件：

import '../theme/index.css';

文档和资源

更多详细的使用方法和组件文档可以参考 Element UI 官方文档。