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

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

使用方法：

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

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

在public/index.html中引入样式

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

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

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

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;

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

文章目录

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

本人其他相关文章链接

猜你喜欢