功能型前端项目技术栈选型

news2024/11/19 12:34:42

PC功能型官网技术栈选择

  1. vue2+vuex+vue-routerx+axios+animate
  2. 主推:vue3+pinia+vue-router+typeScript+axios+animate(新技术后期踩坑多,成本较高)
1.2 vue3对比vue2
  1. 团队已经熟悉 Vue 2,并且官网的规模不是很大,Vue 2 已经经过多年的发展和完善,有成熟的生态系统和丰富的插件库,可以满足一般官网的需求。此外,Vue 2 的兼容性也更广泛,可以支持更多的浏览器和设备。
  2. 如果官网规模较大,需要更高的性能和更好的开发体验,那么使用 Vue 3 可以提供更好的体验和性能。Vue 3 引入了许多新特性,例如组合 API ,可以提供更好的开发体验。此外,Vue 3 的性能也比 Vue 2 更快,尤其是在处理大型应用时。但是兼容性不如vue2.
  3. Vue3将vue.js拆分成多个文件进行管理,并对代码进行精简,从而进一步缩减了项目体积,相比Vue2打包体积会更小。
  4. Vue3本身就是用Typescript开发的,因此对于Typescript的支持更加友好,vue2并不是很友好还需安装对应的插件。
  5. Vue2它基于对象的方式来组织组件的选项。在Options API中,一个组件被定义为一个包含各种选项的对象,例如data、methods、computed等。而Vue3 使用的是Composition API使用函数的方式来组织组件的逻辑更加灵活和可复用。
1.3 vue2和vue3兼容性

1.vue2只能兼容到IE8就是因为defineProperty无法兼容IE8,其他浏览器也会存在轻微兼容问题 ;

2.proxy的话除了IE,其他浏览器都兼容,vue3还是使用了它,说明vue3直接放弃了IE的兼容性,要求IE浏览器12+起步;

移动端官网技术栈选择

  1. vue2+vuex+vue-router+axios+vant-ui(老技术开发上手快)
  2. vue3+pinia+vue-router+typeScript+axios+vant-ui (如果注重性能和最新的特性,愿意接受一些学习成本,那就Vue 3,新技术后期踩坑多,成本较高)
  3. vue3+vuex+vue-router+axios+vant-ui (单纯vue3技术框架)
  4. uni-app(一套代码打包多端,vue2语法)
  5. Kbone(一份代码,就能够在两端运行,如果你已经有H5代码,只想增加微信小程序平台,并且对性能要求不高,vue2语法)

微信小程序项目技术栈选择

  1. 主推:采用 uni-App开发微信小程序
  2. 原生微信小程开发
  3. Kbone
3.1优缺点
Kbone优点
  1. 跨端能力:Kbone 这个框架可以让你只需要写一份代码,就能够在两端运行,只需要进行一些配置,轻松跑小程序和 Web 两个端。
  2. 性能优化:kbone在底层做了很多性能优化,包括减少小程序和Web应用之间的通信成本、优化渲染性能等,保证了应用的流畅性和响应速度。
  3. 
生态支持:kbone兼容了微信小程序的生态系统,开发者可以使用小程序原生的API和组件,并且可以使用微信开放的能力和服务。
Kbone缺点:
  1. process.env.isMiniprogram判断环境是否是微信小程序,如果是小程序就要用小程序的语法。后期如果有功能改动可能要微信小程序一套逻辑H5一套逻辑。
  2. kbone 是使用一定的性能损耗来换取更为全面的 Web 端特性支持

uniApp的优点:

1.跨平台开发:uniApp可以基于vue开发一次代码,同时适配多个平台,包括

iOS、Android、H5等。uniApp有一个活跃的开发者社区,可以获取到大量的资源和解决方案。

uniApp的缺点:

1.平台限制:由于要兼容多个平台,UniApp在某些功能和性能方面可能会受到一定的限制。

2.自定义性:相比原生开发,UniApp对于一些高度定制化的需求可能会有一些限制。

原生微信小程序的优点:


1. 功能丰富:原生微信小程序可以充分利用微信小程序提供的各种功能和接口,可以实现更复杂的功能和交互。


2. 性能优化:原生微信小程序可以直接使用微信小程序提供的性能优化工具和技术,可以获得更好的性能和体验。


3. 调试方便:原生微信小程序可以使用微信开发者工具进行调试,提供了更便捷的调试和测试环境。

