Vue学习笔记72--element ui

Vue UI 组件库：https://element.eleme.cn

移动端常用UI组件库

1. Vant：https://youzan.github.io/vant
2. Cube UI：https://didi.github.io/cube-ui
3. Mint UI：https://mint-ui.github.io
4. NUTUI
5. 。。。。。。

PC端常用UI组件库

1. Element UI：https://element.eleme.cn
2. IView UI：https://www.iviewui.com

Element UI

第一步：安装，npm i element-ui -S

第二步：按需引入，npm install babel-plugin-component -D

第三步：babel.config.js配置

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    // [["es2015", { "modules": false }]],  版本太老
    ["@babel/preset-env", { "modules": false }],
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

第四步：按需引入 Element(请查看：https://element.eleme.cn/#/zh-CN/component/quickstart)

import Vue from 'vue';
import { Button } from 'element-ui';

Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
Vue.use(Button);

。。。。。。

element ui 版本安装控制操作步骤：

1. 卸载element-ui：npm uninstall element-ui
2. 安装element-ui 指定版本：npm i element-ui@2.15.7
3. 安装最新版本：npm i element-ui -S

示例如下所示：

注：图中警告信息，是因为没有应用<el-row> 组件(该问题在示例代码中已处理)

main.js

// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'

// 按需引入
import { Button, Select, Row } from 'element-ui';
/* Vue.component(Button.name, Button);
Vue.component(Select.name, Select); */
Vue.use(Button)
Vue.use(Select)
Vue.use(Row)
Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };

/* 完整引入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI); */

// 配置提示
Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

App.vue

<template>
  <div>
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
    <br><br>
    <el-row>
      <el-button plain>朴素按钮</el-button>
      <el-button type="primary"
                 plain>主要按钮</el-button>
      <el-button type="success"
                 plain>成功按钮</el-button>
      <el-button type="info"
                 plain>信息按钮</el-button>
      <el-button type="warning"
                 plain>警告按钮</el-button>
      <el-button type="danger"
                 plain>危险按钮</el-button>
    </el-row>
    <br><br>
    <el-row>
      <el-button round>圆角按钮</el-button>
      <el-button type="primary"
                 round>主要按钮</el-button>
      <el-button type="success"
                 round>成功按钮</el-button>
      <el-button type="info"
                 round>信息按钮</el-button>
      <el-button type="warning"
                 round>警告按钮</el-button>
      <el-button type="danger"
                 round>危险按钮</el-button>
    </el-row>
    <br><br>
    <el-row>
      <el-button icon="el-icon-search"
                 circle></el-button>
      <el-button type="primary"
                 icon="el-icon-edit"
                 circle></el-button>
      <el-button type="success"
                 icon="el-icon-check"
                 circle></el-button>
      <el-button type="info"
                 icon="el-icon-message"
                 circle></el-button>
      <el-button type="warning"
                 icon="el-icon-star-off"
                 circle></el-button>
      <el-button type="danger"
                 icon="el-icon-delete"
                 circle></el-button>
    </el-row>
  </div>

</template>

<script>
export default {
  name: 'App',
  components: {}
}
</script>

<style scoped>
</style>