Vue前端框架集成ElementUI

Vue集成ElementUI：

安装配置及使用介绍：

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组 件库.

1.安装：

安装 ElementUI

npm i element-ui -S

2.配置

在 main.js 中写入以下内容：

import ElementUI from ‘element-ui’;

import ‘element-ui/lib/theme-chalk/index.css’;

Vue.use(ElementUI);

new Vue({

el: ‘#app’,

render: h => h(App)});

3.使用

常用组件：

表单

按钮

日期

图标

布局

面包屑

卡片

表格

分页

消息

对话框

文件上传

开关

无限滚动

回到顶部

使用的时候直接将ElementUI官方的组件和css代码拿过来用 将自己需要的数据一替换就行了

地址：https://element.eleme.cn/

注：在template标签中如果引用了ElmentUi代码可以不使用根div标签

布局组件：

Layout GUI 一套界面可以在不同终端运行 pc 1920 手机端
响应式布局 栅格布局 网页布局随着屏幕大小而自适应

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

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

	<el-header>：顶栏容器。

	<el-aside>：侧边栏容器。
		菜单组件

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

	<el-footer>：底栏容器。

比如我就是选用其中的一种布局：

我的修改过的布局代码：