去年发布作者：Pouya Saadeghi

如何安装带有 daisyUI 的 SvelteKit？

SvelteKit 是一个用于构建 Web 应用程序的元框架。它基于 Svelte，一个编译器，可以将你的 Svelte 组件转换为快速高效的 JavaScript。

使用 Svelte 的最大优势，除了速度和开发者体验之外，它还是一个会消失的框架。它不会向你的应用程序添加任何运行时库，因此你只会发布你实际使用的代码。

如果你以前没有使用过 Svelte，你会惊讶于它与其他框架相比是多么容易学习。

如何安装 SvelteKit？

要开始新的SvelteKit项目，你可以使用以下命令

npm create svelte@latest my-app

它会问你几个问题。让我们选择骨架项目:

┌  Welcome to SvelteKit!
│
◆  Which Svelte app template?
│  ○ SvelteKit demo app
│  ● Skeleton project (Barebones scaffolding for your new SvelteKit app)
│  ○ Library project
└

设置完成后，进入项目目录并安装依赖项并启动开发服务器

cd my-app
npm install
npm run dev -- --open

它会在新浏览器标签页中打开http://localhost:5173/你可以看到欢迎来到 SvelteKit消息！

就是这样！你已经有了一个新的 SvelteKit 项目。

如何向 SvelteKit 添加 Tailwind CSS 和 daisyUI？

安装 Tailwind CSS、PostCSS、Autoprefixer 和 daisyUI，然后生成 tailwind.config.js 和 postcss.config.js 文件

npm install -D tailwindcss postcss autoprefixer daisyui
npx tailwindcss init -p

编辑tailwind.config.js文件。添加content和plugins到其中

/** @type {import('tailwindcss').Config} */
export default {
- content: [],
+ content: ['./src/**/*.{html,svelte,js,ts}'],
  theme: {
    extend: {},
  },
- plugins: [],
+ plugins: [require('daisyui')],
}

将以下行添加到svelte.config.js文件

import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
+ preprocess: vitePreprocess(),
  kit: {
    // adapter-auto only supports some environments, see https://kit.svelte.net.cn/docs/adapter-auto for a list.
    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
    // See https://kit.svelte.net.cn/docs/adapters for more information about adapters.
    adapter: adapter()
  }
};

export default config;

创建一个新的src/routes/+layout.svelte文件并导入tailwindcss/tailwind.css使用此命令导入

echo '
<script>
  import "tailwindcss/tailwind.css";
</script>

<slot />
' > src/routes/+layout.svelte

如何在 SvelteKit 中使用 daisyUI 组件？

向src/routes/+page.svelte文件

 <h1>Welcome to SvelteKit</h1>
 <p>Visit <a href="https://kit.svelte.net.cn">kit.svelte.dev</a> to read the documentation</p>
+<button class="btn btn-primary">Hello daisyUI</button>

添加一个 daisyUI 按钮。运行开发服务器，你将看到带有 daisyUI 样式的按钮！

npm run dev -- --open

很简单，对吧？

探索所有你可以在项目中使用的daisyUI 组件，并查看SvelteKit 文档以了解更多关于 SvelteKit 的信息。

标签框架

daisyUI 博客

如何安装带有 daisyUI 的 SvelteKit？

如何安装 SvelteKit？

如何向 SvelteKit 添加 Tailwind CSS 和 daisyUI？

如何在 SvelteKit 中使用 daisyUI 组件？

不要错过新帖子！