elementUi——适合于Vue的UI框架_element ui框架怎么用

简介

element-ui是一个ui库，它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。

npm 安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

引入 Element

你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。

完整引入
在 main.js 中写入以下内容：

import Vue from ‘vue’;
import ElementUI from ‘element-ui’; //引入Element ui
import ‘element-ui/lib/theme-chalk/index.css’;
import App from ‘./App.vue’;
Vue.use(ElementUI); //挂载
new Vue({
el: ‘#app’,
render: h => h(App)
});

按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：(此处.babelrc在VScode中变更为babel.config.js)

{
“presets”: [[“es2015”, { “modules”: false }]],
“plugins”: [
[
“component”,
{
“libraryName”: “element-ui”,
“styleLibraryName”: “theme-chalk”}
]
]
}

Layout 布局:

新建一个文件layout.js

<template>
  <div>
    <el-row>
      <el-col :span="6"><div class="content">11111111111</div></el-col>
      <el-col :span="6"><div class="content">2222222222222</div></el-col>
      <el-col :span="6"><div class="content">333333333333</div></el-col>
      <el-col :span="6"><div class="content">4444444444</div></el-col>
    </el-row>
  </div>
</template>

<script>
export default {};
</script>
// scoped  表示只在当前页面生效
<style  scoped>
.content {
  background-color: chartreuse;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在router.js中引入layout.js

结果：

对话框

在保留当前页面状态的情况下，告知用户并承载相关操作。
基本用法
Dialog弹出一个选项，适合需要定制性以上的场景。

新建Dialog.vue

<template>
  <div>
    <el-button type="text" @click="dialogVisible = true"
      >点击打开 Dialog</el-button
    >
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>

<style lang="scss" scoped>
</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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

在router.js中 添加加载

{
            path: '/dialog',
            component: () => import('./element/Dialog')
        }
1
2
3
4

结果：