Element UI入门_elmui

1.1什么是Element UI

• Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
• Element UI是基于Vue 2.0的
• Element UI 提供一组组件
• Element UI 提供组件的参考实例, 直接复制

官方网站：
https://element.eleme.cn/#/zh-CN/component/installation
1
2

1.2搭建环境

1.2.1创建vue项目

• 步骤一: 通过 vue-cli创建项目

vue create 项目名
1

• 步骤二：运行项目

• 安装 element-ui组件

npm i element-ui
1

1.2.3Element UI 引入

• 官方提供了2种引入方式：完整引入、按需引入
• 完整引入：引入了eui所有的组件，学习时/开发时常用
• 按需引入：引入需要的组件，生产环境下使用。

完整引入

• 导入 element ui 组件库
• 导入 element ui css样式
• 并将element ui 注册给vue
• 

/* 导入element-ui样式
*/
import 'element-ui/lib/theme-chalk/index.css'

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

/* element-ui所有组件
*/
import ElementUI from 'element-ui'
Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

1.3 布局

• 使用element-ui的布局容器(Container) 进行页面布局
• 官方文档 :

 https://element.eleme.cn/#/zh-CN/component/container
1

• 步骤一: 修改src/main.js 导入 element-ui 样式和组件

/* 导入element-ui样式
*/
import 'element-ui/lib/theme-chalk/index.css'

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

/* element-ui所有组件
*/
import ElementUI from 'element-ui'
Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

• 步骤二: 删除 src/App.vue所有内容, 拷贝布局模板和样式

<template>
  <div id="app">
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
export default {

}
</script>

<style>
  /* 稍后删除 */
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
</style>
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

• reset.css
• 布局页面完成后, 整个body会存在一圈空白, 开发中一般选择重新设置页面样式
• 
• 步骤一: 百度搜索”reset.css” , 并创建 assets/app.css ,拷贝样式 (复制下面样式即可)
• 

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,th,td {
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

fieldset,img {
    border: 0;
}

address,caption,cite,code,dfn,em,strong,th,var {
    font-style: normal;
    font-weight: normal;
}

ol,ul {
    list-style: none;
}

caption,th {
    text-align: left;
}

h1,h2,h3,h4,h5,h6 {
    font-size: 100%;
    font-weight: normal;
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

• 重置样式参考：

 https://www.cnblogs.com/weizhxa/p/9885329.html
1

• 步骤二: 修改 src/main.js 导入 app.css 样式

/** 导入公共样式
*/
import '@/assets/app.css'

/* 导入element-ui样式
*/
import 'element-ui/lib/theme-chalk/index.css'

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

/* element-ui所有组件
*/
import ElementUI from 'element-ui'
Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
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