diff --git a/dll/arithmeticoperations.dll b/dll/arithmeticoperations.dll
new file mode 100644
index 0000000000000000000000000000000000000000..b34b7a93115eab5df506f70c72e5fafb9a1d3bce
Binary files /dev/null and b/dll/arithmeticoperations.dll differ
diff --git a/package.json b/package.json
index c2dd17dee8794eddd580cfb69239358638ba7697..d022072c65624aff996bb57807b04f4729fc7dfb 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
   "main": "background.js",
   "dependencies": {
     "core-js": "^3.6.5",
+    "ffi-napi": "^4.0.3",
     "vue": "^3.0.0"
   },
   "devDependencies": {
diff --git a/src/App.vue b/src/App.vue
index e3d6caa050926e6850c1dca61f77dfbba6990423..a132b3394b87a21fc587f94a680444669ed092ab 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,63 @@
 <template>
   <img alt="Vue logo" src="./assets/logo.png">
+
+  <br>
+  <input id="numA" type="text"/>
+  <input id="numB" type="text"/>
+  <button @click="sum">求和</button>
+  <input id="numC" type="text" disabled/>
+  <br>
+
   <HelloWorld msg="Welcome to Your Vue.js App"/>
 </template>
 
 <script>
 import HelloWorld from './components/HelloWorld.vue'
+const ffi = require('ffi-napi')
+const path = require('path')
+const fs = require("fs")
+
+// 获取 DLL 路径
+// eslint-disable-next-line no-undef
+let dll_path = path.join(__static, 'dll/arithmeticoperations.dll')
+
+// 修正开发环境的路径
+dll_path = dll_path.replace('\\public\\', '\\')
+
+// 修正生产环境的路径
+dll_path = dll_path.replace('\\resources\\app.asar\\', '\\')
 
 export default {
   name: 'App',
   components: {
     HelloWorld
+  },
+  methods: {
+    sum() {
+
+      fs.access(dll_path, function (err) {
+        if (err) {
+          alert('DLL 文件不存在：'+ dll_path)
+        } else {
+          console.log('DLL 文件已存在：', dll_path)
+        }
+      })
+
+      const dll = new ffi.Library(dll_path, {
+        'sum':
+            [
+              'int', ['int', 'int']
+            ]
+      })
+
+      const result = dll.sum(
+          parseInt(document.getElementById("numA").value),
+          parseInt(document.getElementById("numB").value)
+      )
+
+      document.getElementById('numC').value = result.toString()
+
+    }
   }
 }
 </script>
diff --git a/vue.config.js b/vue.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..d6b090512e66a3fbffe03da763c5aa3b3fad5db0
--- /dev/null
+++ b/vue.config.js
@@ -0,0 +1,16 @@
+module.exports = {
+  pluginOptions: {
+    electronBuilder: {
+      nodeIntegration: true,
+      externals: ['ffi-napi'],
+      builderOptions: {
+        extraResources: [
+          {
+            from: "./dll/arithmeticoperations.dll",
+            to: "../dll/arithmeticoperations.dll"
+          }
+        ]
+      }
+    }
+  }
+}