كيف أقوم بعمل نموذج أولي لصفحة ويب

نظرة سريعة على سير عمل بسيط أستخدمه لإنشاء نموذج أولي لصفحة ويب

أحيانًا أعمل على صفحات ويب واحدة لمشاريعي.

ربما أريد إعادة تصميم المدونة. ربما تكون صفحة مقصودة لمشروع جديد.

هذه هي العملية التي أستخدمها.

أنا أحب استخدامالريح الخلفيةلبناء نماذج أولية.

لقد قمت بإعداد كل خطوط الأنابيب لـ 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: [],
}

كريت أ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.

ابدأ تشغيل Terminal ، وانتقل إلى مجلد المشروع وقم بتشغيل:

npm run watch

ثم أجعل المتصفح يقوم بمزامنة التغييرات تلقائيًا في كل مرة أحفظ فيها الصفحة أو يتم إعادة إنشاء CSS باستخدامbrowser-sync، أداة رائعة يمكنك تثبيتها باستخدامnpm install -g browser-sync:

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

يؤدي هذا إلى تشغيل خادم ويفتح المتصفح تلقائيًا ويشير إلى خادم الويب المحلي الذي تم إنشاؤه حديثًا.

الآن أفتح VS Code والمتصفح جنبًا إلى جنب ، وأبدأ في إنشاء النماذج الأولية!


المزيد من الدروس المعملية: