这里写目录标题
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>:底栏容器。
比如我就是选用其中的一种布局:
我的修改过的布局代码: