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