diff --git a/packages/devui-vue/.eslintrc.js b/packages/devui-vue/.eslintrc.js
index 34ce586d93ea2cc2c029520c9fc5637852efdac9..89aa01109ac14bcd8211d8d63e451e9ffd9e40b0 100644
--- a/packages/devui-vue/.eslintrc.js
+++ b/packages/devui-vue/.eslintrc.js
@@ -1,33 +1,29 @@
 module.exports = {
-  parser: 'vue-eslint-parser',
+  root: true,
+  parser: '@typescript-eslint/parser',
   parserOptions: {
-    parser: '@typescript-eslint/parser',
     sourceType: 'module',
     ecmaVersion: 6,
     ecmaFeatures: {
       jsx: true,
-      tsx: true,
-    },
+      tsx: true
+    }
   },
   env: {
     browser: true,
     node: true,
     jest: true,
-    es6: true,
+    es6: true
   },
   plugins: ['@typescript-eslint'],
   extends: [
     'plugin:@typescript-eslint/recommended',
     'plugin:vue/vue3-recommended',
     'plugin:import/recommended',
-    'plugin:import/typescript',
+    'plugin:import/typescript'
   ],
   rules: {
-    quotes: [
-      'error',
-      'single',
-      { avoidEscape: true, allowTemplateLiterals: true },
-    ],
+    quotes: ['error', 'single', { avoidEscape: true, allowTemplateLiterals: true }],
     'no-undef': 2,
     'vue/max-attributes-per-line': 'off',
     'vue/no-multiple-template-root': 'off',
@@ -38,13 +34,15 @@ module.exports = {
       {
         multiline: {
           delimiter: 'none',
-          requireLast: false,
+          requireLast: false
         },
         singleline: {
           delimiter: 'semi',
-          requireLast: true,
-        },
-      },
+          requireLast: true
+        }
+      }
     ],
-  },
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': ['error']
+  }
 }
diff --git a/packages/devui-vue/.husky/commit-msg b/packages/devui-vue/.husky/commit-msg
new file mode 100755
index 0000000000000000000000000000000000000000..80e240c9dfed4f57706e2295a8a902df0d9497bd
--- /dev/null
+++ b/packages/devui-vue/.husky/commit-msg
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+cd ./packages/devui-vue && npx commitlint --edit $1
\ No newline at end of file
diff --git a/packages/devui-vue/.husky/pre-commit b/packages/devui-vue/.husky/pre-commit
new file mode 100755
index 0000000000000000000000000000000000000000..9a45e99d4eafe22d204225a1a57bf8872e3c3263
--- /dev/null
+++ b/packages/devui-vue/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+cd ./packages/devui-vue && npx  @ls-lint/ls-lint  && npx lint-staged
diff --git a/packages/devui-vue/devui/back-top/src/hooks/index.ts b/packages/devui-vue/devui/back-top/src/hooks/index.ts
index 4ae946503bc7a936f592a5b877226e2f52997154..b9fd2b4d96394453e45a1ca143eff59ac1da4ac2 100644
--- a/packages/devui-vue/devui/back-top/src/hooks/index.ts
+++ b/packages/devui-vue/devui/back-top/src/hooks/index.ts
@@ -1,7 +1,7 @@
 import usePosition from './use-position.ts'
 import useTarget from './use-target.ts'
 import useVisibility from './use-visibility.ts'
-import useEventListener from './use-eventListener.ts'
+import useEventListener from './use-event-listener.ts'
 import useThrottle from './use-throttle.ts'
 
 export { usePosition, useTarget, useVisibility, useEventListener, useThrottle }
