Verwenden Sie weniger In-Vue-Komponenten

Dieses Mal werde ich Ihnen die Verwendung von weniger in Vue-Komponenten vorstellen. Was sind die Vorsichtsmaßnahmen für die Verwendung von weniger in Vue-Komponenten?

Lassen Sie mich zunächst erklären, dass, wenn das Projekt mit dem npm init webpack Projektnamen erstellt wird, das Webpack nicht manuell konfiguriert werden muss.

Die Verwendung von less in Vue ist also sehr einfach. Sie müssen nur less installieren, less-loader reicht aus

Schritte

npm install less less-loader --save //将less和less-loader安装到开发依赖
npm run dev

Wenn die Installation erfolgreich ist, können Sie less in der Vue-Komponente verwenden

<style lang="less" scoped>
 .hello{
  a{
   color:red;
  }
 }

Ergänzung:

So verwenden Sie weniger in Vue

http://element.eleme.io/ //

elementUI basiert auf vue2

vue Using less

Zuerst wurde die Vue-Entwicklungsumgebung erfolgreich installiert

Wenn alles fertig ist:

Schritt eins:

Weniger Abhängigkeiten installieren, npm install less less-loader --save

Schritt 2:

Ändern Sie die Datei webpack.config.js, konfigurieren Sie den Loader zum Laden von Abhängigkeiten, lassen Sie ihn externe weniger unterstützen und fügen Sie

{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
},

Jetzt ist die Installation im Grunde abgeschlossen. Fügen Sie dann bei der Verwendung lang="less" in das Style-Tag ein und Sie können den Code für weniger Geld schreiben (das Hinzufügen von „scoped“ zum Style-Tag bedeutet, dass dies der Fall ist). (nur in diesem Bereich gültig)

（或者
@import './index.less'; //引入全局less文件
）。
(
html中直接引入：
<link rel="stylesheet/less" type="text/css" href="文件路径/styles.less" rel="external nofollow" >
<script src="文件路径/less.js" type="text/javascript"></script>
)

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So senden Sie eine POST-Anfrage im JSON-Format

So passen Sie den Anmeldeformularcode mit Vue.js an

Benutzerdefinierte dynamische Komponenten der UI-Komponentenbibliothek von Vue

Das obige ist der detaillierte Inhalt vonVerwenden Sie weniger In-Vue-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!