AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Element-UI快速入门

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

什么是Element UI


  1. Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
  1. Element UI是基于Vue 2.0的
  2. Element UI 提供一组组件
  3. Element UI 提供组件的参考实例, 直接复制
  1. 官方网站：

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


搭建环境


创建项目


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

vue create eui01

步骤二：运行项目微信图片_20220525220337.png

整合1：插件


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

vue add element

整合步骤1：确定引入方式（全部引入、按需引入）微信图片_20220525220347.png

整合微信图片_20220525220354.png

整合2：安装element-ui插件


npm i element-ui --save

微信图片_20220525220400.png

整合：element-ui引入


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


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


完整引入


1. 导入 element ui 组件库

2. 导入 element ui css样式

3. 并将element ui 注册给vue微信图片_20220525220412.png

/* 导入element-ui样式
*/
import 'element-ui/lib/theme-chalk/index.css'
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
/* element-ui所有组件
*/
import ElementUI from 'element-ui'
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
  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>。


微信图片_20220525221118.png

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

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

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

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

reset.css


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

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

微信图片_20220525221134.png

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中，添加样式

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

4.导航条


需求微信图片_20220525221142.png

导航条


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

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

微信图片_20220525221149.png

<template>
  <div id="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-item index="/">首页</el-menu-item>
          <el-submenu index="2">
            <template slot="title">学生管理</template>
            <el-menu-item index="/studentList">学生列表</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">个人中心</template>
            <el-menu-item index="/login">登录</el-menu-item>
            <el-menu-item index="/register">注册</el-menu-item>
          </el-submenu>
          <el-menu-item index="/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>
export default {
}
</script>
<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
    padding: 0;
  }
</style>

路由


点击”首页” 和 “购物车” 可以调整页面微信图片_20220525221812.png微信图片_20220525222052.png步骤一: 修改 src/App.vue 设置路由视图微信图片_20220525221826.png微信图片_20220525221831.png

<template>
  <div id="app">
    <el-container>
      <el-header>
        <!-- 导航条 -->
        <el-menu
          class="el-menu-demo"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :router="true"
        >
          <el-menu-item index="/">首页</el-menu-item>
          <el-submenu index="2">
            <template slot="title">学生管理</template>
            <el-menu-item index="/studentList">学生列表</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">个人中心</template>
            <el-menu-item index="/login">登录</el-menu-item>
            <el-menu-item index="/register">注册</el-menu-item>
          </el-submenu>
          <el-menu-item index="/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>
export default {
}
</script>
<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
    padding: 0;
  }
</style>

微信图片_20220525222249.png

步骤二: 编写测试组件（Home.vue和Cart.vue）微信图片_20220525221839.png

页面刷新导航选择问题


默认情况：点击后的默认效果微信图片_20220525221846.png

刷新页面, 导航条的选中状态消失微信图片_20220525221851.png

修复: 修改 App.vue页面微信图片_20220525221857.png

<template>
  <div id="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"
          :router="true"
        >

微信图片_20220525222629.png

页眉


1. <el-footer>
2.         版权所有 2006 - 2022 传智专修学院
3. </el-footer>


