vue3.0打包配置详解（设计师和产品经理准备的Vue3组件库）

忙族 2023-01-02 11:58:25 721

vue3.0打包配置详解（设计师和产品经理准备的Vue3组件库）根据不同的 CDN 提供商有不同的引入方式，根据不同的 CDN 提供商有不同的引入方式，我们在这里以 unpkg 和 jsDelivr 举例，你也可以使用其它的 CDN 供应商直接通过浏览器的 HTML 标签导入 Element Plus，然后就可以使用全局变量 ElementPlus 了使用包管理器建议使用包管理器 (NPM、Yarn、pnpm) 安装 Element Plus，然后就可以使用打包工具，例如 Vite 和 webpack# 选择一个你喜欢的包管理器 # NPM $ npm install element-plus --save # Yarn $ yarn add element-plus # pnpm $ pnpm install element-plus浏览器直接引入

《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一套专为开发者、设计师和产品经理准备的基于 Vue 3 的桌面端组件库——Element Plus。

vue3.0打包配置详解（设计师和产品经理准备的Vue3组件库）(1)

Element Plus 是基于 Vue 3.0 对 Element UI 的升级适配，使用 TypeScript Composition API 重构的全新项目。官方宣称使用最适合 Vue 3.0 的方式几乎重写了每一行 Element UI 的代码，同样来自于饿了么团队。

Element Plus相较于Element UI有以下提升

使用 TypeScript 开发，提供完整的类型定义文件
使用 Vue 3.0 Composition API 降低耦合，简化逻辑
使用 Vue 3.0 Teleport 新特性重构挂载类组件
使用 Lerna 维护和管理项目
使用更轻量更通用的时间日期解决方案 Day.js
升级适配 popperjs async-validator 等核心依赖
完善 52 种国际化语言支持
全新的视觉
优化的组件 API
更多自定义选项
更加详尽友好的文档

安装使用

环境支持

由于 Vue 3 不再支持 IE11，Element Plus 也不再支持 IE 浏览器

vue3.0打包配置详解（设计师和产品经理准备的Vue3组件库）(2)

使用包管理器

建议使用包管理器 (NPM、Yarn、pnpm) 安装 Element Plus，然后就可以使用打包工具，例如 Vite 和 webpack

# 选择一个你喜欢的包管理器 # NPM $ npm install element-plus --save # Yarn $ yarn add element-plus # pnpm $ pnpm install element-plus

浏览器直接引入

直接通过浏览器的 HTML 标签导入 Element Plus，然后就可以使用全局变量 ElementPlus 了

根据不同的 CDN 提供商有不同的引入方式，根据不同的 CDN 提供商有不同的引入方式，我们在这里以 unpkg 和 jsDelivr 举例，你也可以使用其它的 CDN 供应商

unpkg

<head>  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />  <script src="//unpkg.com/vue@next"></script>  <script src="//unpkg.com/element-plus"></script> </head>

jsDelivr

<head>  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css" />  <script src="//cdn.jsdelivr.net/npm/vue@next"></script>  <script src="//cdn.jsdelivr.net/npm/element-plus"></script> </head>

完整引入

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便

// main.ts import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import App from './App.vue' const app = createApp(App) app.use(ElementPlus) app.mount('#app')

Volar 支持

如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型

// tsconfig.json { "compilerOptions": { // ... "types": ["element-plus/global"] } }

基础用法

使用 type 、 plain 、 round 和 circle 来定义按钮的样式。

vue3.0打包配置详解（设计师和产品经理准备的Vue3组件库）(3)

<template> <el-row class="mb-4"> <el-button>Default</el-button> <el-button type="primary">Primary</el-button> <el-button type="success">Success</el-button> <el-button type="info">Info</el-button> <el-button type="warning">Warning</el-button> <el-button type="danger">Danger</el-button> <el-button>中文</el-button> </el-row> <el-row class="mb-4"> <el-button plain>Plain</el-button> <el-button type="primary" plain>Primary</el-button> <el-button type="success" plain>Success</el-button> <el-button type="info" plain>Info</el-button> <el-button type="warning" plain>Warning</el-button> <el-button type="danger" plain>Danger</el-button> </el-row> <el-row class="mb-4"> <el-button round>Round</el-button> <el-button type="primary" round>Primary</el-button> <el-button type="success" round>Success</el-button> <el-button type="info" round>Info</el-button> <el-button type="warning" round>Warning</el-button> <el-button type="danger" round>Danger</el-button> </el-row> <el-row> <el-button :icon="Search" circle></el-button> <el-button type="primary" :icon="Edit" circle></el-button> <el-button type="success" :icon="Check" circle></el-button> <el-button type="info" :icon="Message" circle></el-button> <el-button type="warning" :icon="Star" circle></el-button> <el-button type="danger" :icon="Delete" circle></el-button> </el-row> </template> <script lang="ts" setup> import { Search Edit Check Message Star Delete } from '@element-plus/icons-vue' </script> <style> :root { --el-color-primary: #409eff; --el-color-success: #67c23a; --el-color-warning: #e6a23c; --el-color-danger: #f56c6c; --el-color-error: #f56c6c; --el-color-info: #909399; } </style>部分组件