Vue集成element-ui

step1 使用vue-cli初始化项目

可参考我的文章Vue入门之使用vue-cli初始化项目

step2 安装element-ui

npm i element-ui --save

安装好之后去main.js里面去引用

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

Vue.use(ElementUI) 

step3 修改HelloWorld.vue

<template>
  <div>
    <el-button type="success">测试</el-button>
  </div>
</template>

如果看到下面的页面，表示成功了

image.png

step4 注意

element 插件较大，我们项目也就引用一些常用组件。可以只引入需要的组件，以达到减小项目体积的目的
例如：我们只引用 button 组件：
修改main.js

import {Button} from 'element-ui'
Vue.use(Button)

这个时候，页面虽然有button 标签，但是没有button 样式，
引入：

npm install babel-plugin-component -D

加载样式

修改 .babelrc 文件 plugins 属性

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

然后刷新界面，Button按钮就有样式了！