diff --git a/packages/devui-vue/devui/back-top/src/hooks/use-eventListener.ts b/packages/devui-vue/devui/back-top/src/hooks/use-event-listener.ts
similarity index 100%
rename from packages/devui-vue/devui/back-top/src/hooks/use-eventListener.ts
rename to packages/devui-vue/devui/back-top/src/hooks/use-event-listener.ts
diff --git a/packages/devui-vue/devui/comment/src/getSlot.ts b/packages/devui-vue/devui/comment/src/get-slot.ts
similarity index 100%
rename from packages/devui-vue/devui/comment/src/getSlot.ts
rename to packages/devui-vue/devui/comment/src/get-slot.ts
diff --git a/packages/devui-vue/devui/input/__tests__/input.spec.ts b/packages/devui-vue/devui/input/__tests__/input.spec.ts
index 3256372c999522de38624df244eec58974bcf5a5..3377eac590168c32aa4ca953230d90d553c1c191 100644
--- a/packages/devui-vue/devui/input/__tests__/input.spec.ts
+++ b/packages/devui-vue/devui/input/__tests__/input.spec.ts
@@ -1,38 +1,38 @@
-import { mount } from '@vue/test-utils';
-import { ref, nextTick } from 'vue';
-import DInput from '../src/input';
+import { mount } from '@vue/test-utils'
+import { ref, nextTick } from 'vue'
+import DInput from '../src/input'
 
 describe('d-input', () => {
   it('d-input render work', async () => {
-    const value = ref('abc');
+    const value = ref('abc')
     const wrapper = mount({
       components: { DInput },
       template: `
-        <d-input v-model:value="value" />
+        <d-input v-model="value" />
       `,
-      setup () {
+      setup() {
         return {
           value
-        };
+        }
       }
-    });
-    const input = wrapper.find('input');
-    expect(input.attributes('dinput')).toBe('true');
-    expect(input.element.value).toBe('abc');
+    })
+    const input = wrapper.find('input')
+    expect(input.attributes('dinput')).toBe('true')
+    expect(input.element.value).toBe('abc')
 
-    await input.setValue('def');
-    expect(value.value).toBe('def');
+    await input.setValue('def')
+    expect(value.value).toBe('def')
 
-    value.value = 'thx';
-    await nextTick();
-    expect(input.element.value).toBe('thx');
-  });
+    value.value = 'thx'
+    await nextTick()
+    expect(input.element.value).toBe('thx')
+  })
 
   it('d-input bindEvents work', async () => {
     const onChange = jest.fn(),
       onFocus = jest.fn(),
       onBlur = jest.fn(),
-      onKeydown = jest.fn();
+      onKeydown = jest.fn()
     const wrapper = mount({
       components: { DInput },
       template: `
@@ -42,88 +42,88 @@ describe('d-input', () => {
           @blur="onBlur"
           @keydown="onKeydown" />
       `,
-      setup () {
+      setup() {
         return {
           onChange,
           onFocus,
           onBlur,
           onKeydown
-        };
+        }
       }
-    });
-    const input = wrapper.find('input');
+    })
+    const input = wrapper.find('input')
 
-    await input.trigger('change');
-    expect(onChange).toBeCalledTimes(1);
+    await input.trigger('change')
+    expect(onChange).toBeCalledTimes(1)
 
-    await input.trigger('focus');
-    expect(onFocus).toBeCalledTimes(1);
+    await input.trigger('focus')
+    expect(onFocus).toBeCalledTimes(1)
 
-    await input.trigger('blur');
-    expect(onBlur).toBeCalledTimes(1);
+    await input.trigger('blur')
+    expect(onBlur).toBeCalledTimes(1)
 
