位置: IT常识 - 正文

2023 最新最细 vite+vue3+ts 多页面项目架构,建议收藏备用!

编辑:rootadmin
2023 最新最细 vite+vue3+ts 多页面项目架构,建议收藏备用! 🌻 前言

推荐整理分享2023 最新最细 vite+vue3+ts 多页面项目架构,建议收藏备用!,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

本文教程 github地址 、码云。 如果对你有帮助,希望能点个star ⭐️⭐️⭐️ 万分感谢😊😊😊

🧱 背景2023 最新最细 vite+vue3+ts 多页面项目架构,建议收藏备用!

不久前我司需要重新部署一个前端项目,由我来负责这个项目的搭建。因为这个项目是需要和app混合开发的h5页面,包括以后可能会做一些运营h5,所以自然不能采用常规的SPA单页面应用架构(因为大部分页面耦合度低,全都塞一个项目里的话,即使打开个纯静态页都要跑起来整个项目,严重影响页面的加载速度).

另外,我们其实已经有混合开发h5项目,采用的gulp工作流,即每个页面都是单独的一个html文件。这种架构的优势很明显,就是体量小,结构清晰等,但是它的缺点也非常明显,例如有些轮子无法使用,组件化、模块化开发非常不便影响开发效率等。

目前此项目已在平稳运行,最近有空闲时间记录一下我搭建项目的过程,同时也希望能帮助到有这方面需求的掘友😊

💡 思路 **

综合考虑,我决定用vite + vue3 + ts + esint + prettier + stylelint + husky + lint-stage + commitlint 搭建一套多页面项目。

1. 初步定了几个目标:

🍀 支持打包指定子页面,打包后的文件夹:各页面相互独立(各子页面解耦,避免相互影响)🍀 支持启动指定子页面(常规的多页面项目,启动后需要手动拼接页面地址,或者在根目录做一个重定向的页面,总之调试非常不便)🍀 支持指令化新建页面(手动创建页面太麻烦,每次都得复制一份干净的文件夹)🍀 自由选择创建ts页面 / js页面(对于一些重要的页面可以使用ts提高规范性,一些简单的页面则使用js提高开发效率)

2. 本文将从以下几个方面逐步讲解:

项目目录结构新建项目安装依赖及一些基础插件vite配置项修改ts配置多页面入口配置多页面打包配置指令化新建子页面(*重点)多页面架构改造(*重点)完善项目架构🌈 教程一、 项目目录结构├── README.md├── .husky //git hook钩子│ ├── commit-msg //规范 commit message 信息│ └── verify-commit-msg.mjs //脚本:commitlint 替代方案├── dist //打包输出目录├── scripts //存放一些脚本│ ├── template //创建子页面的js模版│ ├── template-ts //创建子页面的ts模版│ ├── index.mjs //创建子页面的脚本│ └── multiPages.json //子页面描述说明集合文件├── src │ ├── arrets //公共静态资源│ ├── components //公共组件│ ├── store //pinia 共享状态存储库│ ├── utils //公共方法│ └── Projects //多页面文件夹├── types //ts
本文链接地址:https://www.jiuchutong.com/zhishi/292405.html 转载请保留说明!

上一篇:日落时分正在迁徙的斑纹角马群,肯尼亚马赛马拉野生动物保护区 (© Denis-Huot/Minden Pictures)(日落之前是什么时辰)

