Vue2-Vite-Ts

Vue2 + Vite2 + Typescript4.5 现代前端框架

轻量/自动/工程化/开箱即用/兼顾IE10+, 快的不止那么一点点~

写在最前

或许你会觉得这又是重做轮子？在前端开源界越来越多 vite 项目源码出现，但发现很多都没办法在 win7 系统下正常打包用于生产，因为 window7 最高仅支持 nodejs v13.14.0 版本，我唯有不得不升级 window 系统，但 vite 本身就支持 nodejs v12+，可惜大部分开源作品都无法在 window7 下完美开发，基于好的东西不应有太多限制，于是乎这轮子就产生了，希望你使用该轮子能有所发现。作为一名懒懒前后端程序员，总想着撸码越少越好，希望用代码改变世界改善生活，但愿你亦如此！

脚手架简介

Vue2 and Typescript in Vite2+ 全新写法，让前端开发舒畅无比，支持 nodejs 13.14.0+ 完全兼容 window7 环境下开发打包，一套学习 Typescript 快速上手的原型脚手架库，MIT 协议，可商业。它快得不止那么一点点... ^-^

轮子原型 vitesse 。感谢 antfu 提供那么棒的插件，有兴趣的小伙伴可前往他的 vitesse 仓库观摩

脚手架特性

• 最新技术栈：使用 Vue2/vite2+/Typescript 等前端前沿技术开发
• TypeScript：源自微软的应用程序级 JavaScript 超集，强类型式脚本
• 依赖包管理：支持 npm、pnpm、yarn, 可 gzip 压缩打包编译
• 主题色调：集合浅亮模式，黑暗模式，灰调模式，色弱模式
• 代码规范：eslint 命名规范、注释规范、缩进排版规范、文件名规范、声明规范
• 自动路由：前端文件式自动路由、能快速实现后端动态路由, 多布局
• 国际多语：模块化多语言，语种分离维护，支持无刷新切换
• 状态管理：使用 Pinia，并支持持久化记忆
• 接口请求：使用 axios 与 vue-request 高度二次封装，让对接后端更轻松
• 图标超集：支持 iconify 图标库 和 iconfont 字体图标
• 样式原子类：使用 WindiCSS 下一代 CSS 框架，完美兼容 Tailwind v2.0，支持直接元素合并原子类
• 特殊语法：vue2 template 支持直接使用 可选链判断符 ?. & 空值合并运算符 ??

工欲善其事

》必先利其器，使用 vscode 打开项目后会自动提示是否安装推荐扩展，详见 .vscode/extensions.json 文件

• VSCode + Volar

• 特别推荐使用 Vue 3 <script setup> 语法糖, check out the script setup docs to learn more.

如何使用

非常欢迎您的加入！提一个 Issue

下载

git clone https://gitee.com/iocui/vue2-vite-ts.git

进入项目文件夹

cd vue2-vite-ts

安装

本脚手架可用 pnpm 或 npm，具体命令自行查阅相关文档，这里使用 yarn 作为示例

### Nodejs > 14+
yarn

### Nodejs < 14+ 时，建议使用忽略Nodejs版本警告方式安装
yarn install --ignore-engines

开发

yarn dev

打包(生产)

yarn build

打包(测试)

yarn build:dev

JS/ES 语法检验(生产打包前建议先运行一次)

yarn esc

TS 语法检验(生产打包前建议先运行一次)

yarn tsc

预览打包

yarn preview

清空 yarn 缓存

yarn cache clean

更多技术栈

这里注意，目前一些国产浏览器（360 安全浏览器、搜狗浏览器、腾讯 QQ 浏览器等）集成的谷歌内核版本都较低，尽量别用这些浏览器做开发测试，涉及到较多前沿技术，建议使用谷歌浏览器或火狐浏览器开发，打包后不受此约束。

详见 package.json