Vue コンポーネントの使用を減らす

今回は、vue コンポーネントでのlessの使用について、実際のケースを見てみましょう。

まず最初に、プロジェクトが npm init webpack プロジェクト名メソ​​ッドを使用して作成されている場合、webpack を手動で設定する必要はありませんnpm init webpack 项目名 的方式创建的项目,无需手动配置webpack

所以再vue中使用less就非常简单了，只需要安装less, less-loader就行了

步骤

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

如果安装成功那么就可以再vue组件中使用less了

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

补充：

vue中 如何使用less

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

elementUI是基于vue2

vue中使用less

首先vue开发环境已经安装成功

当所有东西都 准备好之后 ：

第一步：

安装less依赖，npm install less less-loader --save

そのため、Vue での less の使用は非常に簡単です。インストールする必要があるのは、less-loader だけです

手順

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

インストールが成功したら、vue コンポーネントで less を使用できます

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

追加:

vue での使用を減らす方法

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

elementUI は vue2 に基づいています

vue での使用を減らす

まず第一に、 vue 開発環境は正常にインストールされました

すべての準備ができたら:

ステップ 1:

依存関係を減らしてインストールします。npm install less less-loader --save🎜🎜ステップ 2: 🎜 🎜webpack.config.jsファイルを変更し、外部lessをサポートするようにローダーの読み込みを設定します。これで、基本的にインストールが完了しました。そして、使用するときに、lang="less"を追加します。 style タグを使用すると、より少ないコストでコードを作成できます (style タグにスコープを追加すると、このスコープでのみ有効であることを意味します)🎜rrreee🎜 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、こちらをご覧ください。 PHP 中国語 Web サイトの他の関連記事にも注目してください。 🎜🎜推奨読書: 🎜🎜🎜JSON形式を使用してPOSTリクエストを送信する方法🎜🎜🎜🎜Vue.js ログインフォームコードをカスタマイズする方法🎜🎜🎜🎜VueのUIコンポーネントライブラリを使用して動的コンポーネントをカスタマイズする方法🎜🎜

以上がVue コンポーネントの使用を減らすの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。