我如何制作网页的原型

快速浏览一下我用来制作网页原型的简单工作流程

有时我为我的项目制作单个网页。

也许我想重新设计博客。也许它是一个新项目的登陆页面。

这是我使用的流程。

我喜欢用Tailwind来建立原型。

我首先为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: [],
}

Craete一个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。

启动一个终端外壳，进入项目文件夹并运行。

然后，我让浏览器在每次保存页面或重新生成CSS时自动同步变化，使用 browser-sync，这是一个很好的工具，你可以用npm install -g browser-sync 来安装。

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

这就启动了一个服务器，同时自动打开浏览器，并指向新创建的本地Web服务器。

现在，我并排打开VS Code和浏览器，开始进行原型设计!