Wie integriere ich das CSS-Framework in Vue? Methodeneinführung

In der folgenden Spalte „Vue.js-Tutorial“ erfahren Sie, wie Sie das CSS-Framework in Vue.js integrieren. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Es gibt viele Gründe, warum CSS-Frameworks großartig sind: Beispielsweise ist der Code einfacher zu verstehen, Webanwendungen einfacher zu warten und die Schritte bei der Implementierung von Prototypen werden vereinfacht. Im Allgemeinen ist die Methode zur Integration von CSS-Frameworks in VUE dieselbe. In diesem Artikel wird das weit verbreitete Bootstrap 4 als Beispiel verwendet.

VorbereitungBevor Sie das CSS-Framework herunterladen, erstellen Sie ein neues Projekt mit Vue CLI:

npm install vue-cli
vue init webpack project-name

Installieren und integrieren Sie Bootstrap 4Nach dem Erstellen und Initialisieren des neuen Vue-Projekts verwenden Sie npm Laden Sie Bootstrap 4 herunter. Da das JavaScript von Bootstrap 4 von jQuery abhängt, muss auch jQuery installiert werden.

npm install bootstrap jquery --save

Sie müssen die Bootstrap-Abhängigkeit in der main.js-Datei Ihres Vue hinzufügen, damit sie global im gesamten Programm verwendet werden kann. npm 下载 Bootstrap 4。由于 Bootstrap 4 的 JavaScript 依赖于 jQuery，所以还需要安装 jQuery。

import './../node_modules/jquery/dist/jquery.min.js';
import './../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './../node_modules/bootstrap/dist/js/bootstrap.min.js';

你需要在自己的 Vue 的 main.js 文件中添加 Bootstrap 依赖项，这样就可以在整个程序中全局使用。

npm install --save popper.js

如果你的程序构建失败，应该安装 popper.js 依赖项。之后应该就不会报错了。

npm install bulma

这样 Bootstrap 4 就被集成到 Vue 重了。

安装并集成 Bulma

Bulma 一个是基于 Flexbox 的轻巧灵活的 CSS 框架。它在 GitHub 上的 star 已有超过了 25K。

与 Bootstrap 不同，Bulma 重仅包含 CSS，没有 jQuery 或 JavaScript 的依赖项。

安装 Bulma：

/* main.js */
import './../node_modules/bulma/css/bulma.css';

在下载Bulma之后，打开你的 main.js 并将其导入。

$ npm install foundation-sites --save

这样就把 Bulma 集成到你的 Vue.js 程序中了。

安装并集成 Foundation

Foundation 是一个优秀的 CSS 框架。它有两个框架：一个用于电子邮件，一个用于网站。我们需要的是 Foundation Sites 框架，因为我们只关心在 Web 中使用 Foundation。

安装 Foundation Sites 并将其导入到你的 main.js 文件中：

/* main.js */
import './../node_modules/foundation-sites/dist/css/foundation.min.css';
import './../node_modules/foundation-sites/dist/js/foundation.min.js';

将其导入到你的 main.js 文件中：

<!-- Bootstrap -->
<button class="btn btn-primary btn-lg">Bootstrap 大按钮</button>

<!-- Bulma -->
<button class="button is-primary is-large">Bulma 大按钮</button>

在 Vue中 的最佳做法

以上这三个框架非常类似：它们都基于行和列来创建“网格”的，你可以用它来创建用户界面。通过网格，你只需添加或更改附加到元素的类，就能轻松地基于设备宽度更改列的宽度。

注意： 下面的例子用的是 Bootstrap4。但是这种基于行列框架的做法适用于所有的 CSS 框架。

最好尽可能使用框架的类。为了易于使用，这些框架中都经过精心的设计，可以进行扩展和自定义。与其使用自己的类创建自己的按钮，不如用 Bootstrap、Bulma 或 Foundation 来做同样的事。

/* App.vue */
import '@/assets/styles.css';
...

