Vue项目中引入ElementUi

全局引入

1. 安装elementui

npm install element-plus --save

2. 在main.js中进行注册

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)

3. 然后就可以直接使用了

按需引入

1. 首先安装elementui

npm install element-plus --save

2. 还需要安装 unplugin-vue-components  和  unplugin-auto-import这两款插件

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

3. 如果是vuecli创建的项目,在 babel.config.js 文件中做出配置

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

4. 创建一个elementui的文件夹,里面创个index.js文件,进行按需引入

// 需要那个,就引入那个
import { ElButton } from 'element-plus'
import 'element-plus/dist/index.css'

// 然后在数组中添加引入的
const components = [ElButton]

function registerElement(app) {
  for (const cpn of components) {
    app.component(cpn.name, cpn)
  }
}

export default registerElement

5. 在main.js中引入刚刚创建的文件

import { createApp } from 'vue'
import App from './App.vue'
import RegisterElement from './elementui/index'

const app = createApp(App)

RegisterElement(app)

app.mount('#app')

6. 然后就可以直接使用了

Success
Info
Warning
Danger