vue尚品汇商城项目-day06【vue插件-42.支付页面中使用ElementUI以及按需引入】

你的名字 2024-03-24 13:39 67阅读 0赞

![在这里插入图片描述][201cb7e59bb94276b20be0c55371360b.jpeg_pic_center]

#### 文章目录 ####

*   *  42.支付页面中使用ElementUI以及按需引入
 *  本人其他相关文章链接

### 42.支付页面中使用ElementUI以及按需引入 ###

安装命令：
    cnpm install --save element-ui
    按需引入需额外安装命令：
    cnpm install --save babel-plugin-component

使用方法：

1.  在src/main.js中引入组件并注册。

import { Button,MessageBox} from 'element-ui';
    //注册全局组件
    Vue.component(Button.name,Button);
    //ElementUI注册组件的时候，还有一种写法，挂在原型上
    Vue.prototype.$msgbox = MessageBox;
    Vue.prototype.$alert = MessageBox.alert;

1.  在public/index.html中引入样式

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

1.  在组件中需要使用的地方使用即可。比如

<el-button type="primary" icon="el-icon-phone">测试</el-button>
    或者
    methods: {
          open() {
            this.$alert('<strong>这是 <i>HTML</i> 片段</strong>', 'HTML 片段', {
              dangerouslyUseHTMLString: true
            });
          }
        }

1.  babel.config.js配置规则

plugins: [
        [
          "component",
          {
            libraryName: "element-ui",
            styleLibraryName: "theme-chalk",
          },
        ],
      ],

> element-ui官方UI组件库（插件）？

react框架:  
UI组件库antd【蚂蚁金服旗下PC端UI组件库】  
antd-mobile【蚂蚁金服旗下的移动端UI组件库】

Vue框架:  
element-UI【饿了吗旗下的UI组件库，官方承认的PC组件库插件】  
vant【Vue官方提供移动端UI组件库】

官网地址:[https://element.eleme.cn/\#/zh-CN][https_element.eleme.cn_zh-CN]  
官网地址：[https://youzan.github.io/vant/\#/zh-CN/][https_youzan.github.io_vant_zh-CN]

*  第一步：项目中安装element-ui组件库 \[2.15.6版本：Vue2\]
 *  第二步：在入口文件引入elementUI组件库  
    第一种：全部引入【不采用：因为项目中只是用到一个组件，没必要全都引入进来】  
    第二种：按需引入【按照开发需求引入相应的组件，并非全部组件引入】
 *  第三步：按需引入，安装相应的插件  
    cnpm install babel-plugin-component -D  
    文档中说的.babelrc文件，即为babel.config.js文件  
    修改完babel.config.js配置文件以后，项目重启
 *  第四步：按照需求引入相应的组件即可

Vue.component();  
Vue.prototype.$xxx = xxx;

## 本人其他相关文章链接 ##

1.[vue尚品汇商城项目-day06【37.获取交易数据+38.用户地址信息展示+39.交易信息展示及交易页面完成+40.提交订单+41.支付组件内获取订单号与展示支付信息】][vue_-day06_37._38._39._40._41.]  
2.[vue尚品汇商城项目-day06【vue插件-42.支付页面中使用ElementUI以及按需引入】][vue_-day06_vue_-42._ElementUI]  
3.[vue尚品汇商城项目-day06【43.微信支付业务】][vue_-day06_43.]

[201cb7e59bb94276b20be0c55371360b.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/365ae8783a7c41efb089b3c18e9f7f4f.png
[https_element.eleme.cn_zh-CN]: https://element.eleme.cn/#/zh-CN
[https_youzan.github.io_vant_zh-CN]: https://youzan.github.io/vant/#/zh-CN/
[vue_-day06_37._38._39._40._41.]: https://blog.csdn.net/a924382407/article/details/129921394
[vue_-day06_vue_-42._ElementUI]: https://blog.csdn.net/a924382407/article/details/129921435
[vue_-day06_43.]: https://blog.csdn.net/a924382407/article/details/129921522