Lit：介绍、项目搭建

介绍

什么是Lit

Lit 是一个依据 Web-Component 构建的前端结构，前身根柢能够了解为即 Polymer ， Lit 供给了如下具有竞争力的特性

• 依据 Web-Component 的更高层封装，供给了现代前端开发习气的照顾式数据，声明式的模版，减少了web component的一部分样板代码.
• 小。作业时仅有5K
• 功用强悍。规避了 VDOM 的一些害处，更新时仅处理 UI 中的异步部分（能够了解成仅处理照料式的部分）
• 兼容性较好。由于 web-component 是 HTML 的原生才调，也就代表着 web-component 能够在任何运用 HTML 的当地运用，结构无关。

Lit官方文档

什么是 Web Component

Web Components：基础知识

为什么打算学Lit

• 谷歌出的开发框架
• 是基于Web Component，可以用于构建共享组件，可以用在vue中，也可以用在其他框架中

项目搭建

在其他项目中使用

安装

npm i lit

引入

//js
import {LitElement, html} from 'lit';
//ts
import {LitElement, html} from 'lit';
import {customElement, property} from 'lit/decorators.js';

hello world!

• js 版

import {LitElement, css, html} from 'lit';

export class SimpleGreeting extends LitElement {
  static properties = {
    name: {},
  };
  // Define scoped styles right with your component, in plain CSS
  static styles = css`
    :host {
      color: blue;
    }
  `;

  constructor() {
    super();
    // Declare reactive properties
    this.name = 'World';
  }

  // Render the UI as a function of component state
  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}
customElements.define('simple-greeting', SimpleGreeting);

• ts版

import {LitElement, css, html} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  // Define scoped styles right with your component, in plain CSS
  static styles = css`
    :host {
      color: blue;
    }
  `;

  // Declare reactive properties
  @property()
  name?: string = 'World';

  // Render the UI as a function of component state
  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}

后面的学习统一学习ts版，比较ts越来越火了

纯Lit项目

这里我们借助Vite工具进行创建，从下面这张图来看Lit还是值得学习的，不然Vite也不会支持。

没有安装Vite的先安装一下Vite

//npm
npm init vite@latest
//yarn
yarn create vite
//pnpm
pnpm create vite

我用的npm(6.x)，下面以npm创建项目（基于ts的项目），其他方式可以参照官方文档

下载模板

npm init vite@latest my-lit --template lit-ts

安装依赖

npm install

启动

npm run dev

效果图

其他

路由

Lit官方并未提供路由，但是社区提供了：

lit-element-router传送门：路由

状态管理

Lit官方并未提供共享状态管理，但是社区提供了：

lit-element-state传送门：状态管理

vscode插件

语法高亮：lit-plugin

代码提示：LitElement Snippet

UI库：
感觉比较可以的

• carbon-web-components： 文档 ，github
• ui5-webcomponents：文档，github
• kor： 文档，github

目前来看 ui5-webcomponents 最好有1.1k颗星，其他两个就有点惨。