美文网首页
vue-cli3.x之mint-ui按需引入

vue-cli3.x之mint-ui按需引入

作者: 枫林残忆168 | 来源:发表于2019-01-23 23:09 被阅读87次

    按需引入
    借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。

    首先,安装 babel-plugin-component:

    npm install babel-plugin-component -D
    

    然后,将 babel.config.js修改为:

    module.exports = {
      presets: ["@vue/app"],
      plugins:[
          [
            "component",
            {
              "libraryName": "mint-ui",
              "style": true
            }
          ]
      ]
    };
    

    如果你只希望引入部分组件,比如 Button 和 Cell,那么需要在 main.js 中写入以下内容:

    import Vue from 'vue'
    import { Button, Cell } from 'mint-ui'
    import App from './App.vue'
    
    Vue.component(Button.name, Button)
    Vue.component(Cell.name, Cell)
    /* 或写为
     * Vue.use(Button)
     * Vue.use(Cell)
     */
    
    new Vue({
      el: '#app',
      components: { App }
    })
    

    相关文章

      网友评论

          本文标题:vue-cli3.x之mint-ui按需引入

          本文链接:https://www.haomeiwen.com/subject/ohdejqtx.html