Elementui避坑指南及vuecli

因为最近复习了一下vue和react的路由部分，然后用了一下vue的element ui，遇到了几个小bug给大家分享一下，

我的步骤是这样的（这里使用的vue cli）vue2

1. 安装element npm i element-ui -S
2. 一般项目都会使用按需引入，因为全部引入的话会使包的体积过大，加载时间变长，首页白屏等现象，当然全是这个造成的，首页白屏的优化方法有很多，比如：vue的ssr，优化协议，懒加载等等等等，诶呀!跑题了，也算简单普及一下吧。下面我们就按需引入

按需引入需要安装一个包

npm install babel-plugin-component -D

• elementui上说配置.babelrc 这个文件，实际上vuecli已经更新了，但文档没有更新，就造成了配置报错的问题，所以这应该是配置vue.config.js 文件
• "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ]3、好啦，进入正题，引入需要的组件，按需引入组件的话，如果都写在main.js中的话会显得很乱，所以我们在src下载创建一个名为element ui的文件夹，在下面创建一个index.js文件。import Vue from 'vue';import { Input} from 'element-ui';Vue.use(Input);4、main.js文件中引入element文件import "element文件的地址"5、下来我们就可以使用啦！！！
• 注意：按需引入的组件 名称是不是很难找，其实有一个小技巧大家看下面
• 比如我们要用的是<el-input v-model="input" placeholder="请输入内容"></el-input>在element文件中引入就用驼峰命名就OK啦不用去找import { Input} from 'element-ui';Vue.use(Input);

然后大家既然看到这了，说明就是真爱粉啦，当然不能亏待大家啦，给大家分享一个非常好用的插件

就是不用引入组件的插件人，让大家摆脱vue2引入组件 的烦恼

1. 安装unplugin-vue-components这款插件（支持vue2哦）当然3也支持 npm i unplugin-vue-components2、配置vue.config.js，加入以下配置configureWebpack: { plugins: [ require('unplugin-vue-components/webpack')({ /* options */ }), ], },这样大家可以使用了，例如我有一个子组件它的name是First然后再App根组件中就直接使用无需inport和components
2. <First/>好啦今天的分享就到这了，谢谢大家的支持谢谢！！！！！