Webページのプロトタイプを作成する方法

Webページのプロトタイプを作成するために使用する簡単なワークフローの概要

時々私は自分のプロジェクトのために単一のウェブページで作業します。

多分私はブログを再設計したいと思います。多分それは新しいプロジェクトのランディングページです。

これが私が使用するプロセスです。

私は使うのが好きです追い風プロトタイプを作成します。

Tailwindのすべてのパイプラインをセットアップし、PostCSS最初:

作成するpostcss.config.js

const purgecss = require('@fullhuman/postcss-purgecss')
const cssnano = require('cssnano')

module.exports = { plugins: [ require(‘tailwindcss’), require(‘autoprefixer’), cssnano({ preset: ‘default’ }), purgecss({ content: [’./layouts//*.html’, './src//.vue’, './src/**/.jsx’], defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [] }) ] }

作成するtailwind.config.js

module.exports = {
  theme: {},
  variants: {},
  plugins: [],
}

クレイテtailwind.cssファイル:

@tailwind base;
@tailwind components;
@tailwind utilities;

作成するpackage.jsonファイル:

{
  "main": "index.js",
  "scripts": {
    "build:css": "postcss tailwind.css -o output.css",
    "watch": "watch 'npm run build:css' ./layouts"
  },
  "dependencies": {
    "@fullhuman/postcss-purgecss": "^1.3.0",
    "autoprefixer": "^9.7.1",
    "cssnano": "^4.1.10",
    "postcss": "^7.0.21",
    "tailwindcss": "^1.1.3",
    "watch": "^1.0.2"
  }
}

作成するlayouts/index.htmlページを作成し、HTMLを追加します。

ターミナルシェルを起動し、プロジェクトフォルダーに移動して、次のコマンドを実行します。

npm run watch

次に、ページを保存するか、CSSが再生成されるたびに、ブラウザに変更を自動的に同期させます。browser-sync、を使用してインストールできる優れたユーティリティnpm install -g browser-sync

browser-sync start --server --files "."

これによりサーバーが起動し、ブラウザが自動的に開き、新しく作成されたローカルWebサーバーがポイントされます。

次に、VS Codeとブラウザーを並べて開き、プロトタイピングを開始します。


その他のラボチュートリアル: