ElementUI

ElementUI

typora (markdown编辑器

ElementUI

ElementUI是饿了么团队一套为开发者、设计师、产品经理准备的基于桌面端的Vue组件库。

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

搭建ElementUI基础环境（基于脚手架）

1. 创建新的脚手架项目。
2. 在新项目中通过npm install安装ElementUI。
3. 在main.js中配置ElementUI。
4. 开始使用。

具体操作

1. 创建新的脚手架项目。

   # 找一个空目录，执行vue create命令创建项目
   vue create elepro
   # 依次选择
   Manually select features    # 手动选择配置
   Choose Vue Version  -- Babel  --  Router  不要选linter
   2.x
   是否使用history模式的路由？  yes
   in package.json
   是否把当前配置作为以后创建项目的预设项配置？  no
   

2. 在新项目中通过npm install安装ElementUI。

   # 先进入项目目录下  然后执行命令
   cd elepro
   npm i element-ui -S
   

3. 在main.js中配置ElementUI。

   // src/main.js
   import ElementUI from 'element-ui';
   import 'element-ui/lib/theme-chalk/index.css';
   Vue.use(ElementUI);
   

4. 开始使用。

   访问地址：http://localhost:8080/button，看到elementui的按钮组件。

   1. 新建页面：src/views/Button.vue，编写ElementUI的按钮。

      <!-- src/views/Button.vue -->
      <template>
        <div>
          <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>
        </div>
      </template>
      

   2. 配置 src/router/index.js 路由。指明：/button与Button.vue之间的映射关系。

      import Button from '../views/Button.vue'
      const routes = [
        {
          path: '/button',
          component: Button
        }
      ]
      

ElementUI适合写什么类型的网站？

1. 前台用户使用的网站
2. 后台管理类网站

Navmenu组件（导航）

Navmenu用于实现导航，其基本结构为：

<el-menu mode="horizontal">
	<el-menu-item>导航一</el-menu-item>
    <el-menu-item>导航二</el-menu-item>
    <el-menu-item>导航三</el-menu-item>
    <el-menu-item>导航四</el-menu-item>
</el-menu>

案例：访问http://localhost:8080/navmenu，演示水平导航条。

1. 新建页面 views/Navmenu.vue。编写导航内容。
2. 配置路由。 /navmenu <---> Navmenu.vue

设置导航的默认选中项

<el-menu mode="horizontal" default-active="1">
	<el-menu-item index="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">导航四</el-menu-item>
</el-menu>

设置导航的下拉子菜单

<el-menu mode="horizontal" default-active="1">
	<el-menu-item index="1">导航一</el-menu-item>
    <el-menu-item index="2">导航二</el-menu-item>
    <el-submenu index="3">
        <span slot="title">主题</span>
    	<el-menu-item index="ayh">暗夜黑</el-menu-item>
        <el-menu-item index="skl">深空蓝</el-menu-item>
    </el-submenu>
    <el-menu-item index="4">导航四</el-menu-item>
</el-menu>

设置侧边栏导航（垂直方向）

<el-menu mode="vertical" default-active="1">
	<el-menu-item index="1">导航一</el-menu-item>
    <el-menu-item index="2">导航二</el-menu-item>
    <el-submenu index="3">
        <span slot="title">主题</span>
    	<el-menu-item index="ayh">暗夜黑</el-menu-item>
        <el-menu-item index="skl">深空蓝</el-menu-item>
    </el-submenu>
    <el-menu-item index="4">导航四</el-menu-item>
</el-menu>

如果希望修改组件库自带的样式，可以使用如下方案：

1. 看文档中是否已经给出了设置该样式的组件属性。如果有则直接用。
2. 为组件添加class属性，添加style标签，设置样式。
3. 右键检查元素，找到elementui组件库的官方样式类名，在自定义的style标签中直接通过官方样式类名修改样式。

ElementUI的经典布局系统

ElementUI提供了Container布局容器，用于完成页面主体结构的搭建。

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

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

<el-header>：顶栏容器。

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

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

<el-footer>：底栏容器。

案例：访问：http://localhost:8080/container，看到页面整体布局。

1. 新建views/Container.vue，编写组件内容。
2. 配置路由。

实现ElementUI后台网站的经典布局

实现步骤如下：

1. 新建Component.vue，搭建Header、Aside、Main布局系统。
2. 在header中放个水平导航，在asdie中放一个垂直导航。
3. 微调页面样式。
4. 基于嵌套路由，实现点击左侧边栏导航选项，动态更新main中的内容。