ElementUI

作者: amanohina | 来源:发表于2021-02-26 17:33 被阅读0次

    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>
    
    
    效果

    相关文章

      网友评论

          本文标题:ElementUI

          本文链接:https://www.haomeiwen.com/subject/warrfltx.html