VUEUI Unit1

系列文章目录

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

VUEUI Vue组件库

ElementUI

elementUI是饿了么团队研发的一款基于VUE的桌面组件库。
ElementUI组件跳转

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

1.新建脚手架项目。
2.在新项目中通过npm install命令安装element-ui。
3.在脚手架项目中,main.js配置ElementUI。
4.开始使用。
具体操作:

1. 新建脚手架项目。

# 找一个空目录
vue create elepro
# 依次选择
Manually select features
# 空格锁定/取消锁定
Choose Vue version  /  Babel  /  Router
2.x
Use history mode for router?     y 
In package.json
Save this as a preset for future projects?   n

2. 在新项目中通过npm命令安装

# 进入项目的根目录(包含package.json)
cd elepro
# 安装ElementUI
npm i element-ui -S

在package.json中有"element-ui": "^2.15.5"样式,说明安装成功

3. 在脚手架项目中，main.js配置ElementUI。全量引入组件的配置如下:

import ElementUI from 'element-ui';    // 引入模块
import 'element-ui/lib/theme-chalk/index.css';  // 引入样式
// Vue.use() 方法将会自动调用传入的 ElementUI.install()函数
// 所以ElementUI的主js一定会提供一个install方法，并且在该方法中
// 将组件库中的所有组件、指令等资源注入到Vue对象。
Vue.use(ElementUI);
Vue.config.productionTip = false

4. 开始使用。

案例：访问http://localhost:8080/button， 看到新页面，呈现ElementUI中的按钮。

1. 启动脚手架。

npm run serve

2. 新建页面:views/Button.vue，编写elementui的按钮组件。

<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>

3. 配置路由router/index.js,使访问/button时可以看到新建页面的内容。

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

思考

一、当http://localhost:8080/button地址时,这个页面是怎么出来的?

• 脚手架启动时(npm run serve)，将会把vue源代码进行编译打包,申请开辟8080端口供其他浏览器访问。
• 向http://localhost:8080/button会找到本机中监听8080端口的应用：脚手架应用，把该http请求发给脚手架。
• 接收请求后根据router中配置动态显示页面内容，将会把Button.vue的内容添加到App.vue,然后将完整的页面内容添加到index.html返回。

二、ElementUI适合编写什么类型的网站?

• 后台管理型网站(Element UI提供了很多可复用的组件，对于一般的后台应用，这些组件完全可以满足需求。如果个性化需求不高的话，我们完全可以做一名“复制粘贴”工程师又称“CV”工程师，快速开发。)

该处使用的url网络请求的数据。

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. 新建views/Nav.vue，编写导航内容。
2. 配置路由。

设置导航的默认选中项

<el-menu mode="horizontal" default-active="4">
    <el-menu-item index="1">导航文本1</el-menu-item>
    <el-menu-item index="2">导航文本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="4">
    <el-menu-item index="1">导航文本1</el-menu-item>
    <el-menu-item index="2">导航文本2</el-menu-item>
    <el-submenu index="3">主题
    	<el-menu-item>黑色主题</el-menu-item>
        <el-menu-item>白色主题</el-menu-item>
    </el-submenu>
    <el-menu-item index="4">导航文本4</el-menu-item>
</el-menu>

设置垂直导航 （垂直方向）

<el-menu mode="verticle">
    <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>

ElementUI的经典布局系统

Container 布局容器

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

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

<el-header>：顶栏容器。

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

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

<el-footer>：底栏容器。

注意：el-container中只能包含上述5种组件组件。header、aside、main、footer的父组件只能是el-container。

案例：访问：http://localhost:8080/layout，测试container布局容器。

1. 新建 views/Layout.vue，编写container布局系统。
2. 配置路由。

实现ElementUI的经典布局

1. 新建Component.vue。
2. 搭建header、aside、main组成的布局系统。
3. 在header中放水平导航，aside中放垂直导航，main先晾着。
4. 微调样式。
5. 使用嵌套路由实现main部分的动态更新。