你可以配置每种颜色，以便 btn-primary (Bootstrap) 或 is-primary (Bulma) 引用你自己样式的颜色，而不是用 Bootstrap 和 Bulma 附带的默认颜色。

如果你需要使用自己的样式来创建自己的主题，可以创建一个覆盖框架全局样式的全局样式表；因为我们并不想直接修改框架。

创建自己的样式

如果想要创建自己的 CSS 主题，需要先创建一个新的 CSS 文件，并将其放在 assets 目录中，然后将其导入到  App.vue

/* styles.css */
/* Buttons
--------------------------- */
.btn-primary   { background: #00462e; color: #fff; } /* dark green */
.btn-secondary { background: #a1b11a; color: #fff; } /* light green */
.btn-tertiary  { background: #00b2e2; color: #fff; } /* blue */
.btn-cta       { background: #f7931d; color: #fff; } /* orange */

/* Forms
--------------------------- */
.form-control {
  border-radius: 2px;
  border: 1px solid #ccc;
}

.form-control:focus,
.form-control:active {
  outline: none;
  box-shadow: none;
  background: #ccc;
  border: 1px solid #000;
}

Wenn Ihre Anwendung nicht erstellt werden kann, sollten Sie die Abhängigkeit popper.js installieren. Danach sollten keine Fehler mehr auftreten.

<!--Navigation.vue-->
<template>
  <p class="row">
    <p class="col">
      <nav>
        <ul>
          <li><a href="#">Navigation Item #1</a></li>
          <li><a href="#">Navigation Item #2</a></li>
          <li><a href="#">Navigation Item #3</a></li>
        </ul>
      </nav>
    </p>
  </p>
</template/>

Auf diese Weise wird Bootstrap 4 in Vue integriert.

Bulma installieren und integrieren

Bulma ist ein leichtes und flexibles CSS-Framework, das auf Flexbox basiert. Es hat mehr als 25.000 Sterne auf GitHub.

Im Gegensatz zu Bootstrap enthält Bulma nur CSS und hat keine Abhängigkeiten von jQuery oder JavaScript.

Bulma installieren:

<!--App.vue-->
<template>
  <p>
    ...
    <Navigation/>
  </p>
</template/>

Öffnen Sie nach dem Herunterladen von Bulma Ihre main.js und importieren Sie sie.

<!--Navigation.vue-->
<template>
  <nav>
    <ul>
      <li><a href="#">Navigation Item #1</a></li>
      <li><a href="#">Navigation Item #2</a></li>
      <li><a href="#">Navigation Item #3</a></li>
    </ul>
  </nav>
</template/>

Auf diese Weise wird Bulma in Ihr Vue.js-Programm integriert.

Foundation installieren und integrieren

Foundation ist ein hervorragendes CSS-Framework. Es verfügt über zwei Frames: einen für E-Mails und einen für die Website. Was wir brauchen, ist das

Foundation Sites

-Framework, da es uns nur um die Verwendung von Foundation im Web geht.

Installieren Sie Foundation Sites und importieren Sie es in Ihre main.js-Datei: 🎜

<!--App.vue-->
<template>
  ...
  <p class="row">
    <p class="col">
      <Navigation/>
    </p>
  </p>
</template/>

🎜Importieren Sie es in Ihre main.js-Datei: 🎜rrreee🎜 🎜🎜Best Practices in Vue 🎜🎜🎜🎜Die oben genannten drei Frameworks sind sehr ähnlich: Sie alle erstellen ein „Raster“ basierend auf Zeilen und Spalten, mit dem Sie Benutzeroberflächen erstellen können. Raster erleichtern das Ändern der Breite einer Spalte basierend auf der Gerätebreite, indem einfach die dem Element zugeordnete Klasse hinzugefügt oder geändert wird. 🎜🎜🎜Hinweis: 🎜 Das folgende Beispiel verwendet Bootstrap4. Dieser auf Zeilen- und Spalten-Frameworks basierende Ansatz gilt jedoch für alle CSS-Frameworks. 🎜🎜Es ist am besten, wann immer möglich Framework-Klassen zu verwenden. Zur Benutzerfreundlichkeit sind diese Frameworks sorgfältig darauf ausgelegt, erweiterbar und anpassbar zu sein. Anstatt Ihren eigenen Button mit Ihrer eigenen Klasse zu erstellen, können Sie Bootstrap, Bulma oder Foundation verwenden, um dasselbe zu tun. 🎜rrreee🎜Sie können jede Farbe so konfigurieren, dass sich btn-primary (Bootstrap) oder is-primary (Bulma) auf die Farbe Ihres eigenen Stils bezieht, anstatt Bootstrap zu verwenden Standardfarben werden mit Bulma geliefert. 🎜🎜Wenn Sie Ihre eigenen Stile verwenden müssen, um Ihr eigenes Thema zu erstellen, können Sie ein globales Stylesheet erstellen, das die globalen Stile des Frameworks überschreibt, da wir das Framework nicht direkt ändern möchten. 🎜🎜🎜🎜Erstellen Sie Ihre eigenen Stile🎜🎜🎜🎜Wenn Sie Ihr eigenes CSS-Theme erstellen möchten, müssen Sie zuerst eine neue CSS-Datei erstellen, diese im Verzeichnis assets ablegen und sie dann importieren Gehen Sie zur Datei App.vue. 🎜rrreee🎜Versuchen Sie, Bootstrap-Komponenten einige Standardstile zuzuordnen, die Ihren eigenen entsprechen: 🎜rrreee🎜🎜🎜Achten Sie auf die Wiederverwendbarkeit von Komponenten🎜🎜🎜🎜Bei der Verwendung von CSS-Frameworks in Vue.js ist die Wiederverwendbarkeit von Komponenten zu beachten. Wir können Layout-CSS nicht mit der Komponente selbst mischen. Manchmal müssen Sie diese Komponente möglicherweise einfach wiederverwenden, manchmal benötigen Sie möglicherweise ein anderes Layout. 🎜🎜🎜Schlechtes Beispiel🎜🎜rrreeerrreee🎜Diese Komponente kann sowohl in der Kopf- als auch in der Fußzeile verwendet werden. Sie sollten unterschiedlich aussehen, aber die gleichen Informationen enthalten. Löschen wir den Layout-HTML und verschieben ihn in die übergeordnete oder Basiskomponente. 🎜🎜🎜Gutes Beispiel🎜🎜rrreeerrreee🎜🎜🎜Zusammenfassung🎜🎜🎜🎜Das CSS-Framework erleichtert unsere Entwicklungsarbeit. Sie sorgen dafür, dass Ihr Vorlagencode konsistent und einfach zu warten und zu schreiben ist. Sie können sich auf die Funktionalität und das Gesamtdesign des Programms konzentrieren, anstatt Zeit mit alltäglichen Aufgaben zu verschwenden, wie zum Beispiel dem Erstellen von Schaltflächen von Grund auf. 🎜🎜Bootstrap, Bulma und Foundation sind nur drei häufig verwendete Frameworks, aber sie sind nicht auf diese beschränkt. Es gibt auch viele Frameworks, die Sie erkunden können, wie zum Beispiel Semantic UI und UI Kit. 🎜

Englische Originaladresse: https://www.digitalocean.com/community/tutorials/vuejs-css-frameworks-vuejs

Autor: Dave Berning

Verwandte Empfehlungen:

2020 Front-End-Vue-Interview Fragen Große Zusammenfassung (mit Antworten)

vue-Tutorial-Empfehlung: Die neuesten 5 vue.js-Video-Tutorial-Auswahlen im Jahr 2020

Weitere programmierbezogene Kenntnisse finden Sie unter: Programmierkurse! !

Das obige ist der detaillierte Inhalt vonWie integriere ich das CSS-Framework in Vue? Methodeneinführung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!