vue Element-UI組件

一.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)
})