zoukankan      html  css  js  c++  java
  • vue中按需使用第三方插件

    基于vue-cli3

    1.安装element-ui 和按需加载插件

    cnpm install element-ui babel-plugin-component --save-dev
    

    2.添加配置,在根目录新建babelrc,需要重启服务

    {
      "presets": [["es2015", { "modules": false }]],
      "plugins": [
        [
          "component",
          {
            "libraryName": "element-ui",
            "styleLibraryName": "thecnpmme-chalk"
          }
        ]
      ]
    }

    3.在main.js引入element-ui的message组件

    import { Message  } from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    

    4.插件有两种使用方式,一种是在组件中需要使用插件的地方按需引入

     import { Message  } from 'element-ui';
    
     delProduct(item){
          this.axios.delete(`/carts/${item.productId}`).then((res)=>{
            Message.success('删除成功');
            this.renderData(res);
          });
       },   
    

    5.另一种是使用prototye把插件的对象扩展进来  

    main.js:
    // 通过原型的方式扩展对象,绑定message: Vue.prototype.$message=Message;

    如果是组件的话可以绑定全局component,具体参照官方文档
    https://element.eleme.cn/#/zh-CN/component/quickstart
    Vue.component(Button.name, Button);

    6.使用方式

     this.axios.post('/user/register',{
        username:'admin1',
        password:'admin1',
        email:'admin1@163.com'
    }).then(()=>{
       this.$message.success('注册成功')
    })  
    

      

     

      

  • 相关阅读:
    2.1 CDN Bypass
    4.1 SQL Injection
    ztosec/secscan-authcheck 安装部署教程
    浏览器的内部构造
    左右值的概念
    网络安全学习路线
    Python+Typora博客图片上传
    微信欢乐五子棋辅助
    [SUCTF 2019]EasySQL
    [护网杯 2018]easy_tornado (SSTI)
  • 原文地址:https://www.cnblogs.com/rmty/p/12313346.html
Copyright © 2011-2022 走看看