前言
本文将详细讲解如何用最基本的typescript，vite，less构建基于Web Components的组件，目前已实现Button，Icon，Image，Tabs，Input，Message组件。首先介绍项目的整体架构，如何开发第一个Web Components组件——Button，按钮的水波纹特效，实现按钮的disabled和type属性功能。看完一定有所收获~
一.建立项目
主要分为初始化项目和，如何进行开发调试
1.初始化项目
pnpm init
安装typescript,vite,less,vite-plugin-dts(用于生成ts类型声明文件)
pnpm i typescript vite less vite-plugin-dts -D
项目目录结构
utils：存放一些公共函数index.ts: 打包入口
// index.ts
import './components/button/index.ts';
components: 组件目录，新建了button目录，button目录下有index.ts和index.less
// components/button/index.tsclass CustomElement extends HTMLElement {constructor() {super();}}customElements.define("r-button", CustomElement);
vite.config.ts:vite的配置文件
import { defineConfig } from "vite";
import { resolve } from "path";
import dts from 'vite-plugin-dts'
export default defineConfig({build: {minify: 'terser',sourcemap: true,lib: {entry: resolve(__dirname, "index.ts"),// 配置入口文件路径name: "ranui",fileName: "index",formats: ["es", "umd"], // 打包生成的格式},},plugins: [dts()]
});
2.开发和调试
在项目的根目录中创建一个index.html用于开发和调试，在head标签里面加入
<script src="./index.ts" type="module"></script>
配置package.json脚步命令
"scripts": {"dev": "vite","build": "vite build",},
使用pnpm dev启动服务的时候，默认访问根目录下的index.html，然而index.html又引入组件库的入口文件index.ts。如果执行无误的话，body标签里面就可以使用我们自定义的标签了。这就可以开发和调试了。
<body><r-button>这是按钮</r-button>
</body>
自此项目结构搭建完毕，接下来就开始编写button组件代码。 开始写之前先简单回顾下Web Components的一些基础知识。
二.Web Components简述
简单过一下开发Web Components的前置知识，首先是如何创建一个自定义的标签。已经完全掌握的可以跳过，直接看第三章。
1.注册自定义组件
class CustomElement extends HTMLElement {constructor() {super(); // 必需// 组件被创建时执行的逻辑}// 组件的功能}customElements.define("r-button", CustomElement);
使用这个自定义组件
<r-button></r-button>
自定义组件必须使用中横线x-x。创建完了自定义标签，肯定需要加上一些自定义的逻辑和功能，这就会用到组件的生命周期，在对应的时刻，编写相应的逻辑。
2. 组件的生命周期
可以把一些逻辑放到对应的生命周期里，以便在特定的时刻执行。Web Components生命周期有constructor,attributeChangedCallback,connectedCallback,adoptedCallback,disconnectCallback。
class CustomElement extends HTMLElement {constructor() {super(); // 必需// 组件被创建时执行的逻辑}// 组件的功能attributeChangedCallback(){}connectedCallback(){}adoptedCallback(){}disconnectCallback(){}}customElements.define("r-button", CustomElement);
使用方法：
c
最低0.47元/天 解锁文章
2810
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
