From 738cc890a52859ba28fdacd7826423326a4f12dd Mon Sep 17 00:00:00 2001
From: 642b59b229c89a1824b83ed8 <642b59b229c89a1824b83ed8@devide>
Date: Thu, 8 Jun 2023 04:01:00 +0000
Subject: [PATCH] Thu Jun  8 04:01:00 UTC 2023 inscode

---
 package.json               |  2 ++
 src/App.vue                | 13 ++++++++---
 src/components/Article.vue | 45 ++++++++++++++++++++++++++++++++++++++
 src/components/Left.vue    |  4 +++-
 vite.config.js             |  9 +++++++-
 5 files changed, 68 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Article.vue

diff --git a/package.json b/package.json
index aa1c7de..e4b5e44 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 98ce5f9..ceb6ae2 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 0000000..2ab042e
--- /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 e5e6eea..192b04d 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 4ad898d..07fd328 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,
+      },
+    },
+  }
 })
-- 
GitLab