跳到主要内容位置

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

安装并配置 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 了，所以这里我们就不用安装了。

  1. 接下来生成 tailwind css 的配置文件，运行命令：
npx tailwindcss init -p

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

  1. 打开 tailwind.config.js 文件，在 purge 这个配置项的数组中，加上 "./index.html"，这样在打包的时候，会自动移除 index.html 文件中，没有用到的样式：
purge: ["./index.html"],
  1. 打开 vite 自动生成的 style.css 文件，把里边的样式删除，然后引入 Tailwind CSS 的样式，使用@tailwind 命令，来加载它的样式，这个@tailwind 最后会被 postcss 处理，加载真实的 css 代码：
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. 在 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>
  1. 这里的 img 中，它有一个 logo.svg，我们可以把它替换成项目里的 favicon.svg，把它的 src 属性改成 "./favicon.svg"：
<img class="h-12 w-12" src="./favicon.svg" alt="ChitChat Logo" />
  1. 最后运行 yarn dev，来启动开发服务器 ：
yarn dev
  1. 启动成功之后，访问 localhost:3000，一开始可能需要编译一会代码，编译完成后可以看到和官网一样的示例组件，就说明是成功了。

小结​

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

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

所有标签:
最近更新于
提示

一系列的课程让你成为高级前端工程师。课程覆盖工作中所有常用的知识点和背后的使用逻辑，示例全部都为工作项目简化而来，学完即可直接上手开发！

即使你已经是高级前端工程师，在课程里也可能会发现新的知识点和技巧，让你的工作更加轻松！

《React 完全指南》课程，连载中现只需 48 元（领取优惠券）点击查看详情。

《Vue 3.x 全家桶完全指南与实战》课程，包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解，让你完全胜任 Vue 前端开发的工作。点击查看详情。

《React即时通信UI实战》课程，利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。

《JavaScript 基础语法详解》本人所著图书，包含 JavaScript 全面的语法知识和新特性， 可在京东、当当、淘宝等各大电商购买