Vue Shangpinhui Mall Project-day06 [vue Plug-in-42. Use ElementUI in the payment page and introduce it on demand]

42. Use ElementUI in the payment page and introduce it on demand

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

Instructions:

1. Introduce and register components in src/main.js.

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

2. Introduce styles in public/index.html

<!-- 引入Element-UI样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

3. It can be used wherever it needs to be used in the component. for example

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

4. babel.config.js configuration rules

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

element-ui official UI component library (plug-in)?

react framework:
UI component library antd [PC-side UI component library under Ant Financial]
antd-mobile [mobile UI component library under Ant Financial]

Vue framework:
element-UI [Are you hungry for a UI component library, an officially recognized PC component library plug-in]
vant [Vue officially provides a mobile UI component library]

Official website address: https://element.eleme.cn/#/zh-CN
Official website address: https://youzan.github.io/vant/#/zh-CN/

• Step 1: Install the element-ui component library in the project [version 2.15.6: Vue2]

• Step 2: Introduce the elementUI component library in the entry file
  The first type: import all [Not adopted: because only one component is used in the project, it is not necessary to import all of them] The
  second type: Import on demand [Introduce the corresponding ones according to the development requirements Components, not all components are imported]

• Step 3: Import as needed, install the corresponding plug- in
  cnpm install babel-plugin-component -D
  The .babelrc file mentioned in the document is the babel.config.js file
  After modifying the babel.config.js configuration file, restart the project

• Step 4: Introduce the corresponding components according to the requirements

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

Links to my other related articles

1. Vue Shangpinhui Mall Project-day06 [37. Obtain transaction data + 38. User address information display + 39. Transaction information display and transaction page completion + 40. Submit order + 41. Obtain order number and display payment in the payment component Information]
2. vue Shangpinhui mall project-day06【vue plug-in-42. Use ElementUI in the payment page and import on demand】
3. Vue Shangpinhui mall project-day06【43. WeChat payment business】