关于vue3:Vue33-TS4-自主打造媲美-ElementPlus-的组件库

download：Vue3.3 + TS4，自主打造媲美 ElementPlus 的组件库

ElementPlus 的特点

ElementPlus 是由 Element 团队开发的一个全新的组件库，它齐全基于 Vue 3 的新个性和 API 进行开发，充分利用了 Vue 3 的性能劣势和组合式 API。ElementPlus 的组件不仅领有优良的设计格调和交互体验，而且反对多种主题定制和国际化，适应不同的场景和需要。ElementPlus 还提供了一套残缺的 Sketch 设计资源，不便设计师进行原型设计和视觉稿制作。

ElementPlus 的装置

ElementPlus 反对通过 npm 或 yarn 装置，也反对通过 CDN 引入。装置 ElementPlus 前，须要先确保我的项目曾经装置了 Vue 3。以下是应用 npm 装置 ElementPlus 的命令：

npm install element-plus --save

ElementPlus 的应用

ElementPlus 反对全局引入和按需引入两种形式。全局引入是指在我的项目的入口文件中一次性导入所有的组件和款式，这样能够不便地应用任何一个组件，但会减少我的项目的打包体积。按需引入是指在每个页面或组件中只导入须要应用的组件和款式，这样能够缩小我的项目的打包体积，但须要手动治理每个组件的依赖。

全局引入

如果要应用全局引入的形式，能够在我的项目的入口文件（如 main.js）中增加以下代码：

import {createApp} from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

这样就能够在任何页面或组件中间接应用 ElementPlus 的组件了，例如：

<template>
  <el-button type="primary"> 点击 </el-button>
</template>

按需引入

如果要应用按需引入的形式，须要先装置一个插件 babel-plugin-component，它能够主动转换代码中的 import 语句，实现按需加载组件和款式。以下是装置 babel-plugin-component 的命令：

npm install babel-plugin-component -D

而后，在我的项目根目录下创立或批改 babel.config.js 文件，增加以下配置：

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-plus",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

这样就能够在每个页面或组件中只导入须要应用的组件和款式了，例如：

import {Button} from 'element-plus'

export default {
  components: {[Button.name]: Button
  }
}

<template>
  <el-button type="primary"> 点击 </el-button>
</template>

ElementPlus 的资源

ElementPlus 提供了丰盛的资源和文档，帮忙开发者和设计师更好地应用和学习 ElementPlus。以下是一些罕用的资源：

• 官方网站：提供了 ElementPlus 的介绍、指南、组件文档、资源下载等内容。
• GitHub 仓库：提供了 ElementPlus 的源码、更新日志、奉献指南等内容。
• Sketch 设计资源：提供了 ElementPlus 的 Sketch 组件库，不便设计师进行原型设计和视觉稿制作。
• 入门教程：提供了一个简略的 ElementPlus 入门教程，介绍了如何搭建 Vue 3 开发环境和引入 ElementPlus。

• 集成教程：提供了一个具体的 ElementPlus 集成教程，介绍了如何在 Vue 前端我的项目中应用全局引入和按需引入两种形式集成 ElementPlus。

  总结

  ElementPlus 是一个基于 Vue 3 的桌面端组件库，它提供了丰盛的 UI 组件，帮忙开发者和设计师疾速构建高效、好看、易用的利用。ElementPlus 的特点是齐全基于 Vue 3 的新个性和 API 进行开发，反对多种主题定制和国际化，提供了一套残缺的 Sketch 设计资源。ElementPlus 的装置办法是通过 npm 或 yarn 装置，或者通过 CDN 引入 。ElementPlus 的应用形式是通过全局引入或按需引入两种形式。ElementPlus 的资源包含官方网站、GitHub 仓库、Sketch 设计资源、入门教程和集成教程等。