Thu Jun 8 04:01:00 UTC 2023 inscode

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"
   }
 }

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>

src/components/Article.vue

+<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

src/components/Left.vue

@@ -2,7 +2,9 @@
   <div class="left-container">
     <h3>Left 组件</h3>
 
-    <slot></slot>
+    <slot>
+      如果用户不指定插槽内容，就会显示后备内容
+    </slot>
   </div>
 </template>
 

vite.config.js

@@ -6,5 +6,12 @@ export default defineConfig({
   server: {
     host: true
   },
-  plugins: [vue()]
+  plugins: [vue()],
+  css: {
+    preprocessorOptions: {
+      less: {
+        javascriptEnabled: true,
+      },
+    },
+  }
 })