VUE全局使用element-ui组件

**

安装element:

**npm i element-ui -S

main.js中引用:

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI)

页面引用组件:

	<div class="staff-border-bottom">
		<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>
	</div>

**

运行项目:

**npm run dev

展示:

在这里插入图片描述
过程中遇到一个BUG
在这里插入图片描述
import 'element-ui/lib/theme-default/index.css’报错,参考了网上的前辈发现有和我一样的错误,发现教程上是import 'element-ui/lib/theme-default/index.css’这样引用文件,但是最新版本的elementui的这个文件夹改名了。。。。。
在这里插入图片描述
我们把main.js引入路径改为import ‘element-ui/lib/theme-chalk/index.css’,再次运行 npm run dev命令,可以正常启动

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 要按需引入Element UI组件,需要使用babel-plugin-component插件。首先,安装插件: ``` npm install babel-plugin-component -D ``` 然后,在babel配置文件中添加插件: ``` // .babelrc { "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] } ``` 这样配置后,就可以在Vue组件中按需引入Element UI组件了: ``` <template> <el-button>按钮</el-button> </template> <script> import { Button } from 'element-ui' export default { components: { 'el-button': Button } } </script> ``` ### 回答2: Vue是一个流行的前端框架,而elementui是一个常用的UI组件库。在大型项目中,如果引入全部的elementui组件,会导致加载速度变慢,会浪费浏览器资源,增加项目的负担。因此,按需引入elementui组件显得非常重要。 按需引入elementui组件的方法,我们需要使用babel-plugin-component 这个Babel插件,它可以帮助我们只加载项目中实际使用Element-UI组件。具体步骤如下: 1. 安装babel-plugin-component 在项目中安装babel-plugin-component插件: ``` npm install babel-plugin-component -D ``` 2. 在.babelrc中配置 在项目的根目录下,可以找到.babelrc文件,若没有,请使用以下命令创建: ``` touch .babelrc ``` 然后在.babelrc文件中添加配置: ``` "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] ``` 这个配置的意思是将element-ui组件和样式按需引入。 3. 按需加载组件 在编写Vue的单文件组件时,只需导入需要使用组件即可。 例如,我们只需要使用Button组件: ``` <template> <button type="primary">按钮</button> </template> <script> import { Button } from 'element-ui' export default { name: 'MyButton', components: { Button } } </script> ``` 需要注意的是,此时的样式并没有导入,还需要手动导入所需的样式表: ``` import 'element-ui/lib/theme-chalk/button.css'; ``` 这样做的好处在于,我们只加载实际需要使用组件和样式,减少了浏览器的负担,提高了项目的加载速度。同时,这种方式也降低了项目的复杂度,使得项目的维护变得更加容易。 ### 回答3: ElementUI是一个非常流行的Vue.js组件库,其丰富的组件和优雅的样式使其成为Vue.js中广受欢迎的UI框架之一。在开发过程中,为了避免引入整个ElementUI库,通常需要按需引入Element组件,以减小项目体积并减少加载时间。 要按需引入Element组件,我们需要借助babel-plugin-component插件。这个插件会根据代码中实际使用到的组件,只打包需要的组件库代码,从而减小打包后的文件大小。 下面是按需引入ElementUI组件的步骤: 1. 安装babel-plugin-component插件 ``` npm install babel-plugin-component -D ``` 2. 在.babelrc文件中配置插件 ``` { "presets": [ "@babel/preset-env" ], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] } ``` 其中libraryName指定了需要引入的组件库名称,styleLibraryName指定了默认样式名称。 3. 在需要使用Element组件的文件中,按需引入相应组件 例如,我们需要使用ElementUI中的Button组件,则需要在需要使用组件的文件中,按以下方式引入: ``` import Vue from 'vue'; import { Button } from 'element-ui'; Vue.use(Button); ``` 我们先从element-ui库中导入Button组件并注册到Vue实例中,在Vue.use()中可以传递其他组件(比如Table等),Vue会自动注册这些组件全局。 当然,我们也可以通过直接在组件内引入的方式来按需引入组件,例如: ``` import { Button } from 'element-ui'; export default { components: { 'el-button': Button }, } ``` 这样就可以按需引入ElementUI中需要的组件了。通过对组件的按需引入,可以大大减少打包体积和加快网页响应速度,提高用户的使用体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值