element-UI 按需引入

清水兮兮

已于 2022-05-31 17:09:13 修改

阅读量649

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js elementui javascript

于 2022-05-31 17:08:19 首次发布

本文链接：https://blog.csdn.net/jia632133535/article/details/125069203

本文介绍了如何在Vue项目中按需引入Element-UI库，创建了一个名为`elementui/element.js`的文件，导入并注册了Select、Option等组件。在`main.js`中引入了Element-UI的样式文件，并使用自定义的按需引入组件。最后展示了如何在组件内使用Element-UI的Button组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element-UI 按需引入新建 js 文件夹

一、新建文件夹 elementui/element.js

import { Select, Option, OptionGroup, Input, Tree, Dialog, Row, Col ,Button } from 'element-ui'
const element = {
  install: function (Vue) {
    Vue.use(Select)
    Vue.use(Option)
    Vue.use(OptionGroup)
    Vue.use(Input)
    Vue.use(Tree)
    Vue.use(Dialog)
    Vue.use(Row)
    Vue.use(Col)
    Vue.use(Button)
  }
}
export default element

二、在main.js 引入 css还是要全局引入的

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'element-ui/lib/theme-chalk/index.css'
import element from "./elementui/element"
Vue.config.productionTip = false
Vue.use(element)

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

三、组件内使用

<template>
  <div class="home">
      <el-button type="primary">神话</el-button>
  </div>
</template>

<script>


export default {
  name: 'HomeView',
  components: {
    
  }
}
</script>