vue 框架之 Element-UI

Element-UI是一套为开发者、设计师、产品经理准备的基于Vue的桌面端组件库。

element-ui官网 https://element.eleme.io/#/zh-CN

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

1.新建脚手架项目。

# 找一个空目录     
vue create ele_project
# 依次选择
Manually select features
Choose Vue version - Babel - Router
2.X
使用history模式   y
In package.json
是否把当前配置作为以后创建项目的预设配置？ n

2.在新项目中通过npm install 安装 element-ui。

# cd命令 进入 ele_project 文件夹内部
cd ele_project
# 安装
npm install --save element-ui

3.在脚手架项目中，配置ElementUI。

// 在 main.js 中引入配置ElementUI
import ElementUI from 'element-ui'     //引入element-ui包
import 'element-ui/lib/theme-chalk/index.css'   //引入element-UI 样式
Vue.use(ElementUI)    //使用

4.开始使用。

    4.1启动服务：

# 在 ele_project 项目目录内执行命令
npm run serve
# 访问
http://localhost:8080/

  4.2新建页面：views/button.vue，在其中编写组件template。

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

4.3定义路由。使得访问：http://localhost:8080/button，看到效果。

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

element的组件属性可以在上面的网址查看 内容很多就不一一介绍了

 

由于element 样式比较固定  和多时候适用于 后台管理网站的开发   接下来就简单介绍下  搭建个网页大结构

Navmenu组件 （导航）

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

1 <el-menu class="el-menu-demo" mode="horizontal">
2     <el-menu-item>指南</el-menu-item>
3     <el-menu-item>组件</el-menu-item>
4     <el-menu-item>主题</el-menu-item>
5     <el-menu-item>资源</el-menu-item>
6 </el-menu>
View Code

设置导航的默认选中项

1 <el-menu class="el-menu-demo" mode="horizontal" default-active="2">
2     <el-menu-item index="1">指南</el-menu-item>
3     <el-menu-item index="2">组件</el-menu-item>
4     <el-menu-item index="3">主题</el-menu-item>
5     <el-menu-item index="4">资源</el-menu-item>
6 </el-menu>
View Code

设置导航的下拉子菜单

 1 <el-menu class="el-menu-demo" mode="horizontal" default-active="2">
 2     <el-menu-item index="1">指南</el-menu-item>
 3     <el-submenu index="2">
 4         <span slot="title">组件</span>
 5         <el-menu-item>组件示例</el-menu-item>
 6         <el-menu-item>组件使用文档</el-menu-item>
 7     </el-submenu>
 8     <el-menu-item index="3">主题</el-menu-item>
 9     <el-menu-item index="4">资源</el-menu-item>
10 </el-menu>
View Code

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

基本结构如下：

1 <el-menu class="el-menu-vertical-demo" 
2          mode="vertical" 
3          default-active="2">
4     ....
5 </el-menu>
View Code

ElementUI的经典布局系统

ElementUI提供了Container布局容器， 用于完成页面主体结构的搭建。Container布局容器提供了5个相关组件：

  1. <el-container> 容器 内部可以盛放后四种组件。

  2. <el-header> header内用于编写页面头部部分。

  3. <el-aside> aside内用于编写页面侧边栏部分。

  4. <el-main> main内用于编写页面主体内容部分。

  5. <el-footer> footer内用于编写页面页脚部分.

ElementUI布局组件的使用规则：

  1. 布局组件包含上述5个组件。

  2. el-container的子元素只能是后四个组件（也可以嵌套container）。后四个组件的父元素只能是el-container。

  3. el-container拥有属性direction来控制子元素的排列方向，可以是水平（direction='horizontal'）,可以是垂直（direction='vertical'）

  4. 默认情况下，若el-container包含header或footer，则会垂直方向排列。否则默认情况下水平方向排列。

 

posted @ 2021-03-11 18:56  ComeIntoBud  阅读(1357)  评论(0)  编辑  收藏  举报