vue-cli3按需引入element,包括样式

最新推荐文章于 2023-06-18 22:33:16 发布
最新推荐文章于 2023-06-18 22:33:16 发布
阅读量955 收藏 2
点赞数 1
分类专栏： vue3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mweb_demo/article/details/103305663
版权

第一、创建一个新项目

vue create vue3-test

剩下的步骤省略，可以参考上一篇vue项目搭建。

第二、添加Element插件

vue add element
也可以用vue ui添加插件

安装的时候会有提示询问是全部安装还是按需引入，
选择按需引入
※ 注意项：
这样引入会覆盖app.vue文件，所以建议一开始就安装插件。
避免写着写着，结果安装了插件却发现覆盖了自己已经写好的文件😂

第三、main.js/ts中引入了element.js

在这里插入图片描述

第四、babel.config.js会自动配置按需处理样式

在这里插入图片描述
最后，截图看结果
在这里插入图片描述

不积跬步,无以至千里.
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue CLI3搭建组件库并实现按需引入实战操作
shidouyu的专栏
12-25 3265
Vue CLI3搭建组件库并实现按需引入实战操作 在Vue CLI3搭建组件库并用npm发布实战操作中介绍了单个组件的组件库怎么开发，本文将一步一步教大家怎么开发多个组件集成的组件库，怎么实现组件库按需引入。觉得有用点个赞支持一下。 本文将略过安装Vue CLI3、搭建组件库的项目、清洁组件库项目的步骤，不懂的地方可以看Vue CLI3搭建组件库并用npm发布实战操作 一、建立两个git仓库放本文的示例代码 组件库 引用组件库demo 二、组件库项目中webpack一些基础配置 在Vu
vue+elementui项目打包后样式变化问题
Arlisol的博客
02-24 8741
博主刚刚解决了index.html空白问题，刚打开项目页面又发现了样式出现了大问题，样式与开发版本有很大不同，有些样式没有生效。利用搜索引擎，找到了问题所在以及解决办法： main.js中的引入顺序决定了打包后css的顺序，组件内的样式没有生效可能是被第三方组件样式覆盖了，所以把第三方组件放在前面引入，router放在后面引入，就可以实现组件样式在第三方样式之后渲染。代码如下： main.js /...
Vue3项目中引入ElementUI使用详解
热门推荐
蓑笠翁
06-18 3万+
Vue3项目中引入 ElementUI详解，ElementPlus引入使用。
vuecli3 element按需加载按需引入(包括样式)
longlongValue
06-26 1万+
自从前后端分离之后，大部分时间都是在用weui(we-vue组件库)的css样式做公众号等前端网页开发。 近期公司准备为统一用户项目做一个管理控制台，我就准备用Vue + [element-ui](https://element.eleme.io/)做框架进行开发，具体选型好处就不再详细说明了，这里简单说一下按需引入element-ui的问题。 首先我们按照官网进行install安装操作： ...
vue-cli3按需引入element-UI
青梅煮码
05-19 3649
新建一个项目my-app， vue create my-app 进入my-app文件夹， cd my-app 安装element vue add element 安装的时候会有提示询问是全部安装还是按需引入，选择按需引入（emmm……忘记截图了(灬ꈍ ꈍ灬) ） ※ 注意项：这样引入会覆盖app.vue文件，所以建议一开始就安装...
用Vue-cli搭建的项目中引入css报错的原因分析
08-29
Vue-cli项目中引入css报错的原因分析 在使用Vue-cli搭建项目时，遇到引入css文件报错的问题是非常常见的。本文将详细介绍这种问题的原因分析和解决方法。 问题描述 在使用Vue-cli搭建的项目中，我们经常需要引入...
vue-cli设置css不生效的解决方法
01-19
我们有的项目使用的是老的vue-cli脚手架生成的，今天想写点东西，发现.vue文件里面 style 里面写的样式都不生效了，很自然就想到是不是loader的问题。 在这种项目的webpack.base.config.js一般设置loader的 rules: ...
Vue-cli4 配置 element-ui 按需引入操作
11-19
Vue-cli4 配置 Element-UI 按需引入的操作是一项关键的性能优化技术，它允许开发者只引入项目中实际使用的组件，减少打包后文件的大小，提高应用的加载速度。以下将详细介绍整个配置过程： ### 1. Node.js 和 Vue ...
vue-cli3 引入 font-awesome的操作
10-14
总结来说，引入`font-awesome`到Vue CLI 3项目中主要涉及修改`package.json`、运行`npm install`、导入CSS样式到`main.js`，以及可能的CSS样式调整，以确保图标在不同组件中能正确显示。这个过程对于增强项目视觉...
基于vue-cli3的element-ui的一个项目的基础框架
02-25
【Vue CLI 3 和 Element UI 项目基础框架详解】 Vue CLI 3 是 Vue.js 官方推出的现代化构建工具，它极大地简化了 Vue.js 应用的初始化和开发流程。Vue CLI 3 提供了一个快速、灵活且具有最佳实践的脚手架，用于创建...
vue-cli3.0安装element-ui组件及按需引入element-ui组件
冰雪为融的博客
01-08 1万+
在VUE-CLI 3下的第一个Element-ui项目（菜鸟专用） 上面这个链接是vue-cli3.0安装element-ui的详细过程，如果想要按需引用看下面的 1.引入vue add element How do you want to import Element? -->选择 Import on demand （关键） Choose the locale you want t...
vue-cli3 引入基本框架配置
sunny_day的博客
06-18 1295
1.引入elementUI vue add element 2.在plugins下面的element.js 里面引入你需要的组件（这里我只是用了按钮和表格） import Vue from 'vue' import { Button,Table,TableColumn } from 'element-ui' Vue.use(Button).use(Table).use(TableColumn); 3.在.babelrc中修改配置，改为官方的配置 { "presets": [["es20
脚手架vue-cli3按需引入element ui
;
02-09 1427
一、安装babel-plugin-component： npm install babel-plugin-component -D 二、babel.config.js module.exports = { presets: [ '@vue/cli-plugin-babel/preset', ], plugins: [ [ "compone...
关于Vue-cli 组件引入CSS样式文件
weixin_30832143的博客
03-01 3138
在 Vue-cli 组件 .vue 文件中引入 css 样式表出错 　　　　由于使用Vue-cli后， 引入css 样式表 不需要 多余../../ 之类路径　　 　　　　 现在写法也发生了改变　　　 <style lang="stylus" rel="stylesheet/stylus"> @import '~@/common/stylus/mixins...
vue更改element-ui的样式方法
hu741308125的博客
12-18 2099
1 新加一个style 不要使用scoped <style> .labelAll .el-form-item__label { color: red !important; } </style> 效果如下 2.新加一个scss的style 不使用scoped <style lang="scss"> .dayText { .el-calendar-ta...
vue-cli3打包后 element-ui的icon不显示问题
weixin_44491741的博客
05-10 5457
vue-cli3打包后 element-ui的icon不显示问题 icon不显示发现是路径不对，请求路径是/dist/static/css/static/fonts/732389de.element-icons.ttf，多了css/static。正确路径应该是/dist/static/fonts/732389de.element-icons.ttf vue-cli2可以更改utils.js文件 ```javascript if (options.extract) { return ExtractT
vue项目，引入elementUI没有样式，报错如下图，是好像是少了什么支持文件
u013970971的博客
12-07 8401
问题对人有帮助，内容完整，我也想知道答案 0 问题没有实际价值，缺少关键内容，没有改进余地 7月26日提问 评论 邀请回答 编辑 翻译 查看全部 2 个回答 答案对人有帮助，有参考价值 0 答案没帮助，是错误的答案，答非所问 已采纳 字体的icon没有被解析，你
Vue报错（element UI） -- Unknown custom element:
bobobocai的博客
07-31 3万+
报错信息： 原因： 没有引入相关代码 解决：
vue-cli5.0兼容elementui
最新发布
10-26
根据提供的引用内容，没有明确提到vue-cli5.0是否兼容elementui。但是可以看出，无论是在vue-cli还是在普通的vue项目中，都可以通过引入element-ui插件来使用它的组件和样式。因此，可以认为vue-cli5.0也是兼容elementui的。如果您在使用过程中遇到了问题，可以查看elementui官方文档或者在相关社区中提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值