Detaillierte Erklärung der Verwendung von vue2+less-js-Tutorial-php.cn

Detaillierte Erklärung der Verwendung von vue2+less

php中世界最好的语言

Freigeben： 2018-05-08 14:27:30

Original

1451 Leute haben es durchsucht

Dieses Mal werde ich Ihnen eine detaillierte Erklärung zur Verwendung von vue2+less geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung von vue2+less?

Die Verwendung von less in vue ist also sehr einfach. Sie müssen nur less, less-loader

Schritte

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

Nach dem Login kopieren

installieren erfolgreich Dann können Sie weniger in der Vue-Komponente verwenden

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

Nach dem Login kopieren

Ergänzung:

So verwenden Sie weniger in Vue

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

elementUI basiert auf vue2

wird in vue weniger verwendet

Zunächst wurde die Vue-Entwicklungsumgebung erfolgreich installiert

Wenn alles fertig ist:

Schritt eins:

Weniger Abhängigkeiten installieren,

npm install less less-loader --save

Schritt zwei:

Ändern webpack.config .js-Datei, konfigurieren Sie den Loader zum Laden von Abhängigkeiten, sodass er externe Weniger unterstützt, fügen Sie

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

Nach dem Login kopieren

zum Originalcode hinzu. Jetzt ist die Installation im Grunde abgeschlossen und fügen Sie dann lang=" im Stil hinzu Tag, wenn Sie es verwenden. „Less“ kann verwendet werden, um weniger Code zu schreiben (fügen Sie „scoped“ zum Style-Tag hinzu, damit es nur in diesem Bereich gültig ist)

（或者
@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>
)

Nach dem Login kopieren

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben Weitere spannende Informationen finden Sie auf der chinesischen PHP-Website. Weitere verwandte Artikel!

Empfohlene Lektüre:

JS implementiert die Funktion zum Austausch linker und rechter Listen

Detaillierte Erläuterung der Schritte zur Rückkehr von der Applet-Freigabeseite zur vorherigen Seite

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung der Verwendung von vue2+less. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!