当前位置:   article > 正文

vue项目常用依赖安装②——element-ui_element-ui最新在线依赖

element-ui最新在线依赖
一、介绍

Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,中文官方地址如下:Element-Ul官网

二、安装
npm install element-ui -S
  • 1
三、配置

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/>'
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

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;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/299987
推荐阅读
相关标签
  

闽ICP备14008679号