vite全局引入element plus组件

最新推荐文章于 2025-06-18 15:18:50 发布

初晨未凉

最新推荐文章于 2025-06-18 15:18:50 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45638909/article/details/129694148

笔记专栏收录该内容

61 篇文章

订阅专栏

本文介绍了如何使用Vite搭建项目，并详细说明了集成ElementPlusUI库的步骤，包括安装必要的插件、配置vite.config.js文件以及引入中文语言包。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vite的创建方法

参考https://juejin.cn/post/7079785777692934174

element plus的引入方式

1.安装两个插件

npm i unplugin-vue-components unplugin-auto-import -D

2.vite.config.js引入下方内容

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import AutoImport from 'unplugin-auto-import/vite'

import Components from 'unplugin-vue-components/vite'

import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/

export default defineConfig({

plugins: [

vue(),

AutoImport({

resolvers: [ElementPlusResolver()],

}),

Components({

resolvers: [ElementPlusResolver()],

}),

],

})

3.引入中文包（在入口APP.vue中引入）

<template>

<el-config-provider :locale="locale">

<el-button type="primary">kk</el-button>

<el-date-picker

v-model="value1"

type="date"

placeholder="Pick a day"

/>

</el-config-provider>

</template>

<script>

import { reactive, toRefs, defineComponent } from "vue";

import { ElConfigProvider } from 'element-plus'

import zhCn from 'element-plus/lib/locale/lang/zh-cn'

export default defineComponent({

components: {

[ElConfigProvider.name]: ElConfigProvider

},

setup() {

let locale = zhCn;

const state = reactive({

value1:null,

})

return {

...toRefs(state),

locale,

};

}

})

</script>

<style scoped>

</style>