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 只引入须要的插件