Element UI -- vue使用

安装

1. 安装 npm i element-ui -S
2. 引用 在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);

	new Vue({
	  el: '#app',
	  render: h => h(App)
	});

3. 报错 在webpack.config.js文件中的module中增加如下json

//匹配规则
{
   test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
   loader: 'file-loader'
}

布局

Container 布局容器

<el-container>：外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列。
<el-header>：顶栏容器。
<el-aside>：侧边栏容器。
<el-main>：主要区域容器。
<el-footer>：底栏容器。

Icon 图标

提供了一套常用的图标集合

<i class="el-icon-delete"></i>
<el-button type="primary" icon="el-icon-search">搜索</el-button>