制作网页原型
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 Tailwind to build prototypes.
我喜欢使用Tailwind构建原型。
I set up all the pipeline for Tailwind and PostCSS first:
我首先为Tailwind和PostCSS设置了所有管道:
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-/:]+(?<!:)/g) || []
})
]
}
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 browser-sync
, a great utility you can install using npm install -g browser-sync
:
然后,我让浏览器自动同步更改每次我保存页面或CSS的再生,使用browser-sync
,一个伟大的工具,你可以安装使用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和浏览器,然后开始制作原型!
制作网页原型