Vue引入Element-ui组件库-蒲公英云

Vue引入Element-ui组件库

你的名字 2023-09-26 18:04 213阅读 0赞

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

文章目录

前言
一、全局引入
二、按需引入

前言

提示：这里可以添加本文要记录的大概内容：

新手使用

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

一、全局引入

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>