elementui搭建

Element UI 是一个基于 Vue.js 的组件库，可以帮助开发人员快速构建现代化的 Web 应用程序。下面简单介绍如何使用 Element UI 搭建一个基础的页面。

1. 安装 Element UI

首先需要安装 Element UI，可以通过 npm 或 yarn 进行安装：

npm i element-ui -S

或者

yarn add element-ui

2. 引入 Element UI

在 Vue 项目的入口文件（main.js）中引入 Element UI：

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

Vue.use(ElementUI);

3. 使用 Element UI 组件

在需要使用 Element UI 组件的地方引入相应组件即可。例如，在 App.vue 中使用一个 Button 组件：

<template>
  <div>
    <el-button>Click me!</el-button>
  </div>
</template>

<script>
  export default {
    name: 'App'
  }
</script>

4. 自定义主题

Element UI 提供了多种主题，可以通过修改样式变量来自定义主题。具体步骤如下：

在项目根目录下创建一个名为 `theme` 的文件夹，在其中创建一个名为 `index.css` 的文件。

在 `index.css` 中编写样式变量，例如：

/* 修改主色调为红色 */
$--color-primary: #ff4d4f;

在 `main.js` 中引入自定义主题：

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

Vue.use(ElementUI);

以上就是使用 Element UI 搭建页面的基本步骤，可以根据实际需求使用更多的 Element UI 组件和功能。