piyopiyo.ex门户教程第二章 – 使用库轻松引入tailwindcss

2 年 ago
文, 翔
1 minute

这篇文章是piyopiyo.ex门户教程的第二章。

 

本章的目的

本章将介绍引入CSS框架和UI库作为设计更改的准备工作。

在参考 @the_haigo さん的Phoenix文章中，使用phx_gen_tailwind来方便地将tailwindcss+daisyUI引入到Phoenix中。

查看NodeJS的执行环境版本。

确认已经安装了Node.js环境，该环境已经部署在预先准备的执行环境中。

node -v

在Replit的Phoenix环境中，默认情况下没有安装NodeJS，但已经安装了名为Nix的包管理器。如果运行未安装的命令，将会提示安装相应的包。

image.png

在出现的提示中输入“Enter”。

image.png

使用此方法可安装Node.js的v16.13.2版本。

image.png

使用 CSS 框架 tailwindcss 的安装

为了在Phoenix中引入tailwindcss，我们需要引入phx_gen_tailwind库。我们将phx_gen_tailwind添加到mix的依赖库定义中。

defp deps do
    [
      ～前略～
      {:plug_cowboy, "~> 2.5"},
      {:phx_gen_tailwind, "~> 0.1.3", only: :dev},
    ]
  end

运行deps.get命令，下载库文件。

mix deps.get

我将确认已引入phx_gen_tailwind。

image.png

运行phx_gen_tailwind命令，并引入tailwindcss。

mix phx.gen.tailwind

中途会被要求安装npm（NodeJS的软件包管理器）。
在提示符上输入。

NPM install new dependencies? [Yn]

当出现该提示时，输入Y并按下Enter键。

image.png

添加UI库daisyUI。

使用已安装的npm安装daisyUI。

cd assets
npm i daisyui
image.png

将已安装的daisyUI作为tailwindcss插件注册到config中。

～前略～
  plugins: [
     require("daisyui") // <-- add here
  ],
}

在这个过程中， 默认的样式被破坏了，感觉Phoenix变得更加成熟了。
※如果Phoenix应用程序出现编译错误，请按下“停止”按钮，然后重新启动Phoenix。

image.png

我們將使用導入的tailwindcss來調整樣式並更改設計。

下一章

 

有关信息

    この演習完了時点のリポジトリ断面

 

    参考にした記事

 

bannerAds