一、介绍
Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,中文官方地址如下:Element-Ul官网
二、安装
npm install element-ui -S
三、配置
1. 在main.js文件中 引入 element 组件 :
// 程序入口:环境依赖,插件
import Vue from 'vue'
// 引入根组件
import App from './App'
// 引入路由配置
import router from './router'
// 关闭生产模式下给出的提示
Vue.config.productionTip = false
//引入ElementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
// 定义实例
new Vue({
el: '#app',
router,// 注入框架中
components: { App },
template: '<App/>'
})
2. 在静态文件下static文件夹创建css文件夹下的一个全局公用common.css :
3. 全局公用common.css 代码如下(按自己需求来写css) :
@charset"utf-8";
body {
margin: 0 auto;
background: #fbfbfb;
font-family:"Microsoft YaHei", "Arial";
font-size: 13px;
color: #383838;
position: relative;
}
html {
padding: 0;
height: 0;
overflow-y: scroll;
}
ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, input, button {
margin: 0;
padding: 0;
}
ul, ol {
list-style: none;
}
img {
border: none;
}
.lf {
float: left;
}
.rt {
float: right;
}
input, button, textarea {
outline: none;
font-family:"Microsoft YaHei";
}
a {
color: #383838;
text-decoration: none;
}
a:hover {
text-decoration: none;
}
em {
font-style: normal;
}
.link {
display: block;
width: 100%;
}
input, button, textarea, select, optgroup, option {
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
}
ul, li, dl, dt, dd, ol {
display: block;
list-style: none;
}
img {
border: 0;
}
.clear {
clear: both;
height: 0;
}
.clear-fix:after, .clearfix:after {
content:".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
a {
text-decoration: none;
outline: 0;
}