我用前端【最新】技术栈完成了一个生产标准的项目【Vue3 + TS + Vite + Pinia + Windicss + NavieUI】

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

前言

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

项目背景

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

设计

团队协作

Plugin

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

Editor

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

UI

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

项目工程

assets

存放一些公共的Image & SVG 等资源

components.common

全局公共组件

components.business

全局业务组件

const.commen

全局公共常量

const.business

全局业务常量

directives.xxx.ts

自定义指令【permissions】【network】...

enum

全局枚举值

filter

全局过滤函数(Vue3没有提供filter)

hooks.common

全局逻辑复用

hooks.business

业务逻辑复用

layouts

布局组件

service.api

API

service.request

axios请求拦截器

typings.xxx.d.ts

全局namespace & interface

utils

工具库

结语

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

预览

LIST

网络异常,图片无法展示
|


FORM

网络异常,图片无法展示
|


目录
相关文章
|
4天前
|
前端开发
【vue3】前端实现 生成条形码并调用打印机打印
【vue3】前端实现 生成条形码并调用打印机打印
12 1
|
5天前
|
前端开发 JavaScript 安全
前端技术栈都有那些,需要学会啥才可以上手写项目?
【7月更文挑战第9天】 前端技术栈包括HTML/CSS/JS基础,熟悉Vue.js/React/Angular等框架,掌握Git、Webpack等工具,理解HTTP协议及安全概念。使用Node.js和编辑器提升效率,从基础到框架层层深入,实践项目以巩固知识,持续学习应对技术更新。
12 0
|
9天前
|
前端开发 测试技术 API
前端必备的【项目知识】
前端必备的【项目知识】
13 0
|
10天前
|
前端开发 JavaScript 应用服务中间件
windows server + iis 部署若伊前端vue项目
5,配置url重写规则(重写后端请求) 注:如果没有Application Request Routing Cachefourcloudbdueclaim和URL重写,则是第二部的那两个插件没装上 打开iis,点击计算机->点击Application Request Routing Cache -> 打开功能
36 0
|
10天前
|
开发框架 前端开发 JavaScript
若依怎样看开发文档,域名搜这个就行ruoyi.vip,建链接点击在线文档,有前端手册和后端手册,若依文档里有项目扩展,项目扩展有大量的开源的软件
若依怎样看开发文档,域名搜这个就行ruoyi.vip,建链接点击在线文档,有前端手册和后端手册,若依文档里有项目扩展,项目扩展有大量的开源的软件
|
10天前
|
前端开发 NoSQL JavaScript
若依修改---重新部署项目注意事项,新文件初始化需要修改的地方,打包后的文件很难进行修改,如果想要不断修改项目,注意保存原项目,才可以不断修改,前端:在Vue.config.js文件中修改target
若依修改---重新部署项目注意事项,新文件初始化需要修改的地方,打包后的文件很难进行修改,如果想要不断修改项目,注意保存原项目,才可以不断修改,前端:在Vue.config.js文件中修改target
|
2天前
|
JavaScript
|
4天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
16 6
|
1天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
10 2
|
4天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
15 4