Skip to content

插件本体编写

js
// plugins/i18n.js
export default {
  install: (app, options) => {
    // 在这里编写插件代码
  }
}

导出为默认对象,可以在其他地方以 import 的方式导入。

默认导出 defalut export

js
export default myFunction;

import myFunction from './myModule.js'; myFunction(); // 输出: Hello, World!

允许一个模块导出一个单一的值,导入时可以给它任何名称。

命名导出 Named Exports

js
export const myVariable = 42;//导出1

export const myFunction = () => {//导出2
  console.log("Hello from myFunction!");
};
---
import { myVariable, myFunction } from './myModule.js';//不许给其他名字,或者用as重命名,说白了就是得明确导入目标
import { myFunction as greetFunction } from './myModule.js';
console.log(myVariable); // 输出: 42
myFunction(); // 输出: Hello from myFunction!

组合导出 Combining Named and Default Exports

即一个模块同时包含默认导出和命名导出。

  • 默认导出适用于一个模块只需导出一个主要值的情况。
  • 命名导出适用于需要导出多个相关值的情况。 预期实现一个全局方法 $translate,用于文本翻译。
js
// plugins/i18n.js
export default {
  install: (app, options) => {//install两个参数,第二个可选
    // 注入一个全局可用的 $translate() 方法
    app.config.globalProperties.$translate = (key) => {
      // 获取 `options` 对象的深层属性
      // 使用 `key` 作为索引
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, options)
    }
  }
}
  1. app 参数 Vue 应用的实例,允许插件访问应用的全局配置和功能。通过这个参数,可以向 Vue 实例添加全局组件、指令、属性等。
  2. options 参数(可选) 这是一个可选的参数,可以在调用 app.use (plugin, options) 时传入。它用于传递插件的配置选项,以便在插件内部进行自定义行为。