Vue（十八）Element UI

Elment UI

 

1. 简介

Element UI是饿了么团队提供的一套基于Vue2.0的组件库，可以快速搭建网站，提高开发效率

ElementUI PC端

MintUI 移动端

 

[官网](http://element-cn.eleme.io/#/zh-CN)

 

2. 快速上手

　　

　　使用vue-cli创建项目

　　- vue init webpack-simple vue-element

　　- cd vue-element

　　- cnpm install

 

2.1 安装elment ui

cnpm install element-ui -S

 

2.2 在main.js中引入并使用组件

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css' //该样式文件需要单独引入

Vue.use(ElementUI);

这种方式引入了ElementUI中所有的组件

import Vue from 'vue'
import ElementUi from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' //该样式文件需要单独引入
import App from './App.vue'

Vue.use(ElementUI)

new Vue({
  el: '#app',
  render: h => h(App)
}

 

2.3 在webpack.config.js中添加loader

CSS样式和字体图标都需要由相应的loader来加载，所以需要style-loader、css-loader

 

默认并没有style-loader模块，所以需要单独安装

cnpm install style-loader --save-dev

 

2.4 使用组件

 

2.5 使用less

安装loader，需要两个：less、less-loader

cnpm install less less-loader -D

在webpack.config.js中添加loader

 

3. 按需引入组

 

3.1 安装babel-plugin-component

cnpm install babel-plugin-component -D

 

3.2 配置.babelrc文件

"plugins": [["component", [

{

"libraryName": "element-ui",

"styleLibraryName": "theme-default"

}

]]]

 

3.3 只引入需要的插件