ElementUI

2021-02-26  本文已影响0人  amanohina

Element组件库

Element组件库是饿了吗官方提供的组件库,非常适合开发后台管理系统等相关类型的项目
官网:

https://element.eleme.cn

GitHub仓库:

https://github.com/ElemeFE/element

1.安装:

npm i element-ui -S

2.在main.js中导入:
element-ui中有许多组件,引入是可以采用两种方式,完整引入或者按需引入,不同的引入方式根据组件的使用数量决定,最终影响打包后的文件体积,这里的项目采用完整引入方式

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 引入Element

import ElementUI from 'element-ui'

// 引入Element主题文件

import 'element-ui/lib/theme-chalk/index.css'

// 注册为Vue插件
Vue.use(ElementUI)

Vue.config.productionTip = false

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

ElementUI的使用方式与bootstrap几乎一样,都是一句话:有需求,找文档
在App.vue内测试使用:

<template>
  <div id="app">
      <h1>eduBoss</h1>
    <!-- 跟路由出口 -->
    <router-view/>

    <!-- 测试element是否可用 -->
    <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>

<style lang="scss">

</style>

效果
上一篇下一篇

猜你喜欢

热点阅读