美文网首页前端Vue专辑
vue项目中引入element组件

vue项目中引入element组件

作者: 执剑饮烈酒 | 来源:发表于2020-05-07 13:06 被阅读0次

一、全局安装element-ui

npm install element-ui --save

有淘宝镜像的情况下cnpm install element-ui --save 或者cnpm install element-ui -S

二、在main.js文件中加入以下内容,这样就可以全局使用;

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

三、直接在.vue文件中引入element中的组件

例如弹框:

<template>

  <el-button type="text" @click="open"  style="color:red;fontSize:30px;">点击where</el-button>

</template>

<script>

  export default {

    methods: {

      open() {

        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {

          confirmButtonText: '确定',

          cancelButtonText: '取消',

          type: 'warning'

        }).then(() => {

          this.$message({

            type: 'success',

            message: '删除成功!'

          });

        }).catch(() => {

          this.$message({

            type: 'info',

            message: '已取消删除'

          });         

        });

      }

    }

  }

</script>

如图就是成功之后的内容

相关文章

网友评论

    本文标题:vue项目中引入element组件

    本文链接:https://www.haomeiwen.com/subject/bbaoghtx.html