vue3安装element-plus

最新推荐文章于 2024-08-30 22:42:26 发布

zyy_wx

最新推荐文章于 2024-08-30 22:42:26 发布

阅读量1.1w

点赞数 14

文章标签： elementui vue.js 前端

本文链接：https://blog.csdn.net/zyy_wx/article/details/123519457

版权

本文介绍了在Vue3.0项目中由于不支持element-ui，如何通过安装element-plus来使用Element组件。提供了两种引入方式：1) 在main.js中全局引入并注册；2) 在vue.config.js中配置按需导入。详细步骤包括命令行安装、导入样式文件以及相关配置。

摘要由CSDN通过智能技术生成

因为vue3.0不支持element-ui的安装，所以想要使用element组件，只能安装element-plus

1、命令行安装依赖

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

第一种方式：在main.js中引入（完整引入方式）

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

第二种方式：vue.config.js中引入（按需导入方式）

const { defineConfig } = require('@vue/cli-service');
const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  }
})