制作网页原型

Sometimes I work on single web pages for my projects.

有时，我在单个网页上为我的项目工作。

Maybe I want to redesign the blog. Maybe it’s a landing page for a new project.

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

This is the process I use.

这是我使用的过程。

I like to use to build prototypes.

我喜欢使用构建原型。

I set up all the pipeline for Tailwind and first:

我首先为Tailwind和设置了所有管道：

Create postcss.config.js:

创建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-/:]+(?
     

Create tailwind.config.js:

创建tailwind.config.js ：

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

Craete a tailwind.css file:

一个了解创建tailwind.css文件：

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

Create a package.json file:

创建一个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"  }}

Create a layouts/index.html page, and add your HTML.

创建一个layouts/index.html页面，然后添加您HTML。

Start a terminal shell, go to the project folder and run:

启动终端外壳，转到项目文件夹并运行：

npm run watch

Then I make the browser automatically sync the changes every time I save the page or the CSS is regenerated, using , a great utility you can install using npm install -g browser-sync:

然后，我让浏览器自动同步更改每次我保存页面或CSS的再生，使用 ，一个伟大的工具，你可以安装使用npm install -g browser-sync ：

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

This starts a server and also automatically opens the browser and points at the newly created local web server.

这将启动服务器，并自动打开浏览器并指向新创建的本地Web服务器。

Now I open VS Code and the browser side by side, and I start prototyping!

现在，我并排打开VS Code和浏览器，然后开始制作原型！

翻译自:

制作网页原型