下一篇:VScode 调试教程 tasks.json和launch.json的设置(超详细)(vscode调试在哪)

  • 企业培训考试企业内训科目名称

    企业培训考试企业内训科目名称

  • 手机怎么截长屏的聊天记录(三星手机怎么截长屏)

    手机怎么截长屏的聊天记录(三星手机怎么截长屏)

  • 小米手环6关闭心率监测(小米手环6关闭心率还是闪)

    小米手环6关闭心率监测(小米手环6关闭心率还是闪)

  • 局域网中mac指的是什么(局域网中mac指的是网络吗)

    局域网中mac指的是什么(局域网中mac指的是网络吗)

  • 大疆mavic2遥控器借口是平口怎么充电

    大疆mavic2遥控器借口是平口怎么充电

  • 快手剪视频软件叫什么(快手剪视频软件哪个好)

    快手剪视频软件叫什么(快手剪视频软件哪个好)

  • iphonexr内部零件会摔坏吗(苹果xr内部零件)

    iphonexr内部零件会摔坏吗(苹果xr内部零件)

  • 3dmax成组快捷键(3dmax的成组命令不见了怎么办)

    3dmax成组快捷键(3dmax的成组命令不见了怎么办)

  • 抖音显示未获得微信登录权限(抖音显示未获得权限怎么办)

    抖音显示未获得微信登录权限(抖音显示未获得权限怎么办)

  • 拉黑了群聊还能看到吗(拉黑 群里还能at吗)

    拉黑了群聊还能看到吗(拉黑 群里还能at吗)

  • qq怎么设置闺蜜关系(qq怎么设置闺蜜标识)

    qq怎么设置闺蜜关系(qq怎么设置闺蜜标识)

  • a320 b450主板区别(a320mb450m主板区别)

    a320 b450主板区别(a320mb450m主板区别)

  • 抖音提现多久能到账(抖音中提现要几天才能到账,但还有余额会不会清零)

    抖音提现多久能到账(抖音中提现要几天才能到账,但还有余额会不会清零)

  • tl10a华为是什么型号(华为tl10什么型号)

    tl10a华为是什么型号(华为tl10什么型号)

  • vivo内存卡在哪里设置(vivo内存卡哪个牌子好)

    vivo内存卡在哪里设置(vivo内存卡哪个牌子好)

  • 华为talkback自动开启(华为talkback为什么自动打开)

    华为talkback自动开启(华为talkback为什么自动打开)

  • 键盘上end是哪个键(键盘上end键是什么意思)

    键盘上end是哪个键(键盘上end键是什么意思)

  • 500兆宽带用什么网线(500m宽带用什么路由器)

    500兆宽带用什么网线(500m宽带用什么路由器)

  • 小米手机拍照识物功能在哪里(小米手机拍照识别文字)

    小米手机拍照识物功能在哪里(小米手机拍照识别文字)

  • qq怎么关闭更感兴趣(怎么关闭qq自动更新功能)

    qq怎么关闭更感兴趣(怎么关闭qq自动更新功能)

  • 幻灯片的配色方案可以通过什么更改(幻灯片的配色原则)

    幻灯片的配色方案可以通过什么更改(幻灯片的配色原则)

  • 安卓手机用多久会卡(安卓手机用多久会卡顿)

    安卓手机用多久会卡(安卓手机用多久会卡顿)

  • 怎样解除黑名单联系人(陌陌怎样解除黑名单)

    怎样解除黑名单联系人(陌陌怎样解除黑名单)

  • 马拉克勒国家公园中一只隐身的chia象,南非林波波河 (© Staffan Widstrand/Minden Pictures)(拉马克是哪国人)

    马拉克勒国家公园中一只隐身的chia象,南非林波波河 (© Staffan Widstrand/Minden Pictures)(拉马克是哪国人)

  • 计算机网络面试大总结(计算机网络面试八股文)

    计算机网络面试大总结(计算机网络面试八股文)

  • 税后债务资本成本计算公式 中级会计
  • 金税盘服务费全额抵扣是什么意思
  • 固定资产报废处置收入要交增值税吗
  • 工程咨询属于什么合同
  • 2个公司的法人是谁
  • 汽车购买者
  • 自然人生产经营所得,如何计算个税
  • 企业是否可以查员工亲属关系
  • 收到电子退库的摘要怎么写
  • 税款差0.01是怎么用会计分录处理
  • 所得税汇算清缴分录怎么做
  • 国有资产转让房产
  • 外商独资投资性公司
  • 免征土地增值税
  • 期初固定资产净值在资产负债表中的哪里
  • 社保基金会割肉操作吗
  • 工程安装公司暂估人工费如何做会计核算?
  • 个人收到的国外短信
  • 软件著作权如何入账
  • 公司为员工买保险好还是个体户为员工买保险好
  • 个人所得税生育险
  • 企业一般户可以扣税吗
  • 滴滴客运服务费免税
  • 公司发生的费用需要交税吗
  • 稽查以前年度补税
  • 生产企业出租设备如何开票
  • 残保金次年申报
  • 水费差额征税税率
  • 未开票收入是含税收入吗
  • 投资预算的编制方法
  • windows11怎么创建宽带拨号连接图标
  • 税金及附加怎么登明细账
  • win10鼠标速度默认是多少
  • gazebo中机器人导航在rviz中不显示地图仅限显示轨迹
  • 未办理装修手续
  • php读取目录
  • 非营利组织所得税申报
  • 稿酬所得计入什么科目
  • 资本公积转增注册资本的条件
  • vue前端后端
  • thinkphp ide
  • ai训练流程
  • ps快速选择工具抠图后怎么拉出来
  • springmvc的执行流程
  • bat 进入当前文件夹
  • 公司的钱借给个人必须要有利息吗
  • 收到投资款怎么做账
  • 当月已付款, 没收到发票怎么做账
  • 金融企业往来支出科目属于什么科目
  • 税率开错了会影响贷款吗
  • ado连接access数据库
  • 建筑服务预征缴纳税款期初余额怎么算
  • 单位收到社保补贴会计怎样处理
  • 土地使用税如何计算公式
  • 商业健康保险抵扣个税规定
  • 总账建账要遵循的原则
  • win2008r
  • Vista 目前的窘境5大原因分析
  • windowsxp怎么删除所有文件
  • winXP运行内存查看
  • ubuntu英文系统安装中文输入法
  • win10缺少文件如何修复
  • lowleverfatal error怎么解决
  • win8能装pr2017吗
  • cocos做游戏
  • c#封装数据库
  • js函数命名
  • windows定时计划
  • Unity符国新:3D技术将渗透到生活的各个方面
  • ssh连不上centos
  • Django中login_required装饰器的深入介绍
  • 浅谈关于混合模式教学的看法
  • jquery.form.min.js
  • textview在哪
  • 12366纳税服务热线坐席人员
  • 北京税务局地税电话
  • 河北省发票查询真伪查询国税
  • 纳服的拼音
  • 工会经费支出审批制度
  • 小规模纳税人开专票税率是1%还是3%
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设