Default Svelte Study

CN-GUOYIMING

README

Svelte app を作成

# プロジェクトを新規作成
npx degit sveltejs/template app-name

# プロジェクトディレクトリに入る
cd app-name

# TypeScript を追加する
node scripts/setupTypeScript.js

# 依存をインストール
# 依存定義ファイル：app-name/package.json
npm install

# ローカルサーバーを起動
npm run dev

svelte document (CN)

Routing

注：本サンプルでは既にインストール済み。

ルーターの依存をインストール

npm install svelte-spa-router

ルーターの使用方法

詳細は svelte-spa-router document で参照してください。

このプロジェクトでの使い方：

// src/router/routes/index.ts

// 1. ここで画面コンポーネントを導入
import Home from '../views/Home.svelte'
import RouteTest from '../views/RouteTest.svelte'

export const routes = {
  // 2. ここでルーターを設置
  // '/url': component
  '/home': Home,
  '/routetest': RouteTest,
}

// 3. ブラウザで以下の様にアクセス
// http://ローカルホスト/#/url

Tailwindcss

二種類の導入方法が存在する。

PostCSS のプラグインとして Tailwindcss を導入

Tailwindcss の依存をダウンロード

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Tailwindcss を設置する

rollup.config.js（ webpack と似たパッキングツール）ファイル内に tailwind を設置する。
『How to Use Tailwind on a Svelte Site』で詳細を確認できる。

PostCSS 及び Tailwind 処理パッケージを導入。

// rollup.config.js
import sveltePreprocess from "svelte-preprocess";

プラグインを導入する。

// rollup.config.js
preprocess: sveltePreprocess({
  sourceMap: !production,
  postcss: {
    plugins: [
    require("tailwindcss"), 
    require("autoprefixer"),
    ],
  },
}),

App.svelte ファイルに注入する。

<!-- App.svelte -->
<style global lang="postcss">
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

Tailwind CLI で Tailwindcss を導入する

『tailwindcss document』で詳細を確認できる。

PostCSS で最終的に出力される CSS にコンパイル。

css ファイルを置く場所に tailwind.css を作成する。
- 使用上どのディレクトリでも構わない。
- ファイル名も任意に変更できる。
```
/* ./src/assets/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

tailwind の出力ファイルを単独にビルド。

# どのファイル名も自由
# --watch で変更を監視することができる
npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css

html フィアルで出力された方の tailwind.css を導入

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ... -->
    <link rel="stylesheet" href="/tailwind.css" />
  </head>
  <body></body>
</html>

個別にコンパイルし、シングルページの html で <link /> タグを使って導入。

Top categories