vue Element-UI组件

Posted 2020-10-25 AlanTao

一.UI组件

目的: 提高开发效率, 别人提供好一切, 拿过来直接用
饿了么团队开源一个基于vue组件库

Element-UI ==> pc端

文档: http://element-cn.eleme.io/#/zh-CN/component/installation

二.安装模板

$ vue init webpack element-demo

1.安装element-ui

$ npm install element-ui -save

// 简写
// i ==> install
// S ==> --save
// D ==> --save-dev

 

三.全部引入Element-ui

1.在main.js引入 Element (全部引入)

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)

2.然后就可以使用element-ui

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="info">主要按钮</el-button>
        <i class="el-icon-edit"></i>
        <i class="el-icon-share"></i>
        <i class="el-icon-delete"></i>
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
        <el-row>
            <el-col :span="12"><div class="grid-content bg-purple-dark"></div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple-dark"></div></el-col>
        </el-row>
    </div>
</template>

 

3.通过基础的 24 分栏，迅速简便地创建布局。

<el-row>
    <el-col :span="12"><div class="grid-content bg-purple-dark"></div></el-col>
    <el-col :span="12"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>

　　

4.图标

<i class="el-icon-edit"></i>

　　

5.按钮

<el-button type="info">主要按钮</el-button>

　　

四.按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
安装 babel-plugin-component：

$ npm install babel-plugin-component --save-dev
$ npm install element-ui --save

1.将.babelrc 修改为：

{
    "plugins": [
        ["component", {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
            }   
        ]
    ]
}

 

2.如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

import Vue from ‘vue‘
import { Button, Select } from ‘element-ui‘
import App from ‘./App.vue‘

Vue.use(Button)
Vue.use(Select)

/* 或写为
 * Vue.component(Button.name, Button)
 * Vue.component(Select.name, Select)
 */

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