原生微信小程序的缺点:


1. 开发门槛高:原生微信小程序需要使用微信小程序专用的开发语言和API,对于没有相关经验的开发者来说,学习成本较高。


2. 平台限制:原生微信小程序只能在微信平台上运行,无法同时开发其他平台的应用,对于需要跨平台开发的需求不适用。

综合对比

包管理器选型

  1. npm安装、更新和管理项目所需的各种包和依赖项。npm通过命令行界面提供了一系列命令,例如安装包、更新包、删除包等。

  2. cnpm:是一个定制的npm镜像,更快的包安装速度。由于npm默认使用的是国外的源,国内npm可能会比较慢。cnpm通过将npm的源切换到国内镜像来解决这个问题
  3. yarn:使用缓存机制来提高包的安装速度,并允许并行下载和安装包,从而提高了性能。yarn还支持锁定依赖项的版本
  4. pnpm当多个项目使用相同的依赖项时,它们可以共享相同的依赖项,从而减少磁盘空间的占用。pnpm还具有类似yarn的缓存和并行安装的功能,以提高性能。

  5. 结:npm是最常用的JavaScript包管理器,cnpm提供更快的包安装速度,yarn具有更好的性能和版本锁定功能,而pnpm通过共享依赖项减少磁盘空间的占用。

链接入口

动画库:Animate.css | A cross-browser library of CSS animations.

uni-app:uni-app官网

pinia:简介 | Pinia

vant:Vant 3 - Lightweight Mobile UI Components built on Vue

Kbone:kbone 是什么? | wechat-miniprogram / kbone

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1150019.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

一文理解什么是贝叶斯优化的随机森林

贝叶斯优化 简介 贝叶斯优化是一种启发式的全局优化方法,用于优化那些评估代价高昂且可能带有噪音的黑盒函数。其核心思想是:在每一步,都利用已知的函数评估来构建一个概率模型,预测黑盒函数在未知点上的值,并据此选择…

Java入门与实践

Java基础 Java入门 idea的使用 idea快捷键 crtlaltt 对选中的代码弹出环绕选项弹出层 问题描述:idea光标变小黑块 解决:误触Insert键,再次按Insert键即可 java基础语法 注释 //单行注释/* 多行注释 *//** 文档注释,可提取到…

科普|电源自动测试系统测试的项目都有哪些?

电源自动测试系统是一种用于电源性能自动测试的集成系统,它可以自动检测电源模块或开关电源的输入、输出、保护等各个方面。该系统通常由数据软件和各类硬件测试仪器共同组成,利用通讯总线、测试夹具以及其它线缆等将仪器进行连接组成整体的系统结构&…

【Axure高保真原型】百分比堆叠柱状图

今天和大家分享百分比堆叠柱状图的的原型模板,鼠标移入堆叠柱状图后,会显示数据弹窗,里面可以查看具体项目对应的数据和占比。那这个原型模板是用中继器制作的,所以使用也很方便,只需要在中继器表格里维护项目数据信息…

UVC功能特性(Functional Characteristics)

目录 功能特性视频接口类视频接口子类和协议视频功能拓扑输入终端(Input Terminal)输出终端(Output Terminal)相机终端(Camera Terminal)选择单元(Selector Unit)处理单元(Processing Unit)编码单元(Encoding Unit)拓展单元(Extension Unit) 操作模型(Operational Model)视频接…

数据结构:优先级队列(堆)

概念 优先级队列是啥? 队列是一种先进先出 (FIFO) 的数据结构 ,但有些情况下, 操作的数据可能带有优先级,一般出队 列时,可能需要优先级高的元素先出队列。 在这种情况下, 数据结构应该提供两个最基本的…

在线主动学习算法评估策略:prequential evaluation procedure

