vite 2.0 + Tailwind CSS 创建工程化 HTML 项目

内容加载中…

从这一期视频开始，你将会通过一系列的视频，学会用 Vue 3.0、Vite 2.0 和 Tailwind CSS 来做一个留言板系统，并利用 Notion API，把它作为数据库来保存数据，使用 Express 构建后端接口。最后实现发布留言、回复留言的功能。 这期视频是系列的第一期，我们先来看看如何使用 Vite 2.0 和 TailWind CSS 创建一个普通的 HTML 工程，使用工程化的方式进行开发。在创建项目之前，先看一下工程化和 Tailwind CSS 的简介。

工程化简介

以前我们在开发网页的时候，会直接编写 HTML、CSS 和 JavaScript 代码，在需要其它第三方库的时候，要么下载下来，要么直接使用 CDN，需要反复在网上寻找和下载，但是自从 Node.js 出来之后，我们可以使用 npm ，管理后端的开发依赖了，后来这个功能被用到了前端工程化的项目中了，利用像 webpack 或 vite 这样的打包工具，可以把一个 Node.js 项目打包成前端静态页面，这样做的好处是：

• 我们可以直接使用 Npm 安装想要的依赖，例如 Tailwind CSS，Bootstrap 等。
• 利用打包工具带来的模块化特性，可以方便多人合作编写复杂的前端项目。

Tailwind CSS 简介

而 Tailwind CSS ，它是一个 CSS 工具类库。传统的 Bootstrap 等框架，会提供整体的组件实现，包括 HTML 和 CSS，其中 HTML 结构必须符合规则，这样就给开发中带来了限制。Tailwind CSS 则是把常用的 CSS 属性都封装在了比较语义化的 class 中，例如 w-12 表示宽度为 12 个单位，相当于直接在 html 中写 css 代码，把这些 class 组合之后就能同时完成 HTML 结构和 CSS 样式，它不要求 HTML 结构，也让我们省了自己去想 class 的名字了。 Tailwind CSS 的这种方式并不是新的思想，其实很多公司里自己都有设计系统，它们也会把常用的样式封装到 class 中，只是 Tailwind CSS 定义了通用的样式，并且支持自定义，这样可以让更多项目使用。

创建项目

现在，让我们用 Vite 2.0 来创建一个 Tailwind CSS 的项目，关于 Vite 2.0 的介绍，可以观看我之前发布的视频，它是一个极速的打包工具，支持 React、Vue 和普通 HTML 项目。

1. 我们找到一个合适的文件夹，运行，根据提示来创建一个项目：

npm init vite@latest
// 或 yarn，我这里使用的是 yarn
yarn create vite

2. 之后，输入项目名称，这里叫 comments-tailwind-vue。
3. 提示选择框架的时候，选择 vanilla，来创建一个原生的 html 项目。
4. 提示选择 variant 的时候，也选择 vanilla，使用 javascript，而不是 typescript。
5. 这时项目就创建完成了。

安装并配置 Tailwind CSS

接下来我们安装并配置 Tailwind CSS。你也可以使用 vite 2.0 的社区模板，来直接创建 Tailwind CSS 项目，不过我们这里手动来创建一下，并不是很复杂。

1. 使用 VS Code 打开项目，在命令行中，安装 Tailwind CSS 相关的依赖：

yarn add -D tailwindcss@latest autoprefixer@latest

这里我们安装了最新版的 tailwind CSS 和 autoprefixer，autoprefixer 会给生成的 css 属性中，加上不同浏览器的前缀，来提高兼容性。Tailwind CSS 还要求安装 postcss，用于后处理 CSS，把一些特殊的语法转换为普通的 CSS，不过 Vite 2.0 已经默认支持 postcss 了，所以这里我们就不用安装了。

2. 接下来生成 tailwind css 的配置文件，运行命令：

npx tailwindcss init -p

这时，它会在项目下生成 tailwind.config.js 和 postcss.config.js 这两个配置文件，我们需要稍微配置一下它们，来加载 tailwind 提供的 css 类库。

3. 打开 tailwind.config.js 文件，在 purge 这个配置项的数组中，加上 "./index.html"，这样在打包的时候，会自动移除 index.html 文件中，没有用到的样式：

purge: ["./index.html"],

4. 打开 vite 自动生成的 style.css 文件，把里边的样式删除，然后引入 Tailwind CSS 的样式，使用@tailwind 命令，来加载它的样式，这个@tailwind 最后会被 postcss 处理，加载真实的 css 代码：

@tailwind base;
@tailwind components;
@tailwind utilities;

5. 在 main.js 里，只保留 import "./style.css" 这一行代码：

import "./style.css";

编写示例代码

好了，现在 Vite 2.0 和 Tailwind CSS 的基础配置就完成了，我们使用 Tailwind CSS 官网提供的示例，来看看配置是否成功了。

1. 打开 index.html 文件，把 <body/> 中的 <div id="app"></div> 这行代码删除。
2. 从 Twailwind CSS 官网找到示例代码，复制到 index.html 的 <body /> 中，放到 <script> 标签的上方：

<div
  class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4"
>
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo" />
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>

4. 这里的 img 中，它有一个 logo.svg，我们可以把它替换成项目里的 favicon.svg，把它的 src 属性改成 "./favicon.svg"：

<img class="h-12 w-12" src="./favicon.svg" alt="ChitChat Logo" />

5. 最后运行 yarn dev，来启动开发服务器 ：

yarn dev

5. 启动成功之后，访问 localhost:3000，一开始可能需要编译一会代码，编译完成后可以看到和官网一样的示例组件，就说明是成功了。

小结

好了，这期视频我们介绍了前端工程化的好处、Tailwind CSS 的设计思想，并使用 Vite 2.0 创建和配置了 Tailwind CSS 的项目，最后使用 Tailwind CSS 官网的示例，来验证是否配置成功了。

你学会了吗？如果有帮助请三连，想学更多有用的前端开发知识，请关注峰华前端工程师，感谢观看！