今天用vue 3写了个数码展示 demo：

这个布局，其实很简单

分三个部分，一、导航栏

1. /* 固定导航栏 */
   
2. .navbar {
   
3.     background: white;
   
4.     position: fixed;
   
5.     top: 0;
   
6.     left: 0;
   
7.     right: 0;
   
8.     z-index: 1000;
   
9.     border-bottom: 1px solid #eee;
   
10. }
    
11. 
    
12. .navbar .container {
    
13.     display: flex;
    
14.     justify-content: space-between;
    
15.     align-items: center;
    
16.     height: 60px;
    
17. }

复制代码

没啥技术可言，重要的就是这句：justify-content: space-between;

就是分为两边，在图中你也看到了，一个名字在左边，三个链接在右边


重点来了，就是下面的两栏，是怎么分配的

1. .main-content {
   
2.     display: grid;           /* 将容器设置为网格布局 */
   
3.     grid-template-columns: 250px 1fr;  /* 定义两列布局 */
   
4.     gap: 30px;              /* 设置网格间距 */
   
5.     margin-top: 80px;       /* 顶部外边距 */
   
6. }
   

复制代码

有耐心看完，这个项目完事！提前祝大家五一快乐！

写了一个很pretty card webpage

妙就秒在，一个card就是一个webpage

经过润色，就形成了下面这个页面，还是很哇塞

老夫聊发少年，代码不多，但是很哇塞！

这是我用vuetitf ui框架重写了一遍，加了翻译

这是我第一次用这个web ui框架，第一次，有点手生

写了一个json，for循环了一下

今天用vuetify写了两个demo，一个是面包屑、一个是精灵图






好生疑问，vuetify大量的应用插槽技术

如：

1. <v-chip>
   
2.       <template v-slot:prepend>
   
3.         <v-icon>mdi-account</v-icon>
   
4.       </template>
   
5.       用户标签
   
6.     </v-chip>

复制代码

百思不得其解

今天用vuetify写了两个demo，一个是面包屑、一个是精灵图






好生疑问，vuetify大量的应用插槽技术

如：

1. <v-chip>
   
2.       <template v-slot:prepend>
   
3.         <v-icon>mdi-account</v-icon>
   
4.       </template>
   
5.       用户标签
   
6.     </v-chip>

复制代码

百思不得其解

这是用vuetify写的一个Demo。

总结vuetify的生态比element plus好，毕竟是国际化的东西。

vuetify制作出来的东西，就是精美。

要实现vuetify

一、安装依赖

二、配置vuetify.ts

三、在index.html导入相应的模块

此乃神贴：


我用这9个小技巧封装Vue组件，老大夸我’封得好‘