Vue项目中常见问题(56)支付页面使用ElementUI以及按需引入

最新推荐文章于 2024-05-27 09:42:15 发布

学无止境QAQ

最新推荐文章于 2024-05-27 09:42:15 发布

阅读量1k

点赞数 2

分类专栏： vue前台管理项目文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/qq_46368050/article/details/124963631

版权

本文详细介绍了在Vue项目中如何按需引入ElementUI，并通过实例演示了使用ElementUI的MessageBox组件创建支付弹框的过程，包括在main.js中的引入、组件注册、事件绑定及样式调整。

摘要由CSDN通过智能技术生成

大家根据上传历史进行查找你需要的代码

业务需求1:

点击支付按钮弹出遮罩层

我们知道的UI组件库有下图这些常用的,今天我们利用ElementUI来实现业务

控制台输入:

npm install --save element-ui

引入有两种方式,按需引入和完整引入

因为我们这里只需要一个遮罩层,所以我们这里引入方式选择按需引入

首先，安装 babel-plugin-component：

控制台输入:

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

.babelrc相当于我们的babel.config.js文件:

在babel.config.js文件中:

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  "plugins": [
    [
      "component"

关注

专栏目录