diff --git a/package.json b/package.json
index aa1c7deb0adb6e6aea5a1380426189ac24eee7a7..e4b5e44408ce4263fb5b45778e3be7bd9280e61c 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,8 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",
+    "less": "^4.1.3",
+    "less-loader": "^11.1.2",
     "vite": "^3.0.1"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index 98ce5f977f921c8294110c6df8c4380c0c24fb57..ceb6ae20b95f01055b69d5c2e69ba79589fc7c74 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,20 +5,27 @@
 
 
     <div class="box">
-      <Left>
-        <p> 内容会被丢弃 </p>
-      </Left>
+      <!-- <Left>
+       
+      </Left> -->
+
+      <Article>
+        
+      </Article>
+
     </div>
   </div>
 </template>
 
 <script>
 import Left from './components/Left.vue'
+import Article from './components/Article.vue';
 
 export default {
 
   components: {
     Left,
+    Article,
   }
 }
 </script>
diff --git a/src/components/Article.vue b/src/components/Article.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2ab042eb737b56c39f928fae133cdfd3289a5f0f
--- /dev/null
+++ b/src/components/Article.vue
@@ -0,0 +1,45 @@
+<template>
+    <div class="article-container">
+      <h3 v-color="'red'">Article 组件</h3>
+      <!-- 文章的标题 -->
+      <div class="header-box">
+        <slot name="title"></slot>
+      </div>
+  
+      <!-- 文章的内容 -->
+      <div class="content-box">
+     
+        <slot name="content"></slot>
+      </div>
+  
+      <!-- 文章的作者 -->
+      <div class="footer-box">
+        <slot name="author"></slot>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    // 首字母要大写
+    name: 'Article',
+  }
+  </script>
+  
+  <style lang="less" scoped>
+  .article-container {
+    > div {
+      min-height: 150px;
+    }
+    .header-box {
+      background-color: pink;
+    }
+    .content-box {
+      background-color: lightblue;
+    }
+    .footer-box {
+      background-color: lightsalmon;
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/Left.vue b/src/components/Left.vue
index e5e6eeae9b5fcb4b34433e2ecd6b32f8ccc14748..192b04dfc397b57709e47e5613adfef6f57e2766 100644
--- a/src/components/Left.vue
+++ b/src/components/Left.vue
@@ -2,7 +2,9 @@
   <div class="left-container">
     <h3>Left 组件</h3>
 
-    <slot></slot>
+    <slot>
+      如果用户不指定插槽内容，就会显示后备内容
+    </slot>
   </div>
 </template>
 
diff --git a/vite.config.js b/vite.config.js
index 4ad898dec614e030adad5e4f80523145bce56245..07fd328093154aeeaeeb1a30d16f6142e9d1d659 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -6,5 +6,12 @@ export default defineConfig({
   server: {
     host: true
   },
-  plugins: [vue()]
+  plugins: [vue()],
+  css: {
+    preprocessorOptions: {
+      less: {
+        javascriptEnabled: true,
+      },
+    },
+  }
 })