在开始使用 Lit 之前，你需要确保你的开发环境已经准备好。本章将指导你如何安装和配置必要的工具，以便顺利地进行 Lit 的开发工作。
安装 Node.js 和 npm
首先，你需要在你的计算机上安装 Node.js 和 npm (Node 包管理器)。这些工具可以帮助你管理和运行 JavaScript 应用程序。你可以从 Node.js 的官方网站下载适合你操作系统的安装包，并按照指示完成安装过程。
检查安装是否成功
安装完成后，打开终端或命令提示符，输入以下命令来检查 Node.js 和 npm 是否安装成功：
node -v npm -v
如果显示了版本号，说明安装成功。
创建项目文件夹
接下来，你需要创建一个新的项目文件夹。这个文件夹将用于存放你的所有项目文件。
使用命令行创建文件夹
打开终端或命令提示符，然后输入以下命令来创建一个新的项目文件夹：
mkdir lit-project cd lit-project
初始化 npm 项目
在项目文件夹中，初始化一个新的 npm 项目。这将生成一个 package.json 文件，该文件用于存储项目的元数据和依赖项。
npm init -y
安装 Lit
现在，你可以在项目中安装 Lit。Lit 是一个轻量级的 Web 组件库，它使创建自定义元素变得更加简单。
使用 npm 安装 Lit
在项目文件夹的根目录下，通过以下命令安装 Lit：
npm install lit
验证 Lit 安装
为了验证 Lit 是否安装成功，你可以创建一个简单的 HTML 文件并引入 Lit。首先，在项目文件夹中创建一个名为 index.html 的文件，并添加以下内容：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lit 入门</title>
<script type="module" src="./main.js"></script>
</head>
<body>
</body>
</html>接下来，在项目文件夹中创建一个名为 main.js 的文件，并添加以下内容：
// www.javascriptcn.com code example
import { LitElement, html } from 'lit';
class HelloWorld extends LitElement {
render() {
return html`<h1>你好，世界！</h1>`;
}
}
customElements.define('hello-world', HelloWorld);最后，打开 index.html 文件，你应该能在浏览器中看到 "你好，世界！" 的字样。
安装 VS Code 及相关插件
虽然不是强制性的，但推荐使用 Visual Studio Code (VS Code) 作为开发编辑器。它提供了丰富的功能和插件支持，可以显著提高开发效率。
安装 VS Code
访问 VS Code 官网 并下载适合你操作系统的安装包。安装过程非常简单，只需按照提示操作即可。
安装 Lit 插件
在 VS Code 中，搜索并安装 Lit 相关插件，如 lit-plugin 或其他类似的插件，以获得更好的开发体验。
配置 VS Code
安装完插件后，建议根据个人喜好调整 VS Code 的设置，例如代码格式化、自动补全等功能，以便更好地适应 Lit 开发。
通过以上步骤，你已经完成了 Lit 的安装和环境搭建。现在，你可以开始探索更多关于 Lit 的特性和功能，创建出令人惊叹的 Web 组件了。