介绍

什么是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 CSSstatic styles = css`:host {color: blue;}`;constructor() {super();// Declare reactive propertiesthis.name = 'World';}// Render the UI as a function of component staterender() {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 CSSstatic styles = css`:host {color: blue;}`;// Declare reactive properties@property()name?: string = 'World';// Render the UI as a function of component staterender() {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颗星，其他两个就有点惨。

Lit：介绍、项目搭建相关推荐

① uni-app 介绍、项目搭建、目录结构
uni-app uni-app介绍项目搭建目录结构 App.vue 和 main.js manifest.json uni.scss pages.json 页面配置 tabbar的配置 condi ...
核心项目：高并发秒杀系统（项目介绍，项目搭建，数据库，DAO）
1,项目介绍 1.1,问题难点在原SSH基础上,替换为SpringBoot系统,模拟了高并发场景的商城系统,它具备秒杀功能,并在经过几个版本的迭代之后成为支持高并发的高性能系统.这种秒杀活动会让用户 ...
体检预约系统(第一天_1.1 项目介绍环境搭建 )
一.医疗健康系统-day01 1.1 第一天内容介绍项目概述健康管理机构软件用于用户预约浏览健康干预等 maven项目搭建 PowerDesigner数据库建模工具 ElementUI快速 ...
SpringBoot个人博客从无到有项目搭建——实战综合介绍
SpringBoot个人博客项目搭建博客Github源码:https://github.com/lindaifeng/QingFengInn-blog 个人博客主页:http://www.qingf ...
react项目实战 1 项目介绍、项目搭建
目录一项目介绍二项目搭建 2.1 本地接口部署 1 创建并导入数据 2 启动接口 3 测试接口 2.2 初始化项目 1 创建项目 2 整理项目的目录一项目介绍名称: 好客租房形式: 移 ...
leyou商城项目搭建（1）-电商行业及乐优商城介绍
leyou商城项目搭建(1)-电商行业介绍 1.了解电商行业 1.1.项目分类 1.1.1.传统项目 1.1.2.互联网项目 1.2.电商行业的发展 1.2.1.钱景 1.2.2.数据 1.2.3.技 ...
Git基本理论、项目搭建、文件操作以及分支介绍
1. Git基本理论 1.1. 三个区域 Git本地有三个工作区域:工作目录(Working Directory).暂存区(Stage/Index).资源库(Repository或Git Direct ...
dajngo3,vue3前端项目搭建,vue项目结构的介绍
前端项目搭建查看当前node版本 [dalaojun@localhost django_luichun]$ node -v v14.15.0 查看npm版本 [dalaojun@localhost ...
spring原理案例-基本项目搭建 01 spring framework 下载官网下载spring jar包
下载spring http://spring.io/ 最重要是在特征下面的这段话,需要注意: All avaible features and modules are described in the ...

Lit：介绍、项目搭建

介绍