ElementUI
2021-02-26 本文已影响0人
amanohina
Element组件库
Element组件库是饿了吗官方提供的组件库,非常适合开发后台管理系统等相关类型的项目
官网:
GitHub仓库:
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>
效果