记录element-plus按需要导入的问题

引入的问题解决

global

import { App } from "vue"
import "element-plus/theme-chalk/base.css"
// import "element-plus/theme-chalk/index.css"
// import "element-plus/theme-chalk"
import { ElButton } from "element-plus/lib/components"
console.log("elButton", ElButton)

export default {
  install(app: App) {
    app.use(ElButton)
  }
}

main.ts

import { createApp } from "vue"
import App from "./App.vue"
import router from "./router"
import store from "./store"
import "./service"
import globalRegister from "./global"

createApp(App).use(globalRegister).use(store).use(router).mount("#app")

babel-plugin-import 问题解决

babel.config.js

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

或者这样，新版本需要去掉el-

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