在线主动学习算法评估策略:prequential evaluation procedure 在在线主动学习领域(Online Active Learning),对在线主动学习算法的评估策略有多种方法,而现如今常用的方法是prequential evaluation procedure(出自论文《High density-focuse…

计算机网络与技术——数据链路层

😊计算机网络与技术——数据链路层 🚀前言☃️基本概念🥏封装成帧🥏透明传输🥏差错检测 ☃️点对点协议PPP🥏PPP协议的特点🥏PPP协议的帧格式🔍PPP异步传输时透明传输(字…

git-更新项目

进入想要更新的项目目录下,按住shift右击,点击open Git Bash here进入命令行 项目日志 git log 拉取代码 git pull origin developer 将工作区的文件添加到暂存区 git add . 查看文件状态(更改信息) git status 提交暂存区到…

【多线程】线程互斥 {多执行流并发执行的数据竞争问题,互斥锁的基本用法,pthread_mutex系列函数,互斥锁的原理;死锁;可重入函数和线程安全}

一、进程线程间通信的相关概念 临界资源:多线程执行流共享的资源就叫做临界资源。确切的说,临界资源在同一时刻只能被一个执行流访问。临界区:每个线程内部,访问临界资源的代码,就叫做临界区。互斥:通过互…

检测和缓解SQL注入攻击

SQL注入即是指web应用程序对用户输入数据的合法性没有判断或过滤不严,攻击者可以在web应用程序中事先定义好的查询语句的结尾上添加额外的SQL语句,在管理员不知情的情况下实现非法操作,以此来实现欺骗数据库服务器执行非授权的任意查询&#…

一文搞懂 LiveData 粘性事件 和 数据倒灌

文章目录 前言LiveData使用分析粘性事件分析数据倒灌总结 一、前言 在使用LiveData的时候,会有疑问,LiveData 是怎么做到先发送再注册,依然能够接收到事件的。还有就是会碰到切换屏幕,导致重复的操作,也就是所谓的数…

postgresql的windows

1. 资源下载: https://www.postgresql.org/download/windows/ 2. 安装 双击,指定D盘目录,接下来默认安装,一直到出现下面的最后一步。一定要去除勾选复选框。 在最后,点击FINISH。 3. 初始化 4. 检查和修改配置 1&am…

MaxQuant的安装和_使用_(linux)

MaxQuant 是一款定量蛋白质组学软件包,支持多种标记定量和无标定量的质谱数据。 1. 安装 MaxQuant下载方式: 通过官网 下载,包括andromeda(搜索引擎)viewer(检查原始数据、鉴定和定量结果)。通…

使用c语言与EASYX实现弹球小游戏

eg1:小球碰到窗体的四个墙实现反弹效果 #include <stdio.h> #include <easyx.h> #include <iostream> #include <math.h> #include <conio.h> #define PI 3.14int main() {initgraph(800, 600);setorigin(400, 300);setaspectratio(1, -1);setb…

MWeb Pro for Mac:博客生成编辑器,助力你的创作之旅

在当今数字化时代&#xff0c;博客已经成为了许多人记录生活、分享知识和表达观点的重要渠道。而要打造一个专业、美观且易于管理的博客&#xff0c;选择一款强大的博客生成编辑器至关重要。今天&#xff0c;我向大家推荐一款备受好评的Mac软件——MWeb Pro。 MWeb Pro是一款专…

从龙湖智创生活入选金钥匙联盟,透视物业服务力竞争风向

假设你是业主&#xff0c;物业“服务”和“管理”&#xff0c;哪个名词看起来更加亲切、讨喜&#xff1f; 站在个人角度&#xff0c;“服务”更让人感受到温度。但对于一个要长期运营下去的住宅或者商企项目来说&#xff0c;整体的管理又必不可少。前者面向人&#xff0c;后者…

Zigbee 模组拉距测试

1.测试方法&#xff1a; 两个同型号Zigbee模组组网&#xff0c;一个作为协调器&#xff0c;一个作为路由器&#xff0c;协调器设备负责组网&#xff0c;其中路由器节点作为被测设备&#xff0c;入网网成功后一分钟开始一轮测试&#xff0c;连续发送100包数据&#xff0c;每包数…

nginx: [emerg] bind() to 0.0.0.0:18888 failed (98: Unknown error)问题解决办法

周末断网&#xff0c;今天来了之后&#xff0c;nginx出现这个问题&#xff0c;本站基本搜索的都是端口被占用问题&#xff0c;我试着杀掉所有占用端口的进程&#xff0c;解决办法 1.killall -9 nginx 2.然后启动(./nginx)nginx&#xff08;PS&#xff1a;不要./nginx -s relo…

echarts 饼图标注 字体修改

option {grid: {// 四周留白区域设置top: 20,right: 20,left: 20,bottom: 20,containLabel: true,},tooltip: {trigger: item,formatter: {b} : {c} ({d}%) // 展示百分比},series: [{type: pie,radius: [40%, 60%],avoidLabelOverlap: false,startAngle: 0, //起始角度data: …