vue项目引入element-ui的三种方式

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

1、element-ui插件引用(推荐)

通过执行命令vue add element来进行引入
vue项目引入element-ui的三种方式文章来源地址https://www.toymoban.com/news/detail-513526.html

2、npm install(此种方式为全量引入element-ui,打包体积大)

  • 通过执行命令npm i element-ui -S安装依赖
  • main.js文件引入element-ui
import ElementUI from 'element-ui'
Vue.use(ElementUI)
  • main.js文件全局引入element-ui样式
import 'element-ui/lib/theme-chalk/index.css'

3、按需引入element-ui

  • 安装babel-plugin-component
npm i -D babel-plugin-component
  • 修改babel.config.js文件
plugins: [
    [
      'component',
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk"
      }
    ]    
  ]
  • main.js按需引入组件
import {Button,Message} from 'element-ui'
// 引入所需组件
Vue.component(Button.name, Button)
/*全局挂载message方法*/
Vue.prototype.$message = Message

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

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

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

相关文章

  • vue3 vite直接创建项目 添加 element-ui 按需引入和全部引入

    vue3 vite直接创建项目 添加 element-ui 按需引入和全部引入

     创建home 工程 yran dev就可以看到一个网址 点进去就可以看到效果了 添加element-ui 之前的main.js 修改后的 element-plus 在vue3中的按需引入。要比2简介很多 。自动导入也是推荐的一种写法 我们注释掉全局引用  然后改为按需引入 源文件  修改后 首先安装两款插件 修改后

    2024年02月17日
    浏览(17)
  • NodeJS+Vue+Element-Ui/Plus+Axios+Vue-router+vuex 详细下载、安装、创建项目、引入

    NodeJS+Vue+Element-Ui/Plus+Axios+Vue-router+vuex 详细下载、安装、创建项目、引入

    1.下载过程默认下一步 (1)这个是官网全版目录,下载太慢(一般下载不了);但是它写了所有nodejs和npm相互对应的版本,可以以此为参考、防止版本不对应; NodeJS各个历史版本下载 https://nodejs.org/zh-cn/download/releases/ (2)这里有一个快速下载地址,只有16.18.1这个版本,但这

    2023年04月18日
    浏览(25)
  • Vue2项目打包时,引入element-ui 配置 CDN 加速时报错 Cannot read properties of undefined (reading ‘prototype‘)

    Vue2项目打包时,引入element-ui 配置 CDN 加速时报错 Cannot read properties of undefined (reading ‘prototype‘)

     Vue2项目打包优化时,引入element-ui 配置 CDN 加速时报错出现报错信息:Uncaught TypeError: Cannot read properties of undefined (reading \\\'prototype\\\') 老师说出现这个问题的原因是, 如果你完整引入了 Element,它会为 Vue.prototype 添加如下全局方法:$alert, $promp......     所以,如果想要正常使用

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

    【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日
    浏览(18)
  • Vue2 - 引入Element-UI组件样式

    Vue2 - 引入Element-UI组件样式

    官方文档 https://element.eleme.cn/#/zh-CN/component/installation 推荐使用 npm 的方式安装 ,它能更好地和 webpack 打包工具配合使用。 在终端cd到项目文件夹下安装 也可以通过CDN(不推荐) 目前可以通过 unpkg.com/element-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用。

    2024年02月06日
    浏览(17)
  • vue3中按需引入element-ui并配置

    element-ui官网地址:element-ui官网-vue3 npm安装 如果对打包后的文件大小不是很在乎,那么使用完整导入会更方便,这里推荐使用按需引入。 按需引入具体步骤: 首先需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件。 配置vue.config.js文件 main.js文件配置 如果需要使用el

    2024年02月12日
    浏览(15)
  • uni-app小程序引入iconfont的三种方式详解(无需下载文件到项目)

    uni-app小程序引入iconfont的三种方式详解(无需下载文件到项目)

    官网iconfont的引入方式有三种分别为: Unicode 、 Font class 、 Symbol , 其中已明确说明 Unicode、Font class 这两种引入方式 不支持多色 。 单色如何理解呐?具体请看效果对比图(左图为UI上传的图标样式,右边为我们使用这两种方式引入后不加任何样式的效果) 是不是很丑? 另外

    2024年02月09日
    浏览(47)
  • Vue2使用element-ui引入自定义主题的方法(使用在线主题生成工具)

    Vue2使用element-ui引入自定义主题的方法(使用在线主题生成工具)

    第一步 :按照官方文档使用npm安装element-ui,并完整引入Element-ui npm i element-ui -S  main.js中所有的内容删去,改为 随便写点东西,run一下 成功引入element-ui,但是不喜欢默认的蓝色,看起来很烂大街,想换掉。 第二步 :由于不喜欢默认的蓝色主题,可以使用在线主题生成工具

    2024年02月14日
    浏览(18)
  • vue项目打断点的三种方式

    vue项目打断点的三种方式

    方式一:使用debugger 介绍:js自带的方法 优点:简单好用,不需要额外的配置 注意:生产环境下需要去掉 方式二:使用vsCode插件断点 介绍:vscode集成的断点调试,大佬必备 优点:减少浏览器和编辑器之间的频繁切换 提高开发效率 步骤: 安装插件 Debugger for Chrome(已废弃)

    2024年01月24日
    浏览(9)
  • 1. Vue项目中element-ui版本进行升级

    1. Vue项目中element-ui版本进行升级

    vue项目element-ui版本为1.xx.x,要将其升级为2.15.7(最新版本)。 将原element-ui版本删除 安装升级的版本: 全局引入element-ui:在项目的main.js,原来的theme-default换为theme-chalk。 对vue版本进行升级(如果vue版本在2.5.10之下element-ui版本就不可高于2.7): 将 vue-template-compiler的版本升级: 启

    2024年02月11日
    浏览(14)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包