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

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