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

Web 专栏收录该内容
118 篇文章 0 订阅

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 import
  Import 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
> en
  af-za
  ar
  bg
  ca
  cs-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 component
  5 | }
  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



  • 2
    点赞
  • 5
    评论
  • 6
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 酷酷鲨 设计师:CSDN官方博客 返回首页

打赏

YDOOK 林进威的博客

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值