美文网首页
Element-UI按需引入 按需打包

Element-UI按需引入 按需打包

作者: 爱学习的小仙女早睡早起 | 来源:发表于2021-10-28 09:23 被阅读0次

    1、使用按需加载之前需要插架的支持,安装以下插件

    npm install babel-plugin-component -D
    

    注意要带-D ,只安装到devDependencies,
    附:devDependencies和dependencies的区别 https://www.jianshu.com/p/ecfc61c87031

    2、babel.config.js 配置

    在babel.config.js:(我采用的是babel.config.js,若是.babelrc按对应格式配置即可)

    module.exports = {
      presets: [
        '@vue/cli-plugin-babel/preset'
      ],
      "plugins": [
        [
          "component",
          {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
          }
        ]
      ]
    
    }
    
    
    
    

    3、新建一个element-ui.js文件

    // 导入自己需要的组件
    import {
        Button,Card
    } from 'element-ui'
    const element = {
        install: function (Vue) {
            Vue.use(Button)
            Vue.use(Card)
        }
    }
    export default element
    
    

    4、main.js配置

    注意这里不需要再引入css!!!

    // element
    //  import 'element-ui/lib/theme-chalk/index.css';  // 注意这里不需要再引入css!!!
    import element from './utlis/element-ui'
    Vue.use(element)
    
    

    相关文章

      网友评论

          本文标题:Element-UI按需引入 按需打包

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