最近貌似使用最新的 vue-cli 通过 npm 安装 element-plus 会炸,版本不兼容,还是可以使用下面的方法来进行安装:
vue add element-plus
会自动帮助我们适配版本
注意目前 eement-ui
只支持Vue2.6以下的版本,如果想在Vue3.0使用这个组件库,就要使用 element-plus
1、进入根目录使用以下命令安装:
vue add element-plus
2、输入后,将会提示选择完全安装还是部分安装:
? How do you want to import Element Plus? (Use arrow keys)
> Fully import
Import on demand
3、一般为了方便使用,使用完全安装:
选择后将会提示,询问是否要重写 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)
4、下面是正式开始安装,注意:在上一步按回车之前,建议将 ./src/main.js 文件关于 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'
5、接着,安装成功:
✔ 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
6、随后执行:
npm run serve
运行成功如图所示: