@0xcert/vue-plugin 中文文档教程

Question

Vue.js 插件的实现。

0xcert Framework 是一个免费的开源 JavaScript 库，它提供用于构建强大的去中心化应用程序的工具。 请参阅官方文档了解更多详情。

该模块是 0xcert Framework 的组成部分之一。 它是用 TypeScript 编写的，并且得到积极维护。 源代码可在 GitHub 上找到，您还可以在其中找到我们的 问题跟踪器。

Installation

使用以下代码创建一个新文件 ./plugins/0xcert.js。

import Vue from 'vue'
import { Vue0xcert } from '@0xcert/vue-plugin'
import { MetamaskProvider } from '@0xcert/ethereum-metamask-provider'
import { Cert } from '@0xcert/cert'
import { AssetLedger } from '@0xcert/ethereum-asset-ledger'
import { ValueLedger } from '@0xcert/ethereum-value-ledger'
import { Gateway } from '@0xcert/ethereum-gateway'

Vue.use(Vue0xcert, {
  provider: new MetamaskProvider({
    actionsGatewayId: '0xf382cfa46f01d9b401d62432ad3797ee190cc97f',
  }),
  modules: [
    { name: 'Cert', object: Cert },
    { name: 'AssetLedger', object: AssetLedger },
    { name: 'ValueLedger', object: ValueLedger },
    { name: 'Gateway', object: Gateway },
  ],
})

在 nuxt.config.js 文件中注册插件。

export default {
  plugins: [
    { src: '~/plugins/0xcert', ssr: false },
  ],
}

该插件使您可以访问 0xcert Vue.js 客户端。

const client = this.$0xcert; // 0xcert client
const provider = this.$0xcert.provider; // current provider

Vue.js 和 Nuxt.js 使用 Webpack 来编译模块。 Webpack 有时会以一种奇怪的方式呈现源代码，忽略代码条件，因此您可能会遇到“缺少模块”错误。 解决方法是在 webpack 配置中设置 node.{module-name} = 'empty' 属性。 下面的示例显示了您应该如何在 Nuxt.js 中执行此操作：

export default {
  build: {
    ...
    extend (config, ctx) {
      ...
      if (ctx.isClient) { config.node = { fs: 'empty' } }
    }
  }
}