ElementPlus在vite构建的vue项目中快速使用

快速开始安装npminstallelement-plus--saveyarnaddelement-pluspnpminstallelement-plus引入全部引入import{createApp}fromvueimportElementPlusfromelement-plusimportelement-plus/dist/index.cssimportAppfrom./App.vueconstappcreateApp(App)app.use(ElementPlus)app.mount(#app)按需自动导入下载插件npminstall-Dunplugin-vue-components unplugin-auto-import插入配置import{defineConfig}fromviteimportAutoImportfromunplugin-auto-import/viteimportComponentsfromunplugin-vue-components/viteimport{ElementPlusResolver}fromunplugin-vue-components/resolversexportdefaultdefineConfig({// ...plugins:[// ...AutoImport({resolvers:[ElementPlusResolver()],}),Components({resolvers:[ElementPlusResolver()],}),],})设置语言Element Plus 组件默认使用英文importElementPlusfromelement-plusimportzhCnfromelement-plus/es/locale/lang/zh-cnapp.use(ElementPlus,{locale:zhCn,})图标安装pnpminstallelement-plus/icons-vue注册全局注册import{createApp}fromvueimportElementPlusfromelement-plusimportelement-plus/dist/index.cssimport*asElementPlusIconsVuefromelement-plus/icons-vueimportAppfrom./App.vueconstappcreateApp(App)// 全局注册所有图标for(const[key,component]ofObject.entries(ElementPlusIconsVue)){app.component(key,component)}app.use(ElementPlus)app.mount(#app)按需引入templatediv!-- 方式1直接使用 --el-iconSearch//el-icon!-- 方式2带颜色和大小 --el-iconcolor#409eff:size30Edit//el-icon!-- 方式3作为按钮内容 --el-buttontypeprimaryel-iconSearch//el-icon搜索/el-button/div/templatescriptsetupimport{Search,Edit,Delete}fromelement-plus/icons-vue/script也需要导入css自动导入安装插件npminstall-Dunplugin-auto-import unplugin-icons插入配置import{defineConfig}fromviteimportvuefromvitejs/plugin-vueimportAutoImportfromunplugin-auto-import/viteimportComponentsfromunplugin-vue-components/viteimportIconsfromunplugin-icons/viteimportIconsResolverfromunplugin-icons/resolverimport{ElementPlusResolver}fromunplugin-vue-components/resolversexportdefaultdefineConfig({// ...plugins:[// ...AutoImport({resolvers:[// ...IconsResolver({prefix:Icon,enabledCollections:[ep]})],}),Components({resolvers:[// ...IconsResolver({enabledCollections:[ep]})],}),Icons({autoInstall:true,}),],})主题暗黑主题安装依赖npminstallvueuse/core引入样式文件import{createApp}fromvueimportElementPlusfromelement-plusimportelement-plus/dist/index.css// 关键步骤引入暗黑模式样式importelement-plus/theme-chalk/dark/css-vars.cssimportAppfrom./App.vueconstappcreateApp(App)app.use(ElementPlus)app.mount(#app)创建切换按钮template!-- 使用 Switch 组件作为切换按钮并绑定 isDark 状态 --el-switchv-modelisDarkinline-promptactive-iconMoonNightinactive-iconSunnychangetoggleDark//templatescriptsetupimport{useDark,useToggle}fromvueuse/core// isDark 是一个响应式的 boolean 值会随着系统主题或手动切换而自动变化constisDarkuseDark()// toggleDark 是一个用于切换主题的函数consttoggleDarkuseToggle(isDark)/script工作原理useDark 会自动监听 isDark 的变化并为 标签添加或移除 dark 类。css-vars.css 文件中的样式会基于这个类名生效从而改变所有 Element Plus 组件的颜色自定义主题SCSS 变量覆盖用于项目深度定制、需要完全改变设计语言如主色调、圆角、字体安装依赖npminstallsass-D创建并编写变量覆盖文件使用 forward 和 with 语法将你需要修改的 Element Plus 默认 SCSS 变量包裹起来。// 在这里覆盖 Element Plus 的 SCSS 变量 //1. 修改主题色primary color为绿色 //2. 修改功能色可选 forwardelement-plus/theme-chalk/src/common/var.scsswith($colors:(primary:(base:#4095e5, // 修改主色调),success:(base:#67c23a,),warning:(base:#e6a23c,),danger:(base:#f56c6c,),));如果你使用的是完整导入需要取消下面这行的注释来导入所有组件样式use element-plus/theme-chalk/src/index.scss as *配置构建工具Vite为了让每个组件在编译时都能正确使用到我们新定义的变量需要在构建工具中进行配置import{defineConfig}fromviteimportpathfrompathexportdefaultdefineConfig({// 路径别名为了方便找到文件resolve:{alias:{~/:${path.resolve(__dirname,src)}/,},},css:{preprocessorOptions:{scss:{// 关键在每个 SCSS 文件编译前自动注入我们的变量文件additionalData:use ~/styles/element/index.scss as *;,},},},})在项目中引入主题完成上述配置后你就不再需要手动引入 Element Plus 的预编译 CSS 文件了。只需要在项目的入口文件main.js 或 main.ts中在你引入 element-plus 之前先引入你的自定义主题文件即可。import{createApp}fromvueimport./styles/element/index.scss// 引入自定义主题importElementPlus fromelement-plusimportApp from./App.vueconst appcreateApp(App)app.use(ElementPlus)app.mount(#app)CSS变量用于运行时动态换肤如深色模式、多主题切换你可以在运行时通过 JavaScript 动态修改根元素或任何容器元素上的 CSS 变量页面上所有 Element Plus 组件的样式都会实时响应。!-- 在全局或某个容器上设置 CSS 变量 --style/* 默认主题 */:root{--el-color-primary:#409eff;}/* 深色主题类 */.dark-theme{--el-color-primary:#42b983;}/style// 通过 JS 动态切换主题functionswitchToDarkTheme(){document.documentElement.classList.add(dark-theme)// 或者直接设置变量值// document.documentElement.style.setProperty(--el-color-primary, #42b983);}核心开发顺序建议布局结构el-container、el-header、el-aside、el-main导航菜单el-menu、el-sub-menu数据展示el-table、el-pagination表单录入el-form、el-input、el-select交互反馈el-dialog、el-message、el-loading