在Vue中快速使用ElementUI

最近使用Vue，顺道使用ElementUI，在Vue项目中音容ElementUI的方法

IDEA打开Termianl，在Vue项目中使用npm安装

1.安装：

npm install element-ui -S

2.引入：

（1）整体引入

　　在项目的main.js中写入：

import ElementUI from 'element-ui'

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

Vue.use(ElementUI)

 

（2）部分引入

　　先安装：babel-plugin-component

npm install babel-plugin-component -D

　　然后修改vue项目中的.babelrc配置文件

　　在env的test中增加"libraryName": ["element-ui"],这项配置

　　

　　然后你就可以向下面这样，单独使用部分组件啦　　

import { Button, Select } from 'element-ui'//这里仅引用了Button, Select这两个组件

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

Vue.use(Button)

Vue.use(Select)

当然也可以像下面这样

import { Button } from 'element-ui'//这里仅引用了Button这个组件

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

Vue.component(Button.name, Button);

 

项目搭建中遇到的问题：

在import的index.css时候提示未找到dependency，将

import 'element-ui/lib/theme-default/index.css'

 改为

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