Element ui 按需和完整引入，和组件名称的由来（个人实战）

 

1.安装element-ui

cnpm i element-ui -S

2.main.js 完整引入（这样就可以直接在组件中使用对应的element-ui 组件了）

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3.按需引入（按组件名称引入）

首先，安装 babel-plugin-component

cnpm install babel-plugin-component -S

上面第二个步骤的引入需要注释掉

 

import { Table, TableColumn> } from 'element-ui'; //引入table 组件


 Vue.use(Table)
 Vue.use(TableColumn)

在根目录需要创建一个.babelrc 文件  ,注意，前面有个点

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

 

技巧一：组件的名称怎么来的，对于小白，真的不明白，技巧如下

例如：table 组件，组件名就是el-table 后面的table ,按需引入的时候，记得首字母大写,Table 

如果多个字母组合，就是el-table-colume ,就是TableColumn  

技巧二： 如果已经安装 babel ，可以把 .babelrc 这样文件删了，然后把内容放到 babel.config.js 文件

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