Ein elf Starter mit Rückenwind -CSS und alpine.js

Dieser Artikel beschreibt einen optimierten Ansatz zum Aufbau einer persönlichen Website mit ELEITY, Tailwind CSS und Alpine.js, wobei die Einfachheit und das minimale Design betont werden. Anstatt vorhandene, potenziell komplexe Vorspeisen zu verwenden, führt dieser Leitfaden Sie durch ein unkompliziertes Setup.

Voraussetzungen: Vertrautheit mit Tailwind CSS, HTML, JavaScript, Nunjucks Templating Engine, der Befehlszeile und NPM wird angenommen.

Schritt 1: Projekteinrichtung

Erstellen Sie ein neues Projektverzeichnis, navigieren Sie in Ihrem Terminal dazu und initialisieren Sie eine package.json -Datei:

 npm init -y

Installieren Sie CSS und Rückenwind -CSS:

 npm install -d @11ty/ELEGY Tailwindcss @neuest

Schritt 2: Erstellen einer Testseite

Erstellen index.njk (die homepage) und _includes/default.njk (die Basisvorlage). index.njk erweitert default.njk :

 
{ % erweitert sich "_includes/default.njk" %}

{ % Blocktitel %} Es funktioniert { % EndBlock %}

{ % Block Content %}
  <div>
    <div>
      Gutes Design<br><br>
      Ist<br><br>
      als wenig Design<br><br>
      wie möglich
    </div>
  </div>
{ % EndBlock %}

 



  <title>{ % Blocktitel %} funktioniert es? { % EndBlock %}</title>
  <meta charset="UTF-8">
  { % if Beschreibung %}
    <meta content="{{Beschreibung}}" name="description">
  { % endif %}
  <meta content="ie=edge" http-equiv="x-ua-compatible">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" name="viewport">
  <link href="/style.css?v=%7B%%20version%20%%7D" rel="stylesheet">
  { % Block Head %} { % EndBlock %}


  { % Block Content %}
    {{Inhalt | sicher }}
  { % EndBlock %}

Schritt 3: Rückenwind -CSS -Konfiguration

Erstellen Sie styles/tailwind.config.js und styles/tailwind.css :

 // Styles/Tailwind.config.js
module.exports = {
  Inhalt: ['_sit/**/*. html'],
  Safelist: [],
  Thema: {
    verlängern: {
      Farben: {
        Änderung: 'transparent',
      },
    },
  },
  Plugins: [],
}

 // Styles/Tailwind.css
@TailWind Base;
@TailWind -Komponenten;
@TailWind Utilities;

@Layer Utilities {
  .ändern {
    Farbe: transparent;
  }
}

Schritt 4: Projektkonfiguration und Build

Erstellen Sie .gitignore , um unnötige Dateien auszuschließen:

 <code>_site/ .DS_Store node_modules/</code>

Erstellen .eleventy.js

 const htmlmin = fordern ('html-minifier');
const nun = String (Datum.Now ());

module.exports = function (ELEDENTYCONfig) {
  ELEFENTYCONFIG.ADDWATCHTARGET ('./ Styles/Tailwind.config.js');
  ELEFENTYCONFIG.ADDWATCHTARGET ('./ Styles/Tailwind.css');
  ELEFENTYCONFIG.ADDPASSThroughCopy ({'./_tmp/style.css': './style.css'});
  ELEFENYCONFIG.ADDSHORTCODE ('Version', function () {return jetzt;});

  ELEFENTYCONFIG.ADDTRANSFORM ('HTMLMIN', Funktion (Inhalt, Ausgangspath) {
    if (process.env.eleventy_production && outputPath && outputPath.endswith ('. html')) {
      return htmlmin.minify (content, {uSeShortDocType: true, removecommments: true, collapsewhitespace: true});
    }
    Inhalt zurückgeben;
  });
};

Update package.json mit Build -Skripten:

 {
  "Skripte": {{
    "Start": "ELEGY -SERVE & NPX Tailwindcss -i Styles/Tailwind.css -c Styles/Tailwind.config.js -o _Site/style.css - -watch",
    "Build": "ELEDY_PRODUKTION = TRUE ELEVENTY && NODE_ENV = Produktion NPX Tailwindcss -i Styles/Tailwind
  },
  "devDependencies": {{
    "@11ty/ely": "^1.0.0",
    "Tailwindcss": "^3.0.0",
    "html-minifier": "^4.0.0"
  }
}

Führen Sie npm install aus und dann npm start um den Entwicklungsserver zu starten. Testen Sie die Reaktivität von Tailwind durch Modifizierung tailwind.config.js und tailwind.css . Führen Sie npm run build für einen Produktionsbau aus.

Schritt 5: Integration von Alpine.js

Installieren Sie Alpine.js:

 npm install -d alpinejs installieren

Update .eleventy.js

 // ... (vorher .Eleventy.js Inhalt) ...
ELEFENTYCONFIG.ADDPASSThroughCopy ({'./node_modules/alpinejs/dist/cdn.js': './js/alpine.js'});
// ... (Rest von .Eleventy.js Inhalt) ...

Fügen Sie _includes/default.njk vor dem Schließen alpine.js hinzu

Das obige ist der detaillierte Inhalt vonEin elf Starter mit Rückenwind -CSS und alpine.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!