VUEUI组件库

ElementUI 饿了么团队开发的PC端的vue组件库。

MintUI 饿了么团队开发的移动端的vue组件库。

VantUI 有赞团队开发的移动端的vue组件库。

ElementUI

饿了么团队开发的PC端的vue组件库。

搭建ElemmentUI基础环境(基于脚手架)

新建脚手架项目。# 找一个空目录   day01/demo vue create ele_pro# 依次选择Manally select Features   手动选择Choose Vue Version  -- Babel -- Router 去掉 Lintter2.X是否使用history模式?   YesIn package.json是否把当前配置作为以后创建项目时的预设配置?   No在新项目中通过npm命令安装ElementUI。# 进入项目目录后执行安装命令cd ele_pronpm i element-ui -S安装完成后,将会在node_modules中出现element-ui文件夹。还会在package.json中的dependencies配置项中出现element-ui。在脚手架项目main.js中, 配置ElementUI。import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);

开始使用。需求:访问http://localhost:8080/button, 可以看到Button.vue页面。新建vue页面: src/views/Button.vue,按照文档编写elementUI中的Button组件。<!-- src/views/Button.vue --><template>  <p>    <el-row>      <el-button>默认按钮</el-button>      <el-button type="primary">主要按钮</el-button>      <el-button type="success">成功按钮</el-button>      <el-button type="info">信息按钮</el-button>      <el-button type="warning">警告按钮</el-button>      <el-button type="danger">危险按钮</el-button>    </el-row>  </p></template>配置路由,router/index.js,目的是为了告诉vue, 当客户端访问/button时,页面中需要显示Button.vue中定义的内容。import Button from '../views/Button.vue'const routes = [  {    path: '/button',    component: Button  },]

思考

ElementUI经常用于编写什么类型的PC网站?

前台交互型 后台管理型

Navmenu组件

navmenu组件用于实现导航。其基本结构为:

<el-menu mode="horizontal">       <el-menu-item>导航1</el-menu-item>    <el-menu-item>导航2</el-menu-item>    <el-menu-item>导航3</el-menu-item>    <el-menu-item>导航4</el-menu-item></el-menu>

案例:访问http://localhost:8080/nav 看到导航示例效果。

1. 新建Nav.vue,编写导航内容。

2. 配置路由。 指定 /nav 与 Nav.vue之间的映射关系。

设置导航的默认选中项

<el-menu mode="horizontal" default-active="2">       <el-menu-item index="1">导航1</el-menu-item>    <el-menu-item index="2">组件</el-menu-item>    <el-menu-item index="3">导航3</el-menu-item>    <el-menu-item index="4">导航4</el-menu-item></el-menu>

设置导航的下拉子菜单

<el-menu mode="horizontal" default-active="2">       <el-menu-item index="1">导航1</el-menu-item>    <el-menu-item index="2">组件</el-menu-item>    <el-submenu index="3">主题        <el-menu-item index="ayh">暗夜黑</el-menu-item>        <el-menu-item index="qkl">秋裤蓝</el-menu-item>    </el-submenu>    <el-menu-item index="4">导航4</el-menu-item></el-menu>

设置侧边栏导航(垂直方向)

<el-menu mode="vertical" default-active="2">       <el-menu-item index="1">导航1</el-menu-item>    <el-menu-item index="2">组件</el-menu-item>    <el-menu-item index="3">主题</el-menu-item>    <el-menu-item index="4">导航4</el-menu-item></el-menu>

如何修改组件库中组件的默认样式

找这个组件文档是不是给了一个属性可以控制该样式,如果有就用属性来设置样式,不要自己瞎编。<el-menu active-text-color="#f00"  ... ></el-menu>如果文档中没有给出控制该样式的属性,需要检查Element,看一下需要修改的样式的类名,编写style标签 或 内联样式 修改相应样式。<el-menu  style="width:200px"></el-menu>​<style scoped>.mymenu { border-right: none; }</style>检查需要修改的组件的类名,在页面的style中重写该样式,若样式优先级没有组件的高,则添加 !important。绝招:去掉style标签中的scoped。<style scoped>.el-menu { border-right: none !important; }</style>

ElementUI的经典布局系统

用于布局的容器组件,方便快速搭建页面的基本结构:<el-container>:外层容器。当子元素中包含 <el-header> 或 <el-footer> 时,全部子元素会垂直上下排列,否则会水平左右排列。<el-header>:顶栏容器。<el-aside>:侧边栏容器。<el-main>:主要区域容器。<el-footer>:底栏容器。案例:实现页面布局结构:Header、Aside、Main、Footer。新建页面 views/Container.vue页面。 编写布局。配置路由。 /container <----> Container.vue

案例:实现ElementUI官网的基本布局结构

实现步骤:

1. 新建Component.vue。 搭建header、aside、Main布局系统。

2. 配置路由。 /component <---> Component.vue

3. 在header中放置水平导航, 在aside中放置垂直导航,main中自定义。

4. 微调页面的布局效果。

案例:实现ElementUI官网的基本布局结构

实现步骤:

新建Component.vue。 搭建header、aside、Main布局系统。配置路由。 /component <---> Component.vue在header中放置水平导航, 在aside中放置垂直导航,main中自定义。微调页面的布局效果。

基于嵌套路由实现main区域内容的动态显示

嵌套路由的设计:

/component/button     组件页面中显示Button的内容/component/container  组件页面中显示Container的内容/component/icon       组件页面中显示Icon的内容

实现思路:

准备3个组件页面: Button.vue Container.vue Icon.vue。在Component.vue的main的部分,添加router-view组件。<el-main >    <router-view />  <!-- 二级路由 --></el-main>配置router/index.js,在/component路由下配置嵌套路由children配置项。{     path: '/component',    component: Component,    // 重定向  当直接访问/component时, 将会自动跳转到    // "/component/button"    redirect: '/component/button',     children: [{      path: 'button',      component: Button    },{      path: 'container',       component: Container    },{      path: 'icon',       component: Icon    }] },

1. 打开浏览器,在请求资源路径中,通过请求路径访问这3个地址。

2. 开启侧边栏导航的"路由模式",修改每个item的index即可以实现点击跳转。

3. 配置/component的重定向, 避免bug。