如何製作網頁原型

快速瀏覽我使用的簡單工作流程以製作網頁原型。

有時候我會為我的專案工作在單頁網頁上。

也許我想重新設計部落格，也許是一個新專案的登陸頁。

以下是我使用的工作流程。

我喜歡使用 Tailwind 建立原型。

首先，我先設定好所有的 Tailwind 和 PostCSS Pipeline：

建立 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

接著，我使用 browser-sync 讓瀏覽器自動同步每次儲存頁面或 CSS 重新產生時的變更。你可以使用 npm install -g browser-sync 安裝這個很棒的工具：

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

這會啟動一個伺服器並同時自動開啟瀏覽器並指向剛建立的本地網頁伺服器。

現在我同時打開 VS Code 和瀏覽器並排擺在一起，開始製作原型！