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

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

---

---

---