Vue引入Element-ui组件库

原创已于 2023-11-16 11:46:41 修改 · 2.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #ui #javascript

于 2023-02-13 20:47:08 首次发布

本文介绍了如何在Vue项目中使用Element-ui，包括通过npm全局安装和在main.js中引入，以及如何按需引入特定组件，以减少项目体积。同时提到了babel-plugin-component在按需引入中的作用，并展示了配置方法。

前言

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站，这篇文章男女通用，看懂了就去分享给你的码吧。
在这里插入图片描述

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

提示：以下是本篇文章正文内容，下面案例可供参考

一、全局引入

1.用npm安装Element-ui

npm i element-ui -S

2.在src下的main.js中引入Element-ui

import Vue from 'vue'
import ElementUI from 'element-ui';             //全局引入element
import 'element-ui/lib/theme-chalk/index.css';    //全局引入element的样式
import App from './App.vue'

Vue.config.productionTip = false

Vue.use(ElementUI);     //全局注入element
new Vue({
  render: h => h(App),
}).$mount('#app')

3.在Helloword.vue中写入你想要的组件

<template>
  <div class="hello">
      <el-button type="success">成功按钮</el-button>
      <el-radio v-model="radio" label="1">备选项</el-radio>
  </div>
</template>

二、按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

1.首先，安装 babel-plugin-component：

npm install babel-plugin-component -D
2.在src下的main.js中引入Element-ui的所需组件

import Vue from 'vue'
// import ElementUI from 'element-ui';             //全局引入element
import {Button,Radio} from 'element-ui';             //按需引入element-ui的Button和Radio
import 'element-ui/lib/theme-chalk/index.css';    //全局引入element的样式
import App from './App.vue'

Vue.config.productionTip = false

// Vue.use(ElementUI);     //全局注入element
Vue.use(Button);     //按需注入Button
Vue.use(Radio);     //按需注入Radio

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

3.在bable.config.js中添加plugins插件

"plugins": [
  [
    "component",
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]
]

4.在Helloword.vue中写入你想要的组件

<template>
  <div class="hello">
      <el-button type="success">成功按钮</el-button>
      <el-radio v-model="radio" label="1">备选项</el-radio>
  </div>
</template>