文章标签：
JavaScript
前端开发
容器
开发者
关键词：
UI快速入门
陶然同学
目录
相关文章
孤影过客
|
6月前
|
JavaScript 前端开发 开发者
Element-UI快速入门
Element-UI 是一个功能强大的 Vue 组件库，非常适合快速开发高质量的企业级前端应用。通过本文的快速入门指南，你应该能够开始使用 Element-UI，并将其组件应用到你的项目中。不断探索和实践将帮助你更好地理解和利用这个工具库为你的应用增添独特的价值。 希望这篇博客能够帮助你快速上手 Element-UI，为你的 Vue 项目加速开发。
孤影过客
165 1
游客g7kiuqrvkhn3g
|
7月前
|
资源调度 JavaScript
Element-ui快速入门
Element-ui是基于Vue.js的桌面端UI组件库，用于快速构建美观界面。以下是其快速入门步骤：1) 使用npm或yarn安装；2) 在main.js中引入样式和组件；3) 直接在Vue组件中使用Element-ui组件；4) 可根据需要定制主题样式。参照官方文档可了解更多组件和用法。
游客g7kiuqrvkhn3g
97 1
周盛欢
|
7月前
|
JavaScript Windows
Element-ui快速入门
Element-ui快速入门
周盛欢
81 0
陶然同学
|
前端开发
Element-UI快速入门 （三）
7.常见组件 按钮 Button
陶然同学
70 0
陶然同学
Element-UI快速入门 （二）
5.表格：查询列表 测试页面
陶然同学
146 0
陶然同学
|
JavaScript 前端开发 开发者
Element-UI快速入门（一）
什么是Element UI Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element UI是基于Vue 2.0的 Element UI 提供一组组件 Element UI 提供组件的参考实例, 直接复制
陶然同学
214 0
Designer小郑
|
JavaScript 前端开发 开发工具
Vue组件库 View UI快速入门 环境配置
Vue组件库 View UI快速入门 环境配置
Designer小郑
396 0
陶然同学
|
前端开发
Element-UI快速入门（三）
Element-UI快速入门
陶然同学
169 0
Element-UI快速入门（三）
陶然同学
Element-UI快速入门（二）
Element-UI快速入门
陶然同学
115 0
Element-UI快速入门（二）
陶然同学
|
前端开发
Element-UI快速入门（四）
Element-UI快速入门（四）
陶然同学
142 0
Element-UI快速入门（四）

热门文章

最新文章

  • 1
    「Mac畅玩鸿蒙与硬件41」UI互动应用篇18 - 多滑块联动控制器
  • 2
    「Mac畅玩鸿蒙与硬件40」UI互动应用篇17 - 照片墙布局
  • 3
    「Mac畅玩鸿蒙与硬件45」UI互动应用篇22 - 评分统计工具
  • 4
    「Mac畅玩鸿蒙与硬件47」UI互动应用篇24 - 虚拟音乐控制台
  • 5
    「Mac畅玩鸿蒙与硬件39」UI互动应用篇16 - 倒计时环形进度条
  • 6
    「Mac畅玩鸿蒙与硬件46」UI互动应用篇23 - 自定义天气预报组件
  • 7
    「Mac畅玩鸿蒙与硬件37」UI互动应用篇14 - 随机颜色变化器
  • 8
    「Mac畅玩鸿蒙与硬件38」UI互动应用篇15 - 猜数字增强版
  • 9
    「Mac畅玩鸿蒙与硬件36」UI互动应用篇13 - 数字滚动抽奖器
  • 10
    「Mac畅玩鸿蒙与硬件32」UI互动应用篇9 - 番茄钟倒计时应用
  • 1
    Qt第一课 第一个ui界面
    103
  • 2
    如何启动flowable的Flowable UI画工作流程图
    132
  • 3
    Element-ui快速入门
    81
  • 4
    VUE里修改element-ui的显示层次与上下间隔
    141
  • 5
    UI开发第四篇——实现像handcent sms或者chomp sms那样的气泡
    43
  • 6
    Element-ui快速入门
    97
  • 7
    如何使用公网地址远程访问内网Nacos UI界面查看注册服务
    450
  • 8
    Android UI底层绘制原理
    68
  • 9
    【Flutter前端技术开发专栏】Flutter中的动态UI构建与数据驱动视图
    204
  • 10
    【Flutter 前端技术开发专栏】Flutter 中的 UI 测试与自动化测试
    241

    • 相关课程

    更多
  • Node.js 入门教程文档

    • 相关电子书

    更多
  • 使用TensorFlow搭建智能开发系统自劢生成App UI代码
  • Fusion Design - 企业级UI解决方案揭秘
  • 使用TensorFlow搭建智能开发系统自动生成App UI

    • 相关实验场景

    更多
  • 零基础入门Serverless：TodoList应用创建
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)