我用前端【最新】技术栈完成了一个生产标准的项目【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

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


目录
相关文章
|
2天前
|
人工智能 移动开发 前端开发
WeaveFox:蚂蚁集团推出 AI 前端智能研发平台,能够根据设计图直接生成源代码,支持多种客户端和技术栈
蚂蚁团队推出的AI前端研发平台WeaveFox,能够根据设计图直接生成前端源代码,支持多种应用类型和技术栈,提升开发效率和质量。本文将详细介绍WeaveFox的功能、技术原理及应用场景。
185 66
WeaveFox:蚂蚁集团推出 AI 前端智能研发平台,能够根据设计图直接生成源代码,支持多种客户端和技术栈
|
28天前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
102 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
|
1月前
|
前端开发 测试技术
前端工程化的分支策略要如何与项目的具体情况相结合?
前端工程化的分支策略要紧密结合项目的实际情况,以实现高效的开发、稳定的版本控制和顺利的发布流程。
27 1
|
1月前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
|
1月前
|
前端开发 Unix 测试技术
揭秘!前端大牛们如何高效管理项目,确保按时交付高质量作品!
【10月更文挑战第30天】前端开发项目涉及从需求分析到最终交付的多个环节。本文解答了如何制定合理项目计划、提高团队协作效率、确保代码质量和应对项目风险等问题,帮助你学习前端大牛们的项目管理技巧,确保按时交付高质量的作品。
39 2
|
1月前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
1月前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
1月前
|
前端开发 JavaScript 容器
在 vite+vue 中使用@originjs/vite-plugin-federation 模块联邦
【10月更文挑战第25天】模块联邦是一种强大的技术,它允许将不同的微前端模块组合在一起,形成一个统一的应用。在 vite+vue 项目中,使用@originjs/vite-plugin-federation 模块联邦可以实现高效的模块共享和组合。通过本文的介绍,相信你已经了解了如何在 vite+vue 项目中使用@originjs/vite-plugin-federation 模块联邦,包括安装、配置和使用等方面。在实际开发中,你可以根据自己的需求和项目的特点,灵活地使用模块联邦,提高项目的可维护性和扩展性。
|
1月前
|
JavaScript 前端开发 搜索推荐
Vue的数据驱动视图与其他前端框架的数据驱动方式有何不同?
总的来说,Vue 的数据驱动视图在诸多方面展现出独特的优势,其与其他前端框架的数据驱动方式的不同之处主要体现在绑定方式、性能表现、触发机制、组件化结合、灵活性、语法表达以及与后端数据交互等方面。这些差异使得 Vue 在前端开发领域具有独特的地位和价值。
|
1月前
|
前端开发 JavaScript 安全
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第7天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤。包括项目准备、安装 `javascript-obfuscator`、配置 Vite 构建以应用混淆,以及最终构建项目进行混淆。通过这些步骤,可以有效提升前端代码的安全性,防止被他人轻易分析和盗用。
194 0