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中引入样式

<!-- 引入Element-UI样式 -->
<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://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.支付组件内获取订单号与展示支付信息】
2.vue尚品汇商城项目-day06【vue插件-42.支付页面中使用ElementUI以及按需引入】
3.vue尚品汇商城项目-day06【43.微信支付业务】