必博（中国）Bibo·官方网站 - 做高端体育品牌

　　持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

　　聊一下自己使用这些技术的一些体会与心得，不做具体的搭建过程了，说一下工程的设计思想与遇到了哪些问题。

　　最近一直在忙一个EPR系统的开发，新项目之前团队的技术栈基本停留于Vue2 + Js + Webpack + Vuex上，但是Vue生态其实已经可以说进入了次时代，虽然我个人其实不是很倡议盲目的去追赶新的框架，因为我觉得先把自己手头的技术掌握扎实才是重中之重，团队的同学绝大多数是一些基本的开发程序员，初级较多。但是学习还是有必要的，那么学习后就需要一个成熟的项目，体系完整的项目来巩固一下自己学的知识，借此机会，向部门CTO提出使用Vue3 + TS + Vite + Pinia + Windicss + NavieUI进行新项目的开发，审批通过！

　　有效利用esLint、prettier、husky以及commitizen，因为使用了TypeScript+esLint所以对代码的书写规范、类型、接口的使用必须有很高的要求，如果使用了不当的类型或者书写不规范，第一会导致代码提交到远程再到其他同学本地，会出现很多的error，对这种情况，我们可以在git提交的钩子中进行代码的per-commit，在这个阶段，主要是进行linttypecheck操作，而且在进行typecheck的时候一定要加noEmit，禁止有error的代码提交，同时使用commitizen规范git commit的信息，遵守augular规范。

　　编辑器集体更换为VSCode，团队中有使用webstorm的同学，也强制更换编辑器，如果进行Vue3的开发，一定要记得禁用vetur插件，使用volar进行开发。

　　因为项目比较着急，所以没有让UI出图，这个对我来说，确实不是什么大问题「手动狗头」，因为自己也有过很多次脱离UI进行开发的经验，虽然不如专业UI设计师做出来好看，但是也还不错，得到了部门领导老板的大力认可，放一个栗子，这个项目是用Nuxtjs搞得，嘻嘻。但是之前都是自己去弄，这次因为比较着急，而且工作内容比较多，所以必须得拉上小伙伴一起了，就面临了一个问题，那就是如何统一设计风格的问题，于是想到了tailwindcss，调研的过程中，又发现了windicss，相对于前者，后者的体积更小，但是文档不太友好，因为...你完全可以参照前者的文档，而是用后者进行开发，哈哈，使用windicssNavieUI统一好theme，给伙伴们的要求是，不要在工程中自己写css，因为7个人一块开发一个没有UI稿的项目，每个人的想法都不同。到现在提测为止，项目中没有出现过component css，整体页面风格十bibo必博官网分统一。

　　以上就是项目部分的设计，主要是目录结构，具体的代码太多了，没有时间写，等有时间了写一个系列吧。