How to use require in vue

The require method in Vue can import external JavaScript modules and CSS files into the Vue component: Import JavaScript modules: use require('module-name'); Import CSS files: use require('./styles. css');, the style will be automatically applied to the current component.

Usage of require in Vue

Use Vue’s require method to import external JavaScript Modules and CSS files into Vue components.

Syntax

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

Import JavaScript module

require can be used to import JavaScript modules, and Expose the module to the current component. For example:

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

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

Import CSS file

require can also be used to import CSS files and apply styles to the current component. For example:

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

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

Hot Module Refresh

During development, require can be combined with the Hot Module Refresh (HMR) feature to update files when Automatically update components when they change. For example:

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

Notes

• require The method only runs when the component is initialized.
• require The imported module will be used as a dependency of the component and will be automatically recycled when the component is destroyed.
• If the module name does not contain a file extension, require will automatically try the .js and .vue extensions.

The above is the detailed content of How to use require in vue. For more information, please follow other related articles on the PHP Chinese website!