Vue3引入element-plus

最近貌似使用最新的 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

运行成功如图所示:

Vue3引入element-plus_第1张图片

你可能感兴趣的:(前端,vue.js)