vue项目常用依赖安装②——element-ui

一、介绍

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