# vue2-vite-ts

**Repository Path**: iocui/vue2-vite-ts

## Basic Information

- **Project Name**: vue2-vite-ts
- **Description**: vue2+vite2+Typescript 全新写法，从此开发前端舒畅无比，支持 nodejs 13.14.0+ 兼容 win7 打包，一套学习vue2+vite2快速上手原始模型库，MIT协议，可以用于开发任意商业项目
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://vue2-vite.netlify.app/
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 3
- **Created**: 2022-04-10
- **Last Updated**: 2023-03-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align="center">
    <img width="180px" height="180px" src="./src/assets/logo.png" />
    <h1>Vue2-Vite-Ts</h1>
    <b>Vue2 + Vite2 + Typescript4.5 现代前端框架</b>
    <p>轻量/自动/工程化/开箱即用/兼顾IE10+, 快的不止那么一点点~</p>
</div>

<div align="center">

[![license](https://img.shields.io/badge/license-MIT-green.svg)](./LICENSE) [![vue](https://img.shields.io/badge/vue-2+-grass?logo=v-art)](https://v3.cn.vuejs.org/) [![vite](https://img.shields.io/badge/vite-2+-a652fe?logo=vite&logoColor=ffbc14)](https://cn.vitejs.dev/) [![typescript](https://img.shields.io/badge/typescript-4.5+-3178c6?logo=typescript&logoColor=white)](https://www.typescriptlang.org/zh/)

</div>

## 写在最前

> 或许你会觉得这又是重做轮子？在前端开源界越来越多 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](https://github.com/antfu/vitesse)** 。感谢 antfu 提供那么棒的插件，有兴趣的小伙伴可前往他的 [vitesse](https://github.com/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](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=MisterJ.vue-volar-extention-pack)

- 特别推荐使用 Vue 3 `<script setup>` 语法糖, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

# 如何使用

非常欢迎您的加入！[提一个 Issue](https://gitee.com/iocui/vue2-vite-ts/issues)

## 下载

```
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`