diff --git a/packages/devui-vue/devui/button/src/button.tsx b/packages/devui-vue/devui/button/src/button.tsx
index 0130fd820a7151583ec583d97548412f3b6b0a62..58c72eadb2019c65925799cdc1cb4eaca5b0d19d 100644
--- a/packages/devui-vue/devui/button/src/button.tsx
+++ b/packages/devui-vue/devui/button/src/button.tsx
@@ -3,7 +3,6 @@ import { Icon } from '../../icon';
 import { buttonProps } from './button-types';
 
 import './button.scss';
-
 export default defineComponent({
   name: 'DButton',
   props: buttonProps,
diff --git a/packages/devui-vue/devui/comment/__tests__/comment.spec.ts b/packages/devui-vue/devui/comment/__tests__/comment.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1d2277d449ba5537ec95a5f8ba33f9137c3cfb9a
--- /dev/null
+++ b/packages/devui-vue/devui/comment/__tests__/comment.spec.ts
@@ -0,0 +1,8 @@
+import { mount } from '@vue/test-utils';
+import { Comment } from '../index';
+
+describe('comment test', () => {
+  it('comment init render', async () => {
+    // todo
+  })
+})
diff --git a/packages/devui-vue/devui/comment/index.ts b/packages/devui-vue/devui/comment/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a7d191829c13b2d848ec3b45d907fda964834447
--- /dev/null
+++ b/packages/devui-vue/devui/comment/index.ts
@@ -0,0 +1,17 @@
+import type { App } from 'vue'
+import Comment from './src/comment'
+
+Comment.install = function(app: App): void {
+  app.component(Comment.name, Comment)
+}
+
+export { Comment }
+
+export default {
+  title: 'Comment 评论',
+  category: '数据展示',
+  status: '50%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释
+  install(app: App): void {
+        app.use(Comment as any)
+  }
+}
diff --git a/packages/devui-vue/devui/comment/src/comment-types.ts b/packages/devui-vue/devui/comment/src/comment-types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..520f1e16141bf930ba9679bdea95842434f68fba
--- /dev/null
+++ b/packages/devui-vue/devui/comment/src/comment-types.ts
@@ -0,0 +1,24 @@
+import type { PropType, ExtractPropTypes } from 'vue'
+
+export const commentProps = {
+  actions: {
+
+  }, 
+  author: {
+
+  },
+  avatar: {},
+
+  content: {
+
+  } ,
+  prefixCls: {
+
+  },
+  datetime: {
+    
+  }
+
+} as const
+
+export type CommentProps = ExtractPropTypes<typeof commentProps>
diff --git a/packages/devui-vue/devui/comment/src/comment.scss b/packages/devui-vue/devui/comment/src/comment.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3c7cebc50161ba3f14f54cf8cdbb19ca35406166
--- /dev/null
+++ b/packages/devui-vue/devui/comment/src/comment.scss
@@ -0,0 +1,31 @@
+@import '../../style/theme/color';
+@import '../../styles-var/devui-var.scss';
+.devui-comment {
+  display: flex;
+  align-items: flex-start;
+  &-avatar{
+    margin: 0 16px 0 0;
+  }
+  &-right{
+    
+  }
+  &-head{
+    display: flex;
+    align-items: center;
+  }
+  &-author{
+    padding: 0 8px 0 0;
+    font-size: $devui-font-size;
+    color: $devui-text-weak;
+  }
+  &-datetime{
+    font-size: $devui-font-size;
+    color: $devui-aide-text;
+  }
+  &-content{
+    font-size: $devui-text;
+  }
+  &-actions{
+    margin: 12px 0 0;
+  }
+}
diff --git a/packages/devui-vue/devui/comment/src/comment.tsx b/packages/devui-vue/devui/comment/src/comment.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0c6e8d0c24b78c3c35605f8a83e50eead728d3ec
--- /dev/null
+++ b/packages/devui-vue/devui/comment/src/comment.tsx
@@ -0,0 +1,56 @@
+import { defineComponent } from 'vue'
+import { commentProps, CommentProps } from './comment-types'
+import './comment.scss'
+
+export default defineComponent({
+  name: 'DComment',
+  props: commentProps,
+  emits: [],
+  slots: ['actions', 'author', 'avatar', 'content', 'datetime'],
+  setup(props, { slots }) {
+    return () => {
+      const getSlots = function (className: string) {
+        return (
+          <div class={`devui-comment-${className}-nested`}>
+            {slots[className]?.()}
+          </div>
+        )
+      }
+      const setSlot = function (vnode: any) {
+        let vnodeEnum = Object.keys(vnode)
+        vnodeEnum.forEach((item: any) => {
+          getSlots(item)
+        })
+      }
+      const actions = props.actions ?? slots.actions?.();
+      const author = props.author ?? slots.author?.();
+      const avatar = props.avatar ?? slots.avatar?.();
+      const content = props.content ?? slots.content?.();
+      const datetime = props.datetime ?? slots.datetime?.();
+
+      return (
+        <div class="devui-comment">
+          <div class="devui-comment-avatar">
+            {avatar}
+          </div>
+          <div class="devui-comment-right">
+            <div class="devui-comment-head">
+              <div class="devui-comment-author">
+                {author}
+              </div>
+              <div class="devui-comment-datetime">
+                {datetime}
+              </div>
+            </div>
+            <div class="devui-comment-content">
+              {content}
+            </div>
+            <div class="devui-comment-actions">
+              {actions}
+            </div>
+          </div>
+        </div>
+      )
+    }
+  }
+})
diff --git a/packages/devui-vue/devui/comment/src/getSlot.ts b/packages/devui-vue/devui/comment/src/getSlot.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/devui-vue/docs/components/comment/index.md b/packages/devui-vue/docs/components/comment/index.md
new file mode 100644
index 0000000000000000000000000000000000000000..b6f63f19aa5be968458943aaaf799e163e227fef
--- /dev/null
+++ b/packages/devui-vue/docs/components/comment/index.md
@@ -0,0 +1,55 @@
+# Comment 评论
+
+// todo 组件描述
+
+### 何时使用
+
+// todo 使用时机描述
+
+
+### 基本用法
+// todo 用法描述
+:::demo // todo 展开代码的内部描述
+
+```vue
+<template>
+  <div>{{ msg }}</div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  setup() {
+    return {
+      msg: 'Comment 评论 组件文档示例'
+    }
+  }
+})
+</script>
+
+<style>
+
+</style>
+```
+
+:::
+
+### d-comment
+
+d-comment 参数
+
+| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 |
+| ---- | ---- | ---- | ---- | --------- | --------- |
+|      |      |      |      |           |           |
+|      |      |      |      |           |           |
+|      |      |      |      |           |           |
+
+d-comment 事件
+
+| 事件 | 类型 | 说明 | 跳转 Demo |
+| ---- | ---- | ---- | --------- |
+|      |      |      |           |
+|      |      |      |           |
+|      |      |      |           |
+
diff --git a/packages/devui-vue/src/app.vue b/packages/devui-vue/src/app.vue
index 76ccddf536fbf4e584fccc3c8b392789d0c2ce8c..f51801d3858725f7850764af4a2f13b225879b7a 100644
--- a/packages/devui-vue/src/app.vue
+++ b/packages/devui-vue/src/app.vue
@@ -1,12 +1,11 @@
 <template>
-  Vue DevUI
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
 
 export default defineComponent({
-  name: 'App',
+  name: 'App'
 })
 </script>
 
diff --git a/packages/devui-vue/src/main.ts b/packages/devui-vue/src/main.ts
index 01433bca2ac76590c48fabfee8d69d7b223f48bb..1d4acd7cd1c792a84e9a63dba4754d7f302bdb07 100644
--- a/packages/devui-vue/src/main.ts
+++ b/packages/devui-vue/src/main.ts
@@ -1,4 +1,3 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-
 createApp(App).mount('#app')