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..5fa8c85f57ee56f9e29901c1a05af3162d346deb
--- /dev/null
+++ b/packages/devui-vue/devui/comment/src/comment.scss
@@ -0,0 +1,30 @@
+@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