## 效果展示

![](http://img.blog.itpub.net/blog/2023/05/08/b1c8397b1ff671c9.png?x-oss-process=style/bb)

## 專案目錄

![](http://img.blog.itpub.net/blog/2023/05/08/cfc73ae957e39774.png?x-oss-process=style/bb)

- **index.html**

專案根目錄index.html檔案，頭部引用KgCaptcha的js。

```html

<div id="app"></div>

```

- **main.js**

src/main.js檔案中，配置路由。

```javascript
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
// 配置全域性路由、元件
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})
```

- **App.vue**

src/App.vue檔案中，定義html。

```javascript
<template>
    <div id="app">
        
        <form id="form">
            token: <input name="token" id="token"> 
            
            <div id="captchaBox"></div>
            
            <button type="submit">提交</button>
        </form>
        
    </div>
</template>

基於Node.js實現行為驗證碼

相關文章