-    await input.trigger('keydown');
-    expect(onKeydown).toBeCalledTimes(1);
-  });
+    await input.trigger('keydown')
+    expect(onKeydown).toBeCalledTimes(1)
+  })
 
   it('d-input disabled work', async () => {
     const wrapper = mount(DInput, {
       props: {
         disabled: false
       }
-    });
-    const input = wrapper.find('input');
-    expect(input.attributes('disabled')).toBe(undefined);
+    })
+    const input = wrapper.find('input')
+    expect(input.attributes('disabled')).toBe(undefined)
 
     await wrapper.setProps({
       disabled: true
-    });
-    expect(input.attributes('disabled')).toBe('');
-  });
+    })
+    expect(input.attributes('disabled')).toBe('')
+  })
 
   it('d-input error work', async () => {
     const wrapper = mount(DInput, {
       props: {
         error: false
       }
-    });
-    const input = wrapper.find('input');
-    expect(input.classes()).not.toContain('error');
+    })
+    const input = wrapper.find('input')
+    expect(input.classes()).not.toContain('error')
 
     await wrapper.setProps({
       error: true
-    });
-    expect(input.classes()).toContain('error');
-  });
+    })
+    expect(input.classes()).toContain('error')
+  })
 
   it('d-input size work', async () => {
-    const wrapper = mount(DInput);
-    const input = wrapper.find('input');
-    expect(input.classes()).not.toContain('devui-input-sm');
-    expect(input.classes()).not.toContain('devui-input-lg');
+    const wrapper = mount(DInput)
+    const input = wrapper.find('input')
+    expect(input.classes()).not.toContain('devui-input-sm')
+    expect(input.classes()).not.toContain('devui-input-lg')
 
     await wrapper.setProps({
       size: 'sm'
-    });
-    expect(input.classes()).toContain('devui-input-sm');
-    expect(input.classes()).not.toContain('devui-input-lg');
+    })
+    expect(input.classes()).toContain('devui-input-sm')
+    expect(input.classes()).not.toContain('devui-input-lg')
 
     await wrapper.setProps({
       size: 'lg'
-    });
-    expect(input.classes()).not.toContain('devui-input-sm');
-    expect(input.classes()).toContain('devui-input-lg');
-  });
+    })
+    expect(input.classes()).not.toContain('devui-input-sm')
+    expect(input.classes()).toContain('devui-input-lg')
+  })
 
   it('d-input showPassword work', async () => {
-    const wrapper = mount(DInput);
-    const input = wrapper.find('input');
+    const wrapper = mount(DInput)
+    const input = wrapper.find('input')
 
-    expect(input.attributes('type')).toBe('text');
+    expect(input.attributes('type')).toBe('text')
 
     await wrapper.setProps({
       showPassword: true
-    });
-    expect(input.attributes('type')).toBe('password');
-  });
-});
+    })
+    expect(input.attributes('type')).toBe('password')
+  })
+})
diff --git a/packages/devui-vue/devui/input/src/input.tsx b/packages/devui-vue/devui/input/src/input.tsx
index 22822ede377485f02af997e2424d0e5e178ca86e..50bcfa237aec88db3b6a7cf5eaf4034a24c0408b 100644
--- a/packages/devui-vue/devui/input/src/input.tsx
+++ b/packages/devui-vue/devui/input/src/input.tsx
@@ -1,7 +1,7 @@
-import { defineComponent, computed, ref, watch, nextTick, onMounted, toRefs, inject } from 'vue';
-import { inputProps, InputType } from './use-input';
+import { defineComponent, computed, ref, watch, inject } from 'vue'
+import { inputProps, InputType } from './use-input'
 import './input.scss'
