搭建elementui

安装 Element UI

Element UI 是一个基于 Vue.js 的组件库，适用于快速开发前端界面。以下是搭建 Element UI 的步骤：

1. 创建 Vue 项目 确保已安装 Node.js 和 npm/yarn。使用 Vue CLI 创建项目：

npm install -g @vue/cli
vue create my-project
cd my-project

2. 安装 Element UI 在项目中安装 Element UI 及其依赖：

npm install element-ui

3. 引入 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({
  render: h => h(App),
}).$mount('#app');

4. 按需引入（可选） 若需减小打包体积，可使用按需引入。安装 babel-plugin-component：

npm install babel-plugin-component -D

修改 babel.config.js：

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
};

在 main.js 中按需引入组件：

import { Button, Select } from 'element-ui';
Vue.use(Button).use(Select);

5. 运行项目 启动开发服务器：

npm run serve

自定义主题

1. 安装主题工具 安装 element-theme 和 element-theme-chalk：

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

2. 初始化变量文件 生成主题变量文件：

node_modules/.bin/et -i

3. 修改主题变量 编辑生成的 element-variables.scss，例如修改主色：

$--color-primary: #ff0000;

4. 编译主题 运行编译命令：

node_modules/.bin/et

编译后，在 main.js 中引入生成的 theme/index.css 替换默认样式。

常见问题

样式未生效 检查是否正确引入 CSS 文件，或尝试清除浏览器缓存。

按需引入无效 确保 Babel 配置正确，并重启开发服务器。

组件未注册 确认组件已在 main.js 或局部组件中正确注册。