Element Plus 如何按需引入和自动导入?解决非标签元素丢失样式的问题

A kitten
蒋川
B 端数据开发,卡拉云联合创始人
最近更新 2022年04月27日

最好用的 6 款 MongoDB GUI 管理工具横向测评 - 免费和付费到底怎么选?

Element Plus 按需引入能非常好的帮助我们减小项目体积。全局引入整个项目大 1mb +,通常我们的项目并不会使用到全部元素,按需引入的项目体积一般在 300kb 左右。大大减小了项目体积。

Element Plus 按需引入完全没必要手动引入。配合插件,帮你自动导入元素和样式,你只需要写代码就行了,插件帮你解决所有问题。

01-on-demand-components-auto-import-vue-element-plus

先来看效果:代码里不用 import 直接用 <el-button> 即可,打包自动帮你自动引入。

快速安装 Vite + Vue 3 + Element Plus

vite-Evan-You-twitter

Vite 和 Vue Cli 都出自 Vue 开发团队,正如尤雨溪在他的 Twitter 上说的那样,Vite 发布有挺长一段时间,时间证明了 Vite 的实力。本文使用 Vite + Vue 3 + Element Plus 环境讲解如何使用自动按需导入功能。

我们先来配一下环境。

安装 Vite 并使用 Vite 创建一个项目

npm install vite -D
npm init @vitejs/app < your project name>

03-vite-setup

然后按照提示,选择符合我们需求的选项即可, cd 到项目目录后,npm install 完成环境配置。

扩展阅读:《5 款最棒的 Vue UI 移动端组件库 - 特别针对国内使用场景推荐

配置 Element Plus 按需引入、自动导入

01-on-demand-components-auto-import-vue-element-plus

怎么才能做到我们埋头写代码,不用管引入问题呢?

我们可以使用 unplugin-vue-components 插件来帮助我们自动按需导入。

npm i unplugin-vue-components -D

安装完成后,修改 vite.config.js ,此文件在项目根目录,与 package.json 在同级目录。

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [vue(),
    Components({
      resolvers: [ElementPlusResolver()],
    }),]
})

04-element-code

然后就可以享受 Element Plus 组件按需自动导入的快乐了。

特别注意: 这种方法无法完成「非标签元素」的自动按需导入,会报错,xxx is not defined 接着我们来谈谈这个问题要怎么处理。

扩展阅读:《Element Plus 和 Ant Design Vue 对比测评,哪个更好?

解决非标签元素丢失样式的问题

非标签元素使用上文的按需自动引入时,会报错。比如自动引入 Elmassage 时,会报 elmessage is not defined 的错误,虽然消息弹窗还是能出来,但样式是乱的,也就是说,虽然组件导入了,但样式没有导入,这个我们可以通过 unplugin-element-plus 插件来解决。

import { ElButton } from 'element-plus'

//    ↓ ↓ ↓ ↓ ↓ ↓

import { ElButton } from 'element-plus'
import 'element-plus/es/components/button/style/css'

unplugin-element-plus 的工作原理是当我们引入(或插件帮我们引入)时,自动引入组件对应的 CSS 样式或者 SASS 文件。两个插件一配合,完美。

我们先来安装这个插件:

npm i unplugin-element-plus -D

然后配置一下 vite.config.js 文件:

import ElementPlus from 'unplugin-element-plus/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    ElementPlus({
      importStyle: 'SASS',
      useSource: true
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ]
})

完成,就这么简单,这样我们可以让两个插件配合帮我们完全按需自动导入组件和对应的样式。

Element Plus 框架的进阶版

Element Plus 是 Vue 3 的一个组件库,所以使用 Element Plus 首先要搭 Vue 3 开发环境,再引入 Element Plus,然后按照文档的说明,根据自己的需求进行二次开发。使用 Element Plus 相对来说对前端技能要求较高。

卡拉云是新一代低代码开发平台,与 Element Plus 相比,卡拉云的优势在于不用搭建 Vue 环境,直接注册即可开始使用。开发者完全不用处理任何前端问题,只需简单拖拽,即可快速生成所需组件,可一键接入包括 MySQL 在内的常见数据库及 API,根据引导简单几步打通前后端,数周的开发时间,缩短至 1 小时。

卡拉云 SQL admin 后台管理系统

上面是用卡拉云搭建的数据库 CURD 后台管理系统,无需任何前端技术,只需拖拽组件,即可在10分钟内完成搭建。查看更多模版

扩展阅读: