vue-cli4按需引入element-ui

下载node.js以及webpack等
用vue-cli4快速搭建vue项目

vue按需引入element-ui
（1） 用管理员的cmd的窗口进入到项目目录下 安装按需引入用到的插件

 npm install babel-plugin-component -D

(2)然后继续在cmd黑框的项目目录下输入以下命令 安装element-ui 不然下面按需引入的包会报错找不到

 npm i element-ui -S 

（3）然后打开刚刚创建好的vue项目 新建文件 .babelrc 与src文件夹对齐的 输入内容

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

（4）在src文件夹下新建一个文件夹 名字叫element 在这个文件夹下新建一个文件名字为index.js，不要直接在main.js文件中添加以下内容 会报错 老惨了 亲身经历过

// 导入自己需要的组件 这个具体知道自己用什么该引入什么 可以去element-ui官网上看
import { Form,FormItem,Button } from 'element-ui'
const element = {
    install: function (Vue) {
        Vue.use(Form)
        Vue.use(FormItem)
        Vue.use(Button)
    }
}
export default element

（5）然后打开main.js文件 输入以下内容

//就指定从element的文件夹下面的Index文件中引入需要的组件了
import 'element-ui/lib/theme-chalk/index.css'
import element from './element/index'

Vue.use(element)

（6） 之后就可以在app.vue文件中或者其他的文件中正常用组件了 例如

//用按钮 会看到显示element-ui上面的样式
 <el-button type="primary" round @click="saveAccount">add</el-button>

https://www.jianshu.com/p/2181f3c263c2