使用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)