elementUI起步按需引用配置(vue+npm)

按照官方文档的步骤来，踩了一些坑，记录下一、安装elementUInpm i element-ui -S二、安装babel-plugin-componentnpm install babel-plugin-component -D然后官方文档的原话是将 .babelrc 修改为：{presets:...

按照官方文档的步骤来，踩了一些坑，记录下

一、安装elementUI

npm i element-ui -S

二、安装babel-plugin-component

npm install babel-plugin-component -D

然后官方文档的原话是

将 .babelrc 修改为：

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

首先，.babelrc这个文件没有提路径，有的人尝试直接根目录下新建这个文件然后修改成功，这里其实在项目里会多一个babel.config.js，进去修改成如下就可以了

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

这里先跳过，最后再看，如果最后运行失败，提示Cannot find module ‘babel-preset-es2015’，可以先安装，

npm install babel-preset-es2015 -D

然后把上述的babel.config.js文件改成如下即可

module.exports = {
  "presets": [["@babel/preset-env", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

三、在main.js中使用引入即可，按照官方文档来

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)
});

每想加一个组件，对应需要在import { Button, Select } from 'element-ui';中新增，然后再使用，Vue.component(XXXXX.name, XXXXX);或者Vue.use(XXXXXX),XXXX代表对应组件名

结束，文件引用成功，也可以把代码规整下，elementUI的代码放在插件中统一管理，在src目录下新建文件夹plugins，用来存放引入的组件，在plugins下新建elementUI.js,文件内容为

//elementUI.js文件内容
import Vue from 'vue';//这行必须加，不然会报错
import {
     Button, 
     Select
} from 'element-ui';

Vue.use(Button)
Vue.use(Select)

对应的main.js引入即可

main.js对应的修改
import Vue from 'vue';
import App from './App.vue'
import './plugins/elementUI.js'//这行就是引入的代码
Vue.config.productionTip = false;
new Vue({
  render: h => h(App),
}).$mount('#app')