yarn elementui
安装 Element UI 与 Yarn
Element UI 是一个基于 Vue.js 的组件库,使用 Yarn 作为包管理工具可以快速安装和集成。以下是具体方法:
确保已安装 Yarn 和 Vue.js 在开始之前,需要全局安装 Yarn 和 Vue CLI。通过以下命令检查是否已安装:
yarn --version
vue --version
如果未安装,可以通过 npm 安装:
npm install -g yarn @vue/cli
创建 Vue 项目 使用 Vue CLI 创建一个新项目:
vue create my-project
cd my-project
安装 Element UI 在项目目录中,通过 Yarn 添加 Element UI:
yarn add 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'
Vue.use(ElementUI)
按需引入(可选) 如果希望减少打包体积,可以按需引入组件。首先安装 babel-plugin-component:
yarn add babel-plugin-component -D
修改 babel.config.js:
module.exports = {
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
之后在组件中单独引入需要的模块:
import { Button, Select } from 'element-ui'
Vue.use(Button)
Vue.use(Select)
验证安装 启动开发服务器,检查 Element UI 是否正常工作:

yarn serve
在页面中使用 Element UI 组件测试:
<template>
<el-button type="primary">按钮</el-button>
</template>
主题定制
Element UI 支持主题定制。通过安装主题生成工具修改默认样式:
yarn add element-theme -g
yarn add element-theme-chalk -D
初始化变量文件并编译主题:
et -i
et
在 main.js 中引用生成的主题文件:
import '../theme/index.css'






