Element-UI快速入门（一）

2022-09-22 337

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Element-UI快速入门

什么是Element UI

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

Element UI是基于Vue 2.0的
Element UI 提供一组组件
Element UI 提供组件的参考实例, 直接复制

官方网站：

https://element.eleme.cn/#/zh-CN/component/installation

搭建环境

创建项目

步骤一: 通过 vue-cli创建项目

vue create eui01

步骤二：运行项目

整合1：插件

安装好vue项目后，进入到项目目录，执行命令

vue add element

整合步骤1：确定引入方式（全部引入、按需引入）

整合2：安装element-ui插件

npm i element-ui --save

整合：element-ui引入

官方提供了2种引入方式：完整引入、按需引入

完整引入：引入了eui所有的组件，学习时/开发时常用
按需引入：引入需要的组件，生产环境下使用。

完整引入

1. 导入 element ui 组件库
2. 导入 element ui css样式
3. 并将element ui 注册给vue

/* 导入element-ui样式*/import'element-ui/lib/theme-chalk/index.css'importVuefrom'vue'importAppfrom'./App.vue'importrouterfrom'./router'importstorefrom'./store'/* element-ui所有组件*/importElementUIfrom'element-ui'Vue.use(ElementUI)
Vue.config.productionTip=falsenewVue({
router,
store,
render: h=>h(App)
}).$mount('#app')

3.布局容器

布局容器

使用element-ui的布局容器(Container) 进行页面布局。对页面进行划分（上、下、左、中）
官方文档 : https://element.eleme.cn/#/zh-CN/component/container

用于布局的容器组件，方便快速搭建页面的基本结构：

<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，<el-container> 的子元素只能是后四者，后四者的父元素也只能是 <el-container>。

步骤一: 修改src/main.js 导入 element-ui 样式和组件

/* 导入element-ui样式*/import'element-ui/lib/theme-chalk/index.css'importVuefrom'vue'importAppfrom'./App.vue'importrouterfrom'./router'importstorefrom'./store'/* element-ui所有组件*/importElementUIfrom'element-ui'Vue.use(ElementUI)
Vue.config.productionTip=falsenewVue({
router,
store,
render: h=>h(App)
}).$mount('#app')

步骤二: 删除 src/App.vue所有内容, 拷贝布局模板和样式

<template><divid="app"><el-container><el-header>Header</el-header><el-main>Main</el-main><el-footer>Footer</el-footer></el-container></div></template><script>exportdefault {
}
</script><style>/* 稍后删除 */  .el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
  }
</style>

reset.css

布局页面完成后, 整个body会存在一圈空白, 开发中一般选择重新设置页面样式

步骤一: 百度搜索”reset.css” , 并创建 assets/app.css ,拷贝样式 (复制下面样式即可)

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,th,td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style: normal;
font-weight: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-size: 100%;
font-weight: normal;
}

满屏填充

在App.vue中，添加样式

1. html, body, .el-container {
2. height: 100%;
3.   }

4.导航条

需求

导航条

使用导航菜单(NavMenu) 完成导航条效果

官方文档 : https://element.eleme.cn/#/zh-CN/component/menu

<template><divid="app"><el-container><el-header><!--导航条--><el-menu          :default-active="$route.path"class="el-menu-demo"mode="horizontal"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-menu-itemindex="/">首页</el-menu-item><el-submenuindex="2"><templateslot="title">学生管理</template><el-menu-itemindex="/studentList">学生列表</el-menu-item></el-submenu><el-submenuindex="3"><templateslot="title">个人中心</template><el-menu-itemindex="/login">登录</el-menu-item><el-menu-itemindex="/register">注册</el-menu-item></el-submenu><el-menu-itemindex="/cart">购物车</el-menu-item></el-menu></el-header><el-main><router-view></router-view></el-main><el-footer>版权所有2006-2022传智专修学院</el-footer></el-container></div></template><script>exportdefault {
}
</script><style>  .el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
padding: 0;
  }
</style>

路由

点击”首页” 和 “购物车” 可以调整页面

<template><divid="app"><el-container><el-header><!--导航条--><el-menuclass="el-menu-demo"mode="horizontal"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"          :router="true"><el-menu-itemindex="/">首页</el-menu-item><el-submenuindex="2"><templateslot="title">学生管理</template><el-menu-itemindex="/studentList">学生列表</el-menu-item></el-submenu><el-submenuindex="3"><templateslot="title">个人中心</template><el-menu-itemindex="/login">登录</el-menu-item><el-menu-itemindex="/register">注册</el-menu-item></el-submenu><el-menu-itemindex="/cart">购物车</el-menu-item></el-menu></el-header><el-main><router-view></router-view></el-main><el-footer>版权所有2006-2020传智专修学院</el-footer></el-container></div></template><script>exportdefault {
}
</script><style>  .el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
padding: 0;
  }
</style>