Vue(十八)Element UI

vue

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

 

以上是 Vue(十八)Element UI 的全部内容, 来源链接: utcz.com/z/379459.html

回到顶部