vue引用局部element-ui 组件

vue 引用局部组件
新建文件 src\plugins\elements.js
import 'element-ui/lib/theme-chalk/index.css'
import Vue from 'vue'
import { Container, Header, Main, Footer, Row, Col, Menu, MenuItem, Carousel, CarouselItem, Message, Image, Popover, Dialog, Button, Form, FormItem, Input, Dropdown, DropdownMenu, DropdownItem, Pagination, Backtop, Table, TableColumn, Badge, Tooltip, MessageBox, Autocomplete } from 'element-ui'

Vue.use(Container)
.use(Header)
.use(Main)
.use(Footer)
.use(Row)
.use(Col)
.use(Menu)
.use(MenuItem)
.use(Carousel)
.use(CarouselItem)
.use(Image)
.use(Popover)
.use(Dialog)
.use(Button)
.use(Form)
.use(FormItem)
.use(Input)
.use(Dropdown)
.use(DropdownMenu)
.use(DropdownItem)
.use(Pagination)
.use(Backtop)
.use(Table)
.use(TableColumn)
.use(Badge)
.use(Tooltip)
.use(Autocomplete)

Vue.prototype.$msg = Message
Vue.prototype.$msgBox = MessageBox

在 main.js 引用 方便调用
import './plugins/elements.js'
这样在main 中方便管理代码 也减少了多余的组件引入
### 如何在 Vue 项目中引入 Element-UI 组件 #### 整体引入方式 为了整体引入 Element-UI 组件库,在 `main.js` 文件中添加以下内容: ```javascript import Vue from 'vue' import App from './App.vue' import router from './router' // 引入element-ui import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.config.productionTip = false; // 使用element-ui Vue.use(ElementUI); new Vue({ router, render: h => h(App) }).$mount('#app') ``` 这种方式会一次性加载所有的组件,适合开发阶段快速上手[^1]。 #### 按需引入方式 对于生产环境来说,推荐按需引入所需的组件来减少打包体积。这可以通过安装并配置 babel-plugin-component 插件实现。具体操作是在 `main.js` 中仅导入必要的样式文件以及自定义的 element 配置文件: ```javascript // 样式文件,需单独引入 import 'element-ui/lib/theme-chalk/index.css'; // 引入写有需要的组件的文件 import element from './element/index'; Vue.use(element); ``` 这里假设已经在项目的某个目录下创建了一个名为 `index.js` 的文件用于指定要使用的特定组件列表[^2]。 #### 单独引入单个组件或指令 如果只需要使用某些特定的功能模块比如无限滚动 (Infinite Scroll),可以直接按照官方文档说明进行局部注册: ```html <template> <!-- HTML模板部分 --> </template> <script> import { InfiniteScroll } from "element-ui"; export default { directives: { infiniteScroll: InfiniteScroll } } </script> <style lang="less"> /* 自定义样式 */ </style> ``` 上述代码展示了如何在一个具体的 Vue 组件内部通过 ES6 解构赋值的方式从 `element-ui` 导出所需功能,并将其作为本地指令应用于当前实例[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小晨毅哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值