Vue2.7 前端项目技术栈选型路线

前言

由于目前团队开发的项目要考虑兼容性，所以主技术栈是以 Vue2.7 为主，其他库也是要与 Vue2.7 进行搭配使用。

• 如 VueRouter 是用 3.x 版本，Pinia 使用 2.x 版本，vant 使用 2.x 版本

其他常用库版本

• Pnpm: 8.x
• Node: 16.18.1
• Vite: 5.x

基础

Vue

• Vue2 文档: https://v2.cn.vuejs.org
• Vue3 文档: https://cn.vuejs.org
• Vue2 -> Vue3 迁移指南: https://v2.cn.vuejs.org/v2/guide/migration-vue-2-7.html
• Vue2.7 模拟 Vue3 插件: https://vue-macros.dev/zh-CN/
• Vue Hooks 库: https://vueuse.org/functions.html

VueRouter

• Vue-Router3: https://v3.router.vuejs.org/zh/
• Vue-Router4: https://router.vuejs.org/zh/guide/

样式

主要使用

• Less: https://less.bootcss.com/

可学习

• Sass: https://www.sass.hk/docs/index.html
• unocss: https://unocss.net/
• tailwindcss: https://tailwindcss.com/

Pinia

• 官网: https://pinia.vuejs.org/zh/

Vite

• 官网: https://cn.vitejs.dev/
• Vite 插件开发: https://cn.vitejs.dev/guide/api-plugin

常用插件

• unplugin-vue-components: 组件按需加载
• unplugin-auto-import: 常用api自动引入
• unplugin-vue-macros: Vue2.7模拟Vue3插件
• vite-plugin-checker: eslint+ts+stylelint报错检查
• vite-plugin-mock-dev-server: Mock插件

Pnpm

• 官网: https://www.pnpm.cn/
• Pnpm workspace: https://www.pnpm.cn/en/workspaces

Ui 库

移动端

• Vant2: https://youzan.github.io/vant/v2/#/zh-CN
• Vant4: https://vant-ui.github.io/vant/#/zh-CN

PC 端可选

for Vue3

• antd-design-vue: https://www.antdv.com/docs/vue/introduce-cn

代码校验相关

代码提交校验

• husky
• lint-staged
• czg

代码检查

• eslint
• stylelint
• prettier

Node 相关

• Koa: https://www.koajs.net/

辅助类 npm 工具

可学习了解

• fs-extra
• tsx
• minimist
• unbuild

拓展

Nuxt 相关

• Nuxt3: https://nuxt.com.cn/

跨端

小程序

• Taro: https://docs.taro.zone/docs/