前端|element入门

发表于 阅读次数：

当值为数字要在属性前加:

1.新建vue-cli项目

1
vue init webpack element-ui-test

2.在新项目中添加element-ui库

1
2
cd element-ui-test
npm install element-ui --save

3.在main.js中配置element-ui

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//以下为新增内容
引入ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

配置ElementUI
Vue.use(ElementUI)
//-----------------------
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

4.启动vue

1
npm start

Container

1
2
3
4
5
6
7
8
9
10
<div>
  <el-container>
    <el-header>header</el-header>
    <el-container>
    <el-aside>aside</el-aside>
    <el-main>main</el-main>
    </el-container>
    <el-footer>footer</el-footer>
  </el-container>
</div>

elcontainer内有el-header或者el-footer子元素，全部子元素呈垂直上下排列

需要水平左右排列时，需要再定义el-container包含水平左右排列的子元素

Layout

通过基础的 24 分栏，迅速简便地创建布局。

1616894450089

表单系列