【从零开始搞组件】 --- 一个好的组件库都需要什么？

xihaoshangdi
410 阅读2分钟

前言

前端发展到2021年，Vue从初代的1.0版本到现在也已经迭代发展了7年了，作为一个基本上稳定更新的前端框架，从UI库的角度看，Element UI作为大前辈在业界进行广泛的活跃，但是从契合业务的角度上看，以及针对公司业务的场景风格的角度，很多时候Element UI 提供的UI库有些时候是不太契合真实的业务场景的。还需要针对性的二次封装和处理。因此，萌生了一个制作组件库的想法。本次的系列文章就是基于Vue3+Vite+TS 开始从零假设一个组件库。

技术选型

因为我就想搞一搞V3,研究一下Vite,TS和JS从角度上看，我还是比较喜欢具有类型推断的TS,所以就选择了这个技术架构。既然是决定做组件库,那设计也是必不可少的。最近不是大火，但是很火的Figma也可以搞一搞。于是整体的结构就是

技术

  • Vue3
  • Vite
  • TS
  • Sass

设计

  • Figma

预置准备

  • Node
  • Npm (node 自带)
  • Yarn (npm 安装)

搭建项目

Vite官网给出了yarn create vite来创建一个项目

Vite 搭建

  • 首先是选择项目名，这里可以按照你想要做的项目起名字。像是Element -ui，Ant-design-vue 之类的风都行。
  • 接着是选择项目框架：
    • Vanilla JS 其实就是原生JS
    • vue
    • react
    • preact react的轻量级实现
    • lit-element 跟之前小火过的lit-html 配套的Google出品的框架，现在整合叫Lit
    • svelte 近期比较火的框架，尤大还专门列了一个数据对比，组件少的情况下，是比Vue打包小的

vuets

这里选择Vue-ts 搭建就OK了,不得不说,构建工具真的作为集成解决了很多不必要操心的麻烦问题，前端工程化的补课带来的便利已经帮省了很多不必要的繁琐配置。

image.png

最后，执行命令。一个基准的Vue3项目就搭建好了。然后来讲一下目录结构的构成

目录结构

📦vite-project  项目文件夹
 ┣ 📂node_modules 库文件夹
 ┣ 📂public 公共文件夹
 ┃ ┗ 📜favicon.ico
 ┣ 📂src
 ┃ ┣ 📂assets
 ┃ ┃ ┗ 📜logo.png
 ┃ ┣ 📂components
 ┃ ┃ ┗ 📜HelloWorld.vue
 ┃ ┣ 📜App.vue
 ┃ ┣ 📜main.ts 
 ┃ ┣ 📜shims-vue.d.ts ts兼容性声明vue文件
 ┃ ┗ 📜vite-env.d.ts ts兼容环境变量自动提示
 ┣ 📜.gitignore
 ┣ 📜index.html Vite在开发期间作为服务器，以此文件作为入口文件
 ┣ 📜package.json
 ┣ 📜README.md
 ┣ 📜tsconfig.json
 ┣ 📜vite.config.ts
 ┗ 📜yarn.lock

生成的目录结构比较简单，除了一些ts的声明以外，基本上和原本的vue2项目区别不大。这期干货不多，下期我们讲一讲如何自己写一个插件处理vite导入svg碰到的一系列问题。

avatar
文章
阅读
粉丝