element-ui 按需引入

注：本文章用来做记录，是根据各大佬的文章参考的，如发现抄袭，望谅解

1、安装

        版本：2.15.7

npm i element-ui -S

2、添加配置

       element-ui

         原文档：将 .babelrc 修改为：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

我的：在配置信息babel.config.js，添加

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

3、引入控件

      两种情况：（1）在main.js里添加

                        （2）文件导入（我用的），要创建文件

（1）mian.js添加

// 按需引入element-ui
import 'element-ui/lib/theme-chalk/index.css' // element样式
import { Button } from 'element-ui'
Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 }
Vue.use(Button)

（2）文件导入添加

1）先创建文件：（tools/js/element.js）

// 导入自己需要的组件
import {
  Button
} from 'element-ui'
const element = {
  install: (Vue) => {
    Vue.use(Button)
  }
}
export default element

2）在main.js导入

// 按需引入element-ui
import 'element-ui/lib/theme-chalk/index.css' // element样式
import element from './tools/js/element' // 组件
Vue.use(element, { size: 'small', zIndex: 3000 }) // 组件默认大小和层次级