1.Element入门

最新推荐文章于 2024-12-31 17:36:26 发布

yxx7318

最新推荐文章于 2024-12-31 17:36:26 发布

阅读量92

点赞数

分类专栏： Element 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/a1303490776/article/details/133253695

版权

Element 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了ElementUI，饿了么团队开发的Vue2.0组件库，通过示例展示了如何在项目中引入和使用ElementUI的基本组件，如按钮。主要内容包括在main.js中的配置和ElementView.vue中的组件展示。

摘要由CSDN通过智能技术生成

Element入门

Element：是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
组件：组成网页的部件，例如超链接、按钮、图片、表格、表单、分页条等等
官网：https://element.eleme.cn/#/zh-CNListener

快速入门

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 引入Element组件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false
Vue.use(ElementUI)

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

ElementView.vue

<template>
  <div id="app">
    <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>

<script>
export default {

}
</script>

<style>

</style>

App.vue

<template>
  <element-view></element-view>
</template>

<script>
import ElementView from './views/element/ElementView.vue'
export default {
  components: { ElementView },

}
</script>

<style>

</style>