-import { dFormItemEvents, IFormItem, formItemInjectionKey } from '../../form/src/form-types';
+import { dFormItemEvents, IFormItem, formItemInjectionKey } from '../../form/src/form-types'
 
 export default defineComponent({
   name: 'DInput',
@@ -15,11 +15,11 @@ export default defineComponent({
     }
   },
   props: inputProps,
-  emits: ['update:value', 'focus', 'blur', 'change', 'keydown'],
+  emits: ['update:modelValue', 'focus', 'blur', 'change', 'keydown'],
   setup(props, ctx) {
-    const formItem = inject(formItemInjectionKey, {} as IFormItem);
-    const hasFormItem = Object.keys(formItem).length > 0;
-    const sizeCls = computed(() => `devui-input-${props.size}`);
+    const formItem = inject(formItemInjectionKey, {} as IFormItem)
+    const hasFormItem = Object.keys(formItem).length > 0
+    const sizeCls = computed(() => `devui-input-${props.size}`)
     const showPwdIcon = ref(false)
     const inputType = ref<InputType>('text')
     const inputCls = computed(() => {
@@ -30,31 +30,40 @@ export default defineComponent({
       }
     })
     const showPreviewIcon = computed(() => inputType.value === 'password')
-    watch(() => props.showPassword, flg => {
-      inputType.value = flg ? 'password' : 'text'
-    }, { immediate: true })
+    watch(
+      () => props.showPassword,
+      (flg) => {
+        inputType.value = flg ? 'password' : 'text'
+      },
+      { immediate: true }
+    )
 
-    watch(() => props.value, value => {
-      (value && value.length > 0 && showPreviewIcon.value) ? showPwdIcon.value = true : showPwdIcon.value = false
-    })
+    watch(
+      () => props.modelValue,
+      (value) => {
+        value && value.length > 0 && showPreviewIcon.value
+          ? (showPwdIcon.value = true)
+          : (showPwdIcon.value = false)
+      }
+    )
 
     const onInput = ($event: Event) => {
-      ctx.emit('update:value', ($event.target as HTMLInputElement).value);
-      hasFormItem && formItem.formItemMitt.emit(dFormItemEvents.input);
-    },
+        ctx.emit('update:modelValue', ($event.target as HTMLInputElement).value)
+        hasFormItem && formItem.formItemMitt.emit(dFormItemEvents.input)
+      },
       onFocus = () => {
-        ctx.emit('focus');
+        ctx.emit('focus')
       },
       onBlur = () => {
-        ctx.emit('blur');
-        hasFormItem && formItem.formItemMitt.emit(dFormItemEvents.blur);
+        ctx.emit('blur')
+        hasFormItem && formItem.formItemMitt.emit(dFormItemEvents.blur)
       },
       onChange = ($event: Event) => {
-        ctx.emit('change', ($event.target as HTMLInputElement).value);
-        hasFormItem && formItem.formItemMitt.emit(dFormItemEvents.change);
+        ctx.emit('change', ($event.target as HTMLInputElement).value)
+        hasFormItem && formItem.formItemMitt.emit(dFormItemEvents.change)
       },
       onKeydown = ($event: KeyboardEvent) => {
-        ctx.emit('keydown', $event);
+        ctx.emit('keydown', $event)
       },
       onChangeInputType = () => {
         inputType.value = inputType.value === 'password' ? 'text' : 'password'
@@ -70,11 +79,11 @@ export default defineComponent({
       onChange,
       onKeydown,
       onChangeInputType
-    };
+    }
   },
-  render () {
+  render() {
     const {
-      value,
+      modelValue,
       showPreviewIcon,
       showPwdIcon,
       inputCls,
@@ -88,14 +97,14 @@ export default defineComponent({
       onBlur,
       onChange,
       onKeydown,
-      onChangeInputType,
-    } = this;
+      onChangeInputType
+    } = this
     return (
-      <div class="devui-input__wrap">
+      <div class='devui-input__wrap'>
         <input
           v-focus={autoFocus}
-          {...{dinput: true}}
-          value={value}
+          {...{ dinput: true }}
+          value={modelValue}
           disabled={disabled}
           type={inputType}
           maxlength={maxLength}
@@ -105,16 +114,18 @@ export default defineComponent({
           onFocus={onFocus}
           onBlur={onBlur}
           onChange={onChange}
-          onKeydown={onKeydown} 
+          onKeydown={onKeydown}
         />
-        {
-          showPwdIcon && <div class="devui-input__preview" onClick={onChangeInputType}>
-          { showPreviewIcon
-            ? <d-icon name="preview" size="12px" key={1}/>
-            : <d-icon name="preview-forbidden" size="12px" key={2} />
-          }
-        </div>}
+        {showPwdIcon && (
+          <div class='devui-input__preview' onClick={onChangeInputType}>
+            {showPreviewIcon ? (
+              <d-icon name='preview' size='12px' key={1} />
+            ) : (
+              <d-icon name='preview-forbidden' size='12px' key={2} />
+            )}
+          </div>
+        )}
       </div>
-    );
+    )
   }
-});
+})
diff --git a/packages/devui-vue/devui/input/src/use-input.tsx b/packages/devui-vue/devui/input/src/use-input.tsx
index 5706ad2774fdfe141ad03ea954b0897d7d274e41..8a46ec40a21664206267f7e4d888667c92dfc395 100644
--- a/packages/devui-vue/devui/input/src/use-input.tsx
+++ b/packages/devui-vue/devui/input/src/use-input.tsx
@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { PropType } from 'vue'
 
 export const inputProps = {
   placeholder: {
@@ -33,31 +33,31 @@ export const inputProps = {
     type: Boolean,
     default: false
   },
-  value: {
+  modelValue: {
     type: String,
     default: ''
   },
-  'onUpdate:value': {
+  'update:modelValue': {
     type: Function as PropType<(v: string) => void>,
     default: undefined
   },
-  'onChange': {
+  onChange: {
     type: Function as PropType<(v: string) => void>,
     default: undefined
   },
-  'onKeydown': {
+  onKeydown: {
     type: Function as PropType<(v: KeyboardEvent) => void>,
     default: undefined
   },
-  'onFocus': {
+  onFocus: {
     type: Function as PropType<() => void>,
     default: undefined
   },
-  'onBlur': {
+  onBlur: {
     type: Function as PropType<() => void>,
     default: undefined
   }
-} as const;
+} as const
 
 export type PreviewIconType = 'preview' | 'icon-preview-forbidden'
 export type InputType = 'password' | 'text'
diff --git a/packages/devui-vue/docs/components/input/index.md b/packages/devui-vue/docs/components/input/index.md
index f6fb8aa0e948882984737773436c8e98afbfbc8b..2bb8159532ba9acac5d9f977e66e2d69ce7bb785 100644
--- a/packages/devui-vue/docs/components/input/index.md
+++ b/packages/devui-vue/docs/components/input/index.md
@@ -14,20 +14,20 @@
 <template>
   <h4 style="margin: 10px 0">Default</h4>
 
-  <d-input placeholder="Please Enter" autoFocus id="textInput"  class="dinput"></d-input>
+  <d-input placeholder="Please Enter" autoFocus id="textInput" class="dinput"></d-input>
 
   <h4 style="margin: 10px 0">Disabled</h4>
 
-  <d-input placeholder="Please Enter" :disabled="true"  class="dinput"></d-input>
+  <d-input placeholder="Please Enter" :disabled="true" class="dinput"></d-input>
 
   <h4 style="margin: 10px 0">Error</h4>
 
-  <d-input placeholder="Please Enter" :error="true"  class="dinput"></d-input>
+  <d-input placeholder="Please Enter" :error="true" class="dinput"></d-input>
 </template>
 <style>
-  .dinput {
-    width: 200px;
-  }
+.dinput {
+  width: 200px;
+}
 </style>
 ```
 
@@ -39,30 +39,29 @@
 
 ```vue
 <template>
-    <h4 style="margin: 10px 0">Small</h4>
+  <h4 style="margin: 10px 0">Small</h4>
 
-    <d-input size="sm" class="dinput" placeholder="Please Enter" ></d-input>
+  <d-input size="sm" class="dinput" placeholder="Please Enter"></d-input>
 
-    <h4 style="margin: 10px 0">Middle</h4>
+  <h4 style="margin: 10px 0">Middle</h4>
 
-    <d-input class="dinput" placeholder="Please Enter"></d-input>
+  <d-input class="dinput" placeholder="Please Enter"></d-input>
 
-    <h4 style="margin: 10px 0">Large</h4>
+  <h4 style="margin: 10px 0">Large</h4>
 
-    <d-input size="lg"  placeholder="Please Enter" class="dinput"></d-input>
+  <d-input size="lg" placeholder="Please Enter" class="dinput"></d-input>
 </template>
 ```
 
 :::
 
-
 ### 密码框
 
 :::demo
 
 ```vue
 <template>
-  <d-input v-model:value="searchText" class="dinput" placeholder="Please Enter" showPassword></d-input>
+  <d-input v-model="searchText" class="dinput" placeholder="Please Enter" showPassword></d-input>
 </template>
 <script>
 import { defineComponent, ref } from 'vue'
@@ -73,7 +72,7 @@ export default defineComponent({
     return {
       searchText
     }
-  },
+  }
 })
 </script>
 ```
@@ -82,15 +81,15 @@ export default defineComponent({
 
 ### API
 
-|    参数     |   类型   |   默认    | 说明                     | 跳转 Demo                         |
-| :---------: | :------: | :-------: | :-----------------------: | :---------------------------------: |
-|    id     | `string` |    --     | 可选，文本框 id             | [基本用法](#基本用法)  |
-|    placeholder     | `string` |  --   | 可选，文本框 placeholder     | [基本用法](#基本用法) |
-|    maxLength     | `number` |  Number.MAX_SAFE_INTEGER   | 可选，输入框的 max-length    |   |
-|    disabled    | `boolean` | false | 可选，文本框是否被禁用           | [基本用法](#基本用法)  |
-| error | `boolean` |  false   | 可选，文本框是否出现输入错误 | [基本用法](#基本用法) |
-| size | `'sm'\|''\|'lg'` |  ''   | 可选，文本框尺寸，有三种选择`'lg'`,`''`,`'sm'` | [尺寸](#尺寸) |
-| cssClass | `string` |  ''  | 可选，支持传入类名到输入框上 |  |
-| showPassword | `boolean` |  false  | 可选，密码输入框 |  [密码框](#密码框)  |
-|  autoFocus   | `boolean` | false | 可选，输入框是否自动对焦 | [基本用法](#基本用法)  |
-
+|         参数          |        类型        |          默认           |                      说明                      |       跳转 Demo       |
+| :-------------------: | :----------------: | :---------------------: | :--------------------------------------------: | :-------------------: |
+|          id           |      `string`      |           --            |                可选，文本框 id                 | [基本用法](#基本用法) |
+| modelValue \/ v-model | `string \| number` |           ''            |                     绑定值                     |   [密码框](#密码框)   |
+|      placeholder      |      `string`      |           --            |            可选，文本框 placeholder            | [基本用法](#基本用法) |
+|       maxLength       |      `number`      | Number.MAX_SAFE_INTEGER |           可选，输入框的 max-length            |                       |
+|       disabled        |     `boolean`      |          false          |             可选，文本框是否被禁用             | [基本用法](#基本用法) |
+|         error         |     `boolean`      |          false          |          可选，文本框是否出现输入错误          | [基本用法](#基本用法) |
+|         size          |  `'sm'\|''\|'lg'`  |           ''            | 可选，文本框尺寸，有三种选择`'lg'`,`''`,`'sm'` |     [尺寸](#尺寸)     |
+|       cssClass        |      `string`      |           ''            |          可选，支持传入类名到输入框上          |                       |
+|     showPassword      |     `boolean`      |          false          |                可选，密码输入框                |   [密码框](#密码框)   |
+|       autoFocus       |     `boolean`      |          false          |            可选，输入框是否自动对焦            | [基本用法](#基本用法) |
diff --git a/packages/devui-vue/package.json b/packages/devui-vue/package.json
index 6d4a59536ebad5eedf8d96ef5840e6f9189e5ce3..4a44e5b59a6733bec134a2417f104b9627ec75cf 100644
--- a/packages/devui-vue/package.json
+++ b/packages/devui-vue/package.json
@@ -40,7 +40,8 @@
     "clean:cli": "npm uninstall -g devui-cli & npm uninstall -g vue-devui",
     "cli:create": "node ./devui-cli/index.js create -t component",
     "predev": "node ./devui-cli/index.js create -t vue-devui --ignore-parse-error",
-    "prebuild": "node ./devui-cli/index.js create -t vue-devui --ignore-parse-error"
+    "prebuild": "node ./devui-cli/index.js create -t vue-devui --ignore-parse-error",
+    "prepare": "cd ../.. && husky install packages/devui-vue/.husky"
   },
   "dependencies": {
     "@devui-design/icons": "^1.3.0",
@@ -79,7 +80,7 @@
     "eslint": "^7.28.0",
     "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-vue": "^7.11.1",
-    "husky": "^4.3.7",
+    "husky": "^7.0.4",
     "inquirer": "^8.1.2",
     "jest": "^27.0.4",
     "lint-staged": "^11.0.0",
@@ -100,12 +101,6 @@
     "vue-tsc": "^0.2.2",
     "yarn": "^1.22.11"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "ls-lint && lint-staged",
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
-    }
-  },
   "lint-staged": {
     "{src,devui}/**/*.{js,ts,jsx,tsx,vue}": "eslint --fix",
     "{src,devui}/**/*.{scss,css}": "stylelint --fix"