Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erklärung der Verwendung von vue2+less

Detaillierte Erklärung der Verwendung von vue2+less

php中世界最好的语言
php中世界最好的语言Original
2018-05-08 14:27:301432Durchsuche

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
installieren erfolgreich Dann können Sie weniger 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

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",
},
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>
)
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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn