【无标题】

项目启动

1. 运行指令: pnpm install && pnpm run serve
2. 启动项目后，打开whistle的127.0.0.1:8899页面，添加配置如下图所示。
   shenheng.zl.wps.cn https://127.0.0.1:8080/
3. 浏览器输入shenheng.zl.wps.cn打开页面，如图所示

项目源代码src结构介绍

										src  
										├── assets  
										│   └── app.css  
										├── components  
										│   └── wpsZliitem.vue  
										├── util  
										│   └── api.js  
										└── views  
										    ├── contentShow.vue  
										    └── navBar.vue  

1. assets目录用于保存静态文件，tailwind CSS 的css样式，tailwind CSS 不包含预定义的组件和布局，而是通过一组可组合的原子类来定义样式，开发者可以根据需要自由组合它们，以快速构建定制化风格的界面。这些原子类通常是以单个属性和值组成的，例如 text-blue-500 表示文本颜色为蓝色（500 是颜色的强度。
2. components中有一个组件wpsZliitem.vue是本项目功能实现的根组件
3. util目录存放用于请求接口数据的工具类函数
4. views目录的文件显示了页面的主要内容，其中contentShow.vue和navBar.vue是wpsZliitem.vue的子组件，其中contentShow.vue用于显示导航栏目录下的内容，接收的参数是当前目录的id，通过props接收wpsZliitem.vue的参数。navBar.vue文件用于显示导航栏和切换导航栏的目录，通过emit发送id参数。如下图所示，