YDOOK:vue3.0: vue-cli4.5: 引入 Element PLUS 的正确方法 Vue-cli4.5 引入 element+ plus

article/2025/5/3 2:26:20

YDOOK:vue3.0: vue-cli4.5: 引入 Element PLUS 的正确方法 Vue-cli4.5 引入 element+ plus

1. 官网的指导安装使用方式尚未更新,显示的是:

在这里插入图片描述


2. 如果使用的是 npm 安装, 输入的代码为:

npm install element-plus --save

大陆建议使用下面命令:

cnpm install element-plus --save

输入后显示:

PS F:\Vue xxx> cnpm install element-plus --save    
√ Installed 1 packages
√ Linked 0 latest versions
√ Run 0 scripts
√ All packages installed (used 121ms(network 112ms), speed 49.23kB/s, json 1(5.51kB), tarball 0B)

但在 ./src/main.ts 文件中引入时,仍然会出现错误警告:

在这里插入图片描述


3. 此时需要在 Terminal Shell 中的对应的项目中使用下面命令添加 element-plus 插件才能正常使用:

vue add element-plus

输入后,将会提示选择完全安装还是部分安装:

PS F:\Vue Precitce\Vue\P1\vuets2> vue add element-plus📦  Installing vue-cli-plugin-element-plus...yarn add v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.1.3: The platform "win32" is incompatible with this module.
info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...success Saved lockfile.
success Saved 9 new dependencies.
info Direct dependencies
├─ element-plus@1.0.1-beta.11
├─ vue-cli-plugin-element-plus@0.0.8
└─ vue-wechat-title@2.0.7
info All dependencies
├─ @popperjs/core@2.6.0
├─ async-validator@3.5.1
├─ dayjs@1.9.7
├─ element-plus@1.0.1-beta.11
├─ mitt@2.1.0
├─ normalize-wheel@1.0.1
├─ resize-observer-polyfill@1.5.1
├─ vue-cli-plugin-element-plus@0.0.8
└─ vue-wechat-title@2.0.7
Done in 7.75s.
✔  Successfully installed plugin: vue-cli-plugin-element-plus? How do you want to import Element Plus? (Use arrow keys)
> Fully importImport on demand

4. 一般为了方便使用,使用完全安装:

选择后将会提示,询问是否要重写 SCSS,一般选择 N:

✔  Successfully installed plugin: vue-cli-plugin-element-plus? How do you want to import Element Plus? Fully import
? Do you want to overwrite the SCSS variables of Element Plus? (y/N) 

接着,将会询问使用哪种语言进行主编辑:建议默认回车:

✔  Successfully installed plugin: vue-cli-plugin-element-plus? How do you want to import Element Plus? Fully import
? Do you want to overwrite the SCSS variables of Element Plus? No
? Choose the locale you want to load, the default locale is English (en) (Use arrow keys)zh-cn
> enaf-zaarbgcacs-cz
(Move up and down to reveal more choices)

5. 下面是正式开始安装,注意:在上一步按回车之前,建议将 ./src/main.ts 文件关于 element-plus 的代码行删除,因为开始安装后对应的语句将会被重写,将会出现下面的错误:

error: 'app' was used before it was defined (@typescript-eslint/no-use-before-define) at src\main.ts:5:1:3 | import installElementPlus from './plugins/element.js'4 | installElementPlus(app)
> 5 | app.mount('#app')| ^6 | // import installElementPlus from './plugins/element'7 | const app = createApp(App)8 | // installElementPlus(app)warning: Unexpected any. Specify a different type (@typescript-eslint/no-explicit-any) at src\shims-vue.d.ts:3:44:1 | declare module '*.vue' {2 |   import type { DefineComponent } from 'vue'
> 3 |   const component: DefineComponent<{}, {}, any>|                                            ^4 |   export default component5 | }6 | declare module 'vue-wechat-title'

6. 接着,安装成功:

