1. npm i element-ui(-D-S根据需要来定)

2.安装 babel-plugin-component

npm install babel-plugin-component -D

3.将 .babelrc文件或babel.config.js 做如下配置:

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

4.按需引入

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

5.配置中的"es2015"改为'@babel/preset-env'

6.在需要的页面使用el-标签名进行使用即可

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