element-plus 按需引入的两种方式( 官方推荐方式 及babel-plugin-import)

1.官方推荐方式

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

Webpack安装

方式一：写入 webpack.config.js

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

方式二：写入 vue.config.js

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // vue.config.js 方式一 写法
  // configureWebpack: {
  //   plugins: [
  //     AutoImport({
  //       resolvers: [ElementPlusResolver()],
  //     }),
  //     Components({
  //       resolvers: [ElementPlusResolver()],
  //     }),
  //   ],
  // }
  
  // vue.config.js 方式二 写法
   chainWebpack: (config) => {
     config
       .plugin('AutoImport')
       .use(AutoImport({ resolvers: [ElementPlusResolver()] }))
     config
       .plugin('Components')
       .use(Components({ resolvers: [ElementPlusResolver()] }))
   }

 
}

官方的写法 加载有点慢

2.babel-plugin-import

ant-design ui 里看到的 使用方式按需加载使用方式 按需加载
npmjs https://www.npmjs.com/package/babel-plugin-import

npm install babel-plugin-import -D 

element-plus 使用 babel-plugin-import 要注意版本使用的 element-plus版本
旧版本与新版本的目录结构不一样
如 "element-plus": "^1.0.2-beta.62"版本 theme-chalk 是存放组件css样式的文件夹 放在 lib 文件内，组件文件放在lib文件夹 组件文件夹名称为el-开头 例如：el-button'

引入基础base.css

// main.ts
import 'element-plus/lib/theme-chalk/base.css'

babel.config.js配置

module.exports = {
plugins: [
  [
    'import',
    {
      libraryName: 'element-plus',
      customStyleName: (name) => {
         return `element-plus/lib/theme-chalk/${name}.css`
      },
    }
  ]
],
presets: ['@vue/cli-plugin-babel/preset']
}

而"element-plus": "^1.3.0-beta.8" 版本theme-chalk 是存放组件css样式的文件夹 放在了根目录，组件文件f放在lib/components文件夹 组件文件夹名称去除了el-开头 例如：button',还有一点以item结尾命名的组件其注册组件文件放置在的其上一级组件 如：form-item的注册的文件index.js是存放在form组件里面的，他们共用一个index.js （还有option 注册在 select…,还有许多关联的！剩下自己探坑！）

引入基础base.css

// main.ts
import 'element-plus/theme-chalk/base.css'

babel.config.js配置

module.exports = {
plugins: [
  [
    'import',
    {
      libraryName: 'element-plus',
      customStyleName: (name) => {
        return `element-plus/theme-chalk/${name}.css`
      },
      customName: (name) => {
        let nameList = name.split('-')
        let slength = '-item'.length
        let nlength = String(name).length
        //对item结尾组件处理
        if (nameList.length && nameList.includes('item')) {
          return `element-plus/lib/components/${name.slice(
            3,
            nlength - slength
          )}`
        }
        return `element-plus/lib/components/${name.slice(3)}`
      }
    }
  ]
],
presets: ['@vue/cli-plugin-babel/preset']
}