vueでrequireを使用する方法

Vue の require メソッドは、外部 JavaScript モジュールと CSS ファイルを Vue コンポーネントにインポートできます。 JavaScript モジュールのインポート: use require('module-name'); CSS ファイルのインポート: use require('./styles. css'); とすると、スタイルが現在のコンポーネントに自動的に適用されます。

Vue での require の使用法

Vue の require メソッドを使用して外部 JavaScript モジュールをインポートしますおよび CSS ファイルを Vue コンポーネントに追加します。

構文

<code class="javascript">const module = require('module-name');</code>

Import JavaScript module

require は、JavaScript モジュールをインポートするために使用できます。モジュールを現在のコンポーネントに公開します。例:

<code class="javascript">// 导入 lodash 模块
const _ = require('lodash');

// 使用 lodash
const sorted = _.sortBy(data, 'name');</code>

Import CSS file

require を使用して、CSS ファイルをインポートし、現在のコンポーネントにスタイルを適用することもできます。例:

<code class="javascript">// 导入 styles.css 文件
require('./styles.css');

// 样式将自动应用到当前组件</code>

ホット モジュール リフレッシュ

開発中、require をホット モジュール リフレッシュ (HMR) 機能と組み合わせてファイルを更新できます。 when コンポーネントが変更されたときに自動的に更新します。例:

<code class="javascript">// 启用 HMR
if (module.hot) {
  module.hot.accept('./styles.css', () => {
    // 当 styles.css 发生更改时，重新加载样式
    require('./styles.css');
  });
}</code>

Notes

• require このメソッドは、コンポーネントが初期化されるときにのみ実行されます。
• require インポートされたモジュールはコンポーネントの依存関係として使用され、コンポーネントが破棄されると自動的にリサイクルされます。
• モジュール名にファイル拡張子が含まれていない場合、require は自動的に .js および .vue 拡張子を試行します。

以上がvueでrequireを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。