✔  Successfully installed plugin: vue-cli-plugin-element-plus? How do you want to import Element Plus? Fully import
? Do you want to overwrite the SCSS variables of Element Plus? No
? Choose the locale you want to load, the default locale is English (en) en🚀  Invoking generator for vue-cli-plugin-element-plus...
⚓  Running completion hooks...✔  Successfully invoked generator for plugin: vue-cli-plugin-element-plus




http://chatgpt.dhexx.cn/article/YSf0kHGy.shtml

相关文章

使用Xposed对软件进行破解

入门 去AS里面新建一个NoActivity项目&#xff0c;最好把minimum版本调小 <!-- 加载Xposed模块--><meta-dataandroid:name"xposedmodule"android:value"true" /> <!-- 模块描述--><meta-dataandroid:name"xpose…

破解root密码精简版

破解root密码精简版&#xff1a; 1、重启虚拟机 2、在linux16末尾加上 rd.break,ctrlx执行 3、mount -o remount,rw /sysroot 把根以读写的方式挂载 挂在系统的根sysroot 4、chroot /sysroot 5、passwd root 6、输入新密码&#xff1a; 7、确认密码 8、touch /.autorelabel 标…

【word论文排版教程4】样式的应用

【word论文排版教程4】样式的应用 在使用样式处选择相应样式&#xff0c;同样可以使用之前设置的快捷键 标题比较长&#xff0c;使用软回车进行换行

【word论文排版教程2】论文章节安排及分节

【word论文排版教程2】论文章节安排及分节 论文章节可分为如下8个章节&#xff1a; 封面 中文摘要 英文摘要 目录 正文 参考文献 附录 致谢 输入封面&#xff0c;添加分解符 添加分解符效果 同样方法为其它章节添加分解符。

【word论文排版教程1】页面设置

【word论文排版教程1】页面设置 页面设置要求如下&#xff1a; 页面格式&#xff1a;纸张A4&#xff0c;上2.6cm&#xff0c;下2.6cm&#xff0c;左2.5cm&#xff0c;右2cm&#xff0c;装订线位置左侧&#xff0c;装订线0cm&#xff0c;无文档网格 页面布局->页面设置

毕业必备!推荐收藏的学位论文排版教程(word完整版)

本文将介绍学位论文的页面布局&#xff0c;标题格式&#xff0c;文档生成列表&#xff0c;插入公式&#xff0c;页眉页脚&#xff0c;生成目录、表格和图片的交叉引用、插入参考文献、英语翻译校对等内容和技巧&#xff0c;学习内容偏多&#xff0c;同学们可以先收藏下来&#…

毕业论文word文档排版教程(动图的方式演示,针对wps)

很久之前写好的文章&#xff0c;不知不觉毕业了那么久了 目录 1 常用快捷键 2 显示全部格式标记 3 因有手动换行符无法实现首行缩进 4 利用表格制作矩阵 5 因有英文(代码)和中文而导致空隙过大 6 设置页码和目录 xx 参考文献自动编号并更新文章中的序号 xxx 页…

Latex基本使用:论文排版

文章目录 前言一、参考文献引用二、插入符号1.插入希腊字母2.插入符号 三、插入公式三、插入图片总结 前言 记录使用Latex排版论文的方法。 一、参考文献引用 引用参考文献使用的是bib文件&#xff0c;首先在tex文件所在目录下新建txt文件&#xff0c;修改后缀为bib。 在谷歌…

texlive2020 + vscode 论文排版教程

这是我准备公开的第二篇技术博客&#xff0c;之前也写过一些简单的&#xff08;拿不出手的&#xff09;博文&#xff0c;但一直没信心公开&#xff0c;不过最后觉得也没啥&#xff0c;大家可以交流嘛&#xff0c;万一你写的有错&#xff0c;有好心人看见了指出的话那也是极好的…

毕业论文排版教程(word)桂林电子科技大学

摘要&#xff1a;满心欢喜地给导数发去初稿&#xff0c;换来了一句“格式乱起八糟”&#xff0c;你是否还在为论文排版而苦不堪言&#xff0c;认真看完这份教程&#xff0c;让你轻松搞定毕业论文排版。 毕业论文排版教程&#xff08;word&#xff09;桂林电子科技大学 样式图片…

【word论文排版教程3】制作样式和列表

【word论文排版教程3】制作样式和列表 一级标题&#xff1a;黑体小二&#xff0c;居中&#xff0c;行距“固定值:20磅”&#xff0c;段前、段后均1行。 二级标题&#xff1a;黑体小三&#xff0c;无缩进&#xff0c;行距“固定值:20磅”&#xff0c;段前、段后均0.5行。 三级及…

Word论文排版教程

设置样式 要求&#xff1a; 以下以修改“大标题”为例&#xff0c;其他以此类推 1、大标题 再点击右下角的“段落” 2、标题4… 我们发现word默认只显示了三级标题的样式&#xff0c;如果我们还要更多的样式&#xff1a; &#xff08;选择“所有样式”即可&#xff09; …

论文排版教程

论文排版教程 Tips 一、 常用键 Delete 向后删除 CtrlEnter插入一个分页符 Alt 插入公式 二、 单位可以直接输入 三、定制功能区提升效率 论文正题 一、信息栏制作方法 二、目录制作方法 三、页眉页脚设置 插入分节符 分节符的作用&#xff1a;使得前后两部分在语义上…

Word排版小技巧 | 快速论文排版

文章目录 1.设置中英文字体不同2.设置文档样式3.设置页边距4.设置页眉/页脚/页码添加页眉和页码页眉下边有横线设置从某一页开始显示页码 5.设置自动保存时间&#xff0c;防止死机丢文件6.批量删除空格、空行7. 竖向删除内容8. 图片批量修改大小9. 图片批量居中10.一键拆分表格…

吐血推荐收藏的学位论文排版教程(完整版)

目录 01.保存的高级选项设置 02.纸张设置为A4纸大小 03.设置页边距和装订线距离 04.度量衡的设置 05.创建“论文正文”样式 06.修改论文正文样式 07.设置并修改标题样式 08.给中英文摘要、附录、等大标题套用样式 09.两个Word文档之间进行并排查看 12.一键生成多级列…

2019年下半年软件工程领域各大会议投稿时间(包含会议信息介绍及CCF推荐会议最新目录)

文章目录 前言1 CCF会议最新排名1.1 基本信息1.2 软件工程领域相关会议A类B类C类 2 下半年软工会议投稿时间&#xff08;A类会议&#xff09;2.1 PLDI2.2 POPL2.3 FSE/ESEC2.4 OOPSLA2.5 ASE2.6 ICSE2.7 ISSTA 3 下半年软工会议投稿时间&#xff08;B类会议&#xff09;3.1 ICS…

CCF推荐会议 | 人机交互:截稿日期纵览 (含CSCW, UbiComp, collaboratecom 等会议微信交流群)

以上为未来三个月已公布截稿日期的CCF推荐,人机交互领域会议,按照时间排序。 个别会议因为没有公布截稿信息而不在所列时间线内。 录取率信息为网络上可获得的最近年份数据,不一定是上一年的,文中尽量选择同时带有投稿量的数据年份供大家参考. Core Ranking会排除Not prima…

CCF 会议检索(近期可投)

网址&#xff1a;The Latest Information Technology Conference and Journal List - Conference Partner&#xff0c;注册再查看 步骤&#xff1a; 1、点击会议 2、再点击CCF 3、此时界面是最近可投的CCF会议目录&#xff0c;包括截稿日期和通知日期。 4、点击某个会议&#…

CCF推荐会议/期刊目录(2019)

国际期刊会议 中文 国际 人工智能 https://www.ccf.org.cn/Academic_Evaluation/AI/ 期刊 会议 中文 https://www.ccf.org.cn/ccftjgjxskwml/

CCF推荐期刊/会议历年发表论文数据库:CCF Rec-Paper DB

在调研某个领域的顶刊/顶会文章时&#xff0c;不再“一个个期刊&#xff0c;一场场会议&#xff0c;一年又一年的重复性关键词查找”&#xff0c;只需“领域类别、关键词、A/B/C等级&#xff08;可选&#xff09;、最近n年&#xff08;可选&#xff09;”就可即时返回CCF推荐期…