前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >页面布局(下):引入 Tailwind CSS 框架构建博客应用 UI 界面

页面布局(下):引入 Tailwind CSS 框架构建博客应用 UI 界面

作者头像
学院君
发布2023-03-03 14:11:15
2.5K0
发布2023-03-03 14:11:15
举报
文章被收录于专栏:学院君的专栏学院君的专栏

上篇教程中,学院君给大家演示了单页面博客应用前端路由和页面布局的基本构建,不过由于没有应用任何 CSS 样式代码,所以 UI 界面很丑陋,今天,学院君将引入 Tailwind CSS 框架来美化这个博客应用的 UI 界面。

基于 Laravel Mix 引入 Tailwind

在 Laravel 项目中,我们可以基于 Lavavel Mix 快速引入 Tailwind CSS 框架,开始之前,先安装 laravel-mix-tailwind 这个前端依赖包:

安装完成后,需要在项目根目录下的 webpack.mix.js 中引入它:

由于 laravel-mix-tailwind 依赖 tailwind.js,所以还需要通过如下命令初始化 Tailwind:

如果上述命令运行报错,提示 Connot find module 'autoprefixer'

可以通过升级 npm 版本(以 Mac 为例)来解决:

再继续运行初始化命令,就可以执行成功了:

接下来,我们将 tailwind.config.js 重命名为 tailwind.js

然后在 resources/sass/app.scss 中移除 Bootstrap,引入 Tailwind:

最后运行如下命令重新编译前端资源:

编译成功,则表明 Tailwind CSS 框架已正常引入。

安装 Tailwind 语法提示插件

我们将 resources/views 目录下的 welcome.blade.php 重命名为 app.blade.php,并在 routes/web.php 中修改渲染该视图模板的路由定义如下:

另外,我们在 PhpStorm 插件市场中安装下面这个 Tailwind 语法智能提示插件,从而提高编写 Tailwind 样式代码的效率:

做好上述准备后,就可以基于 Tailwind CSS 框架重构博客应用前端页面样式代码了。

纯手工编写 Tailwind 样式代码

你可以在 resources/views/app.blade.php 中仿照上篇教程给出的 WordPress 博客主题模板手动编写和调试页面布局样式代码如下:

然后在浏览器中刷新应用首页,就可以看到如下布局视图了,左侧是菜单导航,右侧是主体内容:

你如果喜欢自己倒腾和设计的话,可以结合 Chrome 开发者工具纯手工逐步调试和编写 Tailwind CSS 样式代码,不过如果你只是想快速完成功能,觉得这样效率比较低,也可以像 Bootstrap 那样去网上找开源代码,然后复制粘贴过来,按照自己的业务需求进行微调即可。

基于开源的 Tailwind 组件快速完成功能

学院君这里就是从网上拷贝过来的不同组件源码组合实现的博客页面布局样式。推荐一个不错的 Tailwind 组件素材库 —— Tailwind Components,在这里,你可以按需搜索自己想要的组件:

相应的源代码都可以免费拷贝过来使用(不同于 Bootstrap,Tailwind 官方的 UI 库收费,所以这个网站是个非常好的 Tailwind UI 素材库替代方案)。

Tailwind 与 Bootstrap 相比另一个优势就是对于这些开源组件,不需要引入额外的 CSS 文件,只需要将 HTML 代码拷贝过来,就可以直接生效了。

下面贴出学院君基于 Tailwind CSS 实现的博客应用页面布局最终 UI 界面效果图:

下面是相关的前端资源页面,主要调整的是视图模板 resources/views/app.blade.php,以及 resources/js/components 目录下的 Vue 单页面组件:

注意到我们这里新增了一个文章详情页命名路由:

其实现和上篇教程介绍的分类页面路由一样,不再多做介绍了。

关于上述页面布局和样式代码的实现,都已经提交这个 Github 代码仓库了:

https://github.com/nonfu/demo-spa.git

不再逐步演示贴出代码了,都是些非常简单的流程,如果你认真看过前面的 Vue 教程,很好理解。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-03-26,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 极客书房 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 基于 Laravel Mix 引入 Tailwind
  • 安装 Tailwind 语法提示插件
  • 纯手工编写 Tailwind 样式代码
  • 基于开源的 Tailwind 组件快速完成功能
相关产品与服务
云开发 CLI 工具
云开发 CLI 工具(Cloudbase CLI Devtools,CCLID)是云开发官方指定的 CLI 工具,可以帮助开发者快速构建 Serverless 应用。CLI 工具提供能力包括文件储存的管理、云函数的部署、模板项目的创建、HTTP Service、静态网站托管等,您可以专注于编码,无需在平台中切换各类配置。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档