使用elementUI组件来完成前台展示

使用elementUI组件来完成前台展示，当然不是全部都用，有用到的时候，才用。

网址：https://element.eleme.cn/#/zh-CN

安装

cnpm i element-ui -S

 

 

 

快速上手

全局配置,一次配置，全局好用，缺点：不管你用不用，都加载进来了。

在src/main.js文件中配置一下就可以了

// 全局配置elementui组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

在任意组件中都可以直接使用elementui组件了

<template>
  <div class="box">
   <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>
  </div>
</template>

 

 

 

按需加载 

# 安装babel插件

cnpm install babel-plugin-component -D

 

 

 

在项目根目录下面有一个babel.config.js中配置如下

module.exports = {
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ],
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

在组件，完成组件的显示效果 不要在el- 后面首字母大写 el-row el-button 就行了

import Vue from 'vue'
import {Row,Button} from 'element-ui'
Vue.use(Row)
Vue.use(Button)