正文
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 只引入需要的插件
