element-plus 关于按需加载的问题

完整的引入没什么说的

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

------------------------------------------------------------

1.   npm install babel-plugin-import -D    yarn add babel-plugin-import -D

2.babel.config.js 中添加 plugins

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

3. 在入口文件中引入 app.config.globalProperties.$ELEMENT = option

这个也是添加全局参数的方法，照理说用下面的方法后，插件会自动添加掉vue的实例中，如果你在ctx的对象中找不到，可以用上面的方法

const { ctx }  = getCurrentInstance();  //  方式一，这种方式只能在开发环境下使用，生产环境下的ctx将访问不到
const { proxy }  = getCurrentInstance();  //  方式二，此方法在开发环境以及生产环境下都能放到组件上下文对象（推荐）

import 'element-plus/packages/theme-chalk/src/base.scss'
import { ElMessage, ElMessageBox } from 'element-plus'


app.use(ElMessageBox)

Element Plus 为 app.config.globalProperties 添加了全局方法 $message。因此在 vue instance 中可以采用在 method 中调用 this.$message 方法唤起 ElMessage

this.$message.warning('商品至少保留一件')

ElMessage.success(options) 官网上有就不多说了

----------------------------------------------------------------------

如果你完整引入了 Element，它会为 app.config.globalProperties 添加如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 Vue instance 中可以采用本页面中的方式调用 MessageBox。调用参数为：

• $msgbox(options)
• $alert(message, title, options) 或 $alert(message, options)
• $confirm(message, title, options) 或 $confirm(message, options)
• $prompt(message, title, options) 或 $prompt(message, options)

this.$confirm('请选择一件商品', {

          showClose: true

        })

      this.$confirm('加入购物车, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '添加成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '您已取消'
        })
      })