elementUi--适合于Vue的UI框架

简介

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

npm 安装

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

引入 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">冰冰</div></el-col>
      <el-col :span="6"><div class="content">冰冰</div></el-col>
      <el-col :span="6"><div class="content">冰冰</div></el-col>
      <el-col :span="6"><div class="content">冰冰</div></el-col>
    </el-row>
  </div>
</template>

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

在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>

在router.js中 添加加载

{
            path: /dialog,
            component: () => import(./element/Dialog)
        }

结果是：