ElementUI的搭建使用过程

目录

一.概念

二.安装

三.使用组件 

1.引入ElementUI

2.配置路由

3.使用

四.ElementUI举例

---

一.概念

    Element UI 是一款基于 Vue.js 的桌面端组件库，由饿了么团队开发并维护。它提供了一套完整的 UI 组件，包含按钮、表单、表格、对话框等常见元素，能够帮助开发者快速构建具有一致性和美观性的用户界面。Element UI 采用响应式设计，支持多种主题定制，且有丰富的文档和社区支持，因此在 Vue.js 项目中广泛应用。由于其成熟度和易用性，Element UI 成为很多企业级项目的首选 UI 解决方案。

二.安装

     官网：https://element.eleme.cn/2.11/#/zh-CN/

    我们有很多安装方式，但最便捷，容易且推荐的方法就是通过使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

     前提是要安装node.js，否则无法安装，具体语句如下，

npm i element-ui -S

三.使用组件 

 1.引入ElementUI

      在main.js中引入

// 导入elementui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

2.配置路由

    千万别忘记在main.js配置路由，否则就会访问不到

//导入组件路由
import router from './router/index.js'
Vue.use(router);

new Vue({
  render: h => h(App),
  router,
}).$mount('#app')

3.使用

    引入 Element-UI 后，就可以在项目中使用其提供的各种组件。例如，使用一个按钮组件：

<template>
  <div id="app">
    <el-button type="primary">主要按钮</el-button>
  </div>
</template>

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

四.ElementUI举例

   登录表单

			<!-- 登录表单 -->
			<div style="margin-top: 100px; padding-right: 60px;">
				<el-form :ref="form" label-width="100px" >
				
				<el-form-item label="账号" >
				    <el-input v-model="account"></el-input>
				  </el-form-item>
				  
				  <el-form-item label="密码"  > 
				      <el-input v-model="password" show-password></el-input>
				    </el-form-item>
					
					<el-form-item>
					    <el-button type="primary" @click="login()">登录</el-button>
					    <el-button >取消</el-button>
					  </el-form-item>
		    </el-form>
			</div>

网页内容ElementUI

<template>
	<div>
		 <el-container>
			 <!-- 头部 -->
		    <el-header style="text-align: right; font-size: 12px">
				<div class="header-title">后台管理系统</div>
		      <el-dropdown>
		        <i class="el-icon-setting" style="margin-right: 15px"></i>
		        <el-dropdown-menu slot="dropdown">
		          <el-dropdown-item>修改密码</el-dropdown-item>
		          <el-dropdown-item><span @click="logout()">安全退出</span></el-dropdown-item>
		        </el-dropdown-menu>
		      </el-dropdown>
		      <span>hkt</span>
		    </el-header>
			<!-- Aside -->
		  <el-container style="height: 500px; border: 1px solid #eee">
		    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
		      <el-menu :default-openeds="['1', '3']" router>
		        <el-submenu index="1">
		          <template slot="title"><i class="el-icon-message"></i>操作菜单</template>
		            
		            <el-menu-item index="/majorlist">专业管理</el-menu-item>
		            <el-menu-item index="studentlist">学生管理</el-menu-item>
		        </el-submenu>
		      </el-menu>
		    </el-aside>
			<!-- 工作 -->
		    <el-main>
				<router-view></router-view>
			</el-main>
		  </el-container>
		</el-container>
	</div>
</template>

成果：

一键三连哦，兄弟姐妹们。