安装和使用 Astro

Astro 是最适合构建像博客、营销网站、电子商务网站这样的以内容驱动的网站的 Web 框架。Astro 以开创了一种新的前端架构而闻名，与其他框架相比它减少了 JavaScript 的开销和复杂性。如果你需要一个加载速度快、具有良好 SEO 的网站，那么 Astro 就是你的选择。

项目目前用到的插件有 Tailwind CSS UnoCSS Sass

安装

官方安装教程 https://docs.astro.build/en/install-and-setup/

shell

        # pnpm
pnpm create astro@latest
# npm
npm create astro@latest
# yarn
yarn create astro

引入依赖

bash

        pnpm astro add tailwind
pnpm add unocss
pnpm add sass

package.json

        "dependencies": {
    "@astrojs/check": "^0.9.3",
    "@astrojs/tailwind": "^5.1.0",
    "astro": "^4.15.6",
    "sass": "^1.78.0",
    "tailwindcss": "^3.4.11",
    "typescript": "^5.6.2",
    "unocss": "^0.62.3"
  }

配置 .astro.config.mjs

.astro.config.mjs

        // @ts-check
import { defineConfig } from 'astro/config';

import tailwind from '@astrojs/tailwind';
import UnoCSS from 'unocss/astro';

// https://astro.build/config
export default defineConfig({
  integrations: [
    tailwind(),
    UnoCSS()
  ]
});

配置 tailwindcss

tailwind 配置文档

tailwind.config.mjs

        /** @type {import('tailwindcss').Config} */
export default {
    content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
    theme: {
        extend: {},
    },
    plugins: [],
}

配置 uno

UnoCSS 配置文档

uno.config.ts

        import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS options
})

项目结构

bash

        |—— .astro
|—— public
|—— src
|   |—— components
|   |—— layouts
|   |—— pages
|   |   |—— index.astro
|   |—— env.d.ts
|—— .gitignore
|—— .astro.config.mjs
|—— package.json
|—— pnpm-lock.yaml
|—— README.md
|—— tailwind.config.mjs
|—— uno.config.ts