element UI 按需引入

这篇具有很好参考价值的文章主要介绍了element UI 按需引入。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、npm安装【全局安装element】   

npm i element-ui -S

2、按需引入,借助  babel-plugin-component,

        2.1、首先安装 babel-plugin-component,

npm install babel-plugin-component -D

        2.2、将.babelrc修改为:【是项目中的babel.config.js文件】

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

        2.3、在main.js中引入需要的组件

比如:Button,Select

//引入需要的组件
import { Button, Select } from 'element-ui';

//使用组件
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);

        2.4、或者挂载在原型上使用


//引入组件
import {MessageBox } from 'element-ui';

//挂载到原型上使用
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;

注意:如果依赖下载不了,在每行命令后面加上  文章来源地址https://www.toymoban.com/news/detail-599370.html

--legacy-peer-deps

到了这里,关于element UI 按需引入的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element UI 按需引入

    1、npm安装【全局安装element】    2、按需引入,借助  babel-plugin-component,         2.1、首先安装 babel-plugin-component,         2.2、将.babelrc修改为:【是项目中的babel.config.js文件】         2.3、在main.js中引入需要的组件 比如:Button,Select         2.4、或者挂载在

    2024年02月16日
    浏览(45)
  • element-ui按需引入

    1、安装elment-ui组件库 官方网站 在项目的根目录下安装 element-ui 官方网页: 2、找到官方文档 官方网站 3、安装 babel-plugin-component 在你的项目根目录下运行该: 如: 4、修改 .babelrc 配置文件 vue-li 的 .babelrc 文件里为 babel.config.js 原来的 babel.config.js 文件: 修改后的 babel.config.j

    2024年02月04日
    浏览(59)
  • 引入element-ui步骤(按需引入和全局引入)

    两种引入方式 1)完整引入 2)按需引入 借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。 a)先安装 babel-plugin-component: b)修改 babel.config.js 的内容 c)创建文件 element.js(名字自定义) d)最后在main.js中添加代码

    2024年02月16日
    浏览(52)
  • uni-app(Vue3/Vite) + vant UI(Vue3版本)+ js 按需引入的项目搭建

            因为要完成软件工程的项目,要做一个nativeApp,看了很多的技术文档以后决定使用多端兼容的uni-app来开发。组件方面的话最后决定使用目前比较火的Vant UI。但是看了CSDN和掘金上面的很多文章,似乎没有一篇是关于uni-app中使用Vite对vant组件进行按需引入(可能这个

    2023年04月09日
    浏览(68)
  • 解决element-ui按需引入使用message报错

     报错如上图所示 接下来告知解决方法 ,下方操作均在main.js中   在单独按需引入element组件时,message组件需要挂载到Vue全局对象上,而不是用 Vue.use(Message) ,这是message组件与其他组件不同的地方。其中与之相同、需要挂载到Vue全局对象上的,还有confirm组件。

    2024年02月11日
    浏览(51)
  • vue3 vue.config.js配置Element-plus组件和Icon图标实现按需自动引入

    打包时,报警告,提示包太大会影响性能 在页面直接使用,直接使用 SVG 图标,当做一般的 svg 使用 icon使用时需要用以下两种方式方式: 如果用在el-button里面的icon属性上使用,用SVG方式无效,还是需要引入再使用(不知道有没有其他方式) 注意: 使用 :icon=\\\"Edit\\\" 则icon的大

    2024年02月06日
    浏览(70)
  • Element组件完整引入、按需引入、样式修改(全局、局部)、简单安装less以及npm命令证书过期等

    npm i element-ui -S 在 main.js 中写入以下内容: 以上代码便完成了 Element 的引入。需要注意的是,样式文件需要单独引入。 借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。 首先,安装 babel-plugin-component: npm install babel-plugin-component -D 然后,将

    2024年01月23日
    浏览(54)
  • 【Vue框架】Vue2中element-ui/mint-ui组件库——element-ui引入组件以及使用案例、mint-ui引入组件及使用案例

    element-ui 提供了大量的组件,如:布局组件、表单组件、JS组件等等。 Element-ui官网: https://element.eleme.cn/#/zh-CN 安装 Element-ui: npm i element-ui -S 1.1.1 引入组件 引入 Element 完整引入(在 main.js 中写入以下内容): 按需引入 借助 babel-plugin-component,我们可以只引入需要的组件,以达到

    2024年02月07日
    浏览(58)
  • 【VUE】4、VUE项目中引入Element-UI

    1、element-ui 官方文档(中文版) 2、安装 element-ui 1、进入项目目录下 2、安装 element-ui 注意: VUE2 使用的是 element-ui,VUE3 使用的是 element-plus 3、引入 element-ui(完整引入) 1、打开 main.js 文件 在 main.js 文件中,引入 element-ui 2、注册 element-ui 以上代码便完成了 Element 的引入。需

    2024年02月01日
    浏览(52)
  • vue2引入Element UI的详细步骤

    目录 一、Element UI介绍 Element UI的特点: 二、下载配置Element UI (零)创建vue项目 (一)下载Element UI依赖   (二)全局文件main.js中引入Element UI 三、删除多余的东西  (一)删除App.vue多余的  (二)删除多余的页面  (三)删除router路由多余的  四、新建vue页面 (一)新建

    2024年02月08日
    浏览(90)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包