Skip to content

安装

环境支持

edgeEdgechromesafari
Edgelast 2 versionslast 2 versionslast 2 versions

版本

PlusProComponents 目前还处于快速开发迭代中。

ElementPlus version badge

使用包管理器 推荐

注意

plus-pro-components大于等于 0.0.11 版本,element-plus不再作为plus-pro-components的依赖,需要单独安装。

建议您使用包管理器 (pnpm推荐yarnnpm) 安装 plus-pro-components

sh
pnpm install plus-pro-components
sh
yarn add plus-pro-components
sh
npm install plus-pro-components   --save

浏览器直接引入

直接通过浏览器的 HTML 标签导入 plus-pro-components,然后就可以使用全局变量 PlusProComponents 了。

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

unpkg

html
<head>
  <!-- 导入element-plus样式 -->
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
  <!-- 导入vue3 -->
  <script src="//unpkg.com/vue@3"></script>
  <!-- 导入element-plus -->
  <script src="//unpkg.com/element-plus"></script>

  <!-- 导入plus-pro-components样式 -->
  <link rel="stylesheet" href="//unpkg.com/plus-pro-components/index.css" />
  <!--导入plus-pro-components"  -->
  <script src="//unpkg.com/plus-pro-components"></script>
</head>

jsDelivr

html
<head>
  <!-- 导入element-plus样式 -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css" />
  <!-- 导入vue3 -->
  <script src="//cdn.jsdelivr.net/npm/vue@3"></script>
  <!-- 导入element-plus -->
  <script src="//cdn.jsdelivr.net/npm/element-plus"></script>

  <!-- 导入plus-pro-components样式 -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/plus-pro-components/index.css" />
  <!--导入plus-pro-components"  -->
  <script src="//cdn.jsdelivr.net/npm/plus-pro-components"></script>
</head>

注意

默认使用最新版本,使用时建议加上版本号 如使用0.0.1版本,防止因版本导致应用出现问题。

https://cdn.jsdelivr.net/npm/plus-pro-components@0.0.1/index.min.js