Cách tôi tạo nguyên mẫu một Trang Web

Xem nhanh quy trình làm việc đơn giản mà tôi sử dụng để tạo mẫu một trang web

Đôi khi tôi làm việc trên các trang web đơn lẻ cho các dự án của mình.

Có lẽ tôi muốn thiết kế lại blog. Có thể đó là trang đích cho một dự án mới.

Đây là quy trình tôi sử dụng.

Tôi thích sử dụngGió cùng chiềuđể xây dựng nguyên mẫu.

Tôi đã thiết lập tất cả quy trình cho Tailwind vàPostCSSĐầu tiên:

Tạo nênpostcss.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) || [] }) ] }

Tạo nêntailwind.config.js:

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

Craete atailwind.csstập tin:

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

Tạo mộtpackage.jsontập tin:

{
  "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"
  }
}

Tạo mộtlayouts/index.htmlvà thêm HTML của bạn.

Khởi động trình bao đầu cuối, đi tới thư mục dự án và chạy:

npm run watch

Sau đó, tôi làm cho trình duyệt tự động đồng bộ hóa các thay đổi mỗi khi tôi lưu trang hoặc CSS được tạo lại bằng cách sử dụngbrowser-sync, một tiện ích tuyệt vời mà bạn có thể cài đặt bằng cách sử dụngnpm install -g browser-sync:

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

Thao tác này khởi động một máy chủ và cũng tự động mở trình duyệt và trỏ đến máy chủ web cục bộ mới được tạo.

Bây giờ tôi mở VS Code và trình duyệt cạnh nhau, và tôi bắt đầu tạo mẫu!


Các hướng dẫn phòng thí nghiệm khác: