vue-elementUI正确引入方式，希望对你有所帮助！！！

最新推荐文章于 2022-09-27 10:27:03 发布

原创最新推荐文章于 2022-09-27 10:27:03 发布 · 327 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

bigtrain 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了如何在Vue项目中引入Element UI组件，并通过详细的代码示例展示了如何在模板中使用按钮、图标等元素。从main.js配置到组件应用，适合初学者理解Vue与UI库的结合。

在 main.js 入口文件中引入组件
在这里插入图片描述

import Vue from 'vue'
import App from './App'
import router from './router'
import { Button } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.component(Button.name, Button)

Vue.config.productionTip = false

// /* eslint-disable no-new */
// new Vue({
//   el: '#app',
//   router,
//   components: { App },
//   template: '<App/>'
// })

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

使用组件

在这里插入图片描述

<template>
  <div id="pp">
    <h1>sdfsdfdasf</h1>
    <el-button type="primary">按钮</el-button>
    <!-- <my-button>按钮</my-button> -->
    <i class="el-icon-edit"></i>
    <i class="el-icon-share"></i>
    <i class="el-icon-delete"></i>
    <el-button type="primary" icon="el-icon-search">搜索</el-button>
    <el-row>
    <el-button plain>朴素按钮</el-button>
    <el-button type="primary" plain>主要按钮</el-button>
    <el-button type="success" plain>成功按钮</el-button>
    <el-button type="info" plain>信息按钮</el-button>
    <el-button type="warning" plain>警告按钮</el-button>
    <el-button type="danger" plain>危险按钮</el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  name: '#pp'
}
</script>
<style>
</style>