Skip to content

Commit 61cd654

Browse files
authored
📸 docs: update primary english (#408)
1 parent f421e7c commit 61cd654

File tree

3 files changed

+204
-204
lines changed

3 files changed

+204
-204
lines changed

README-en.md

-154
This file was deleted.

README-zh.md

+153
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
# vite-ts-starter
2+
3+
中文 | [English](README.md)
4+
5+
[![Deploy](https://github.com/pdsuwwz/vite-ts-starter/workflows/gh-pages/badge.svg)](https://github.com/pdsuwwz/vite-ts-starter/actions/workflows/deploy.yml)
6+
[![GitHub Workflow Status (branch)](https://img.shields.io/github/actions/workflow/status/pdsuwwz/vite-ts-starter/deploy.yml?branch=main)](https://github.com/pdsuwwz/vite-ts-starter/deployments/activity_log?environment=github-pages)
7+
[![thanks](https://badgen.net/badge/thanks/♥/pink)](https://github.com/pdsuwwz)
8+
[![License](https://img.shields.io/github/license/pdsuwwz/vite-ts-starter?color=blue)](https://github.com/pdsuwwz/vite-ts-starter/blob/main/LICENSE)
9+
10+
🐬 A Starter template built on Vite 5.x + Vue 3.x + Element Plus 2.x + TypeScript + Husky + lint-staged.
11+
12+
一个开箱即用,适合快速开发 Vue3 + Vite5 + TS 中小型 B 端后台管理系统的原型模板项目框架,持续更新最新技术栈 💪
13+
14+
[🚀 Live Demo 在线体验](https://pdsuwwz.github.io/vite-ts-starter)
15+
16+
17+
## 🌱 不同版本
18+
目前一共有以下五个不同技术栈的仓库模板在持续维护,请尝试后选择适合自己的模板使用
19+
20+
- 💥 (推荐) [TS + Pinia + 🌐 低耦合(i18n)多语言 Vite5 + Vue3 + TS + Element-Plus2 + vue-i18n@next](https://github.com/pdsuwwz/vue-boilerplate-i18n)
21+
22+
- ⚡️ TS + Pinia 版 [Vite5 + Vue3 + TS + Pinia + Element-Plus2 + useLocale + i18n](https://github.com/pdsuwwz/pinia-starter-ts)
23+
- ⚡️ JS + Pinia 版 [Vite5 + Vue3 + Pinia + Element-Plus2 + useLocale + i18n](https://github.com/pdsuwwz/vite-pinia-starter)
24+
25+
- ⚡️ TS + Vuex4 版 (当前仓库)[Vite5 + Vue3 + TS + Vuex4 + Element-Plus2 + useLocale + i18n](https://github.com/pdsuwwz/vite-ts-starter)
26+
- ⚡️ JS + Vuex4 版 [Vite5 + Vue3 + Vuex4 + Element-Plus2 + useLocale + i18n](https://github.com/pdsuwwz/vite-starter)
27+
28+
## 🪄 使用不同的 UI 库
29+
30+
如果更偏好使用 [Naive UI](https://www.naiveui.com/) 作为 UI 库, 这里也为你准备了几个相应的模板项目,可在此基础上进行业务二次开发和定制:
31+
32+
- 🏄‍♂️ [Naive UI 基础模板,集成常用技术栈](https://github.com/pdsuwwz/vite-naive-template)
33+
- 🗂️ [基于 Naive UI 的 Tab 多页签切换选项卡演示](https://github.com/pdsuwwz/vue3-tab-demo)
34+
35+
36+
## 🎉 Features
37+
38+
* 支持 __Vite 5 + Vue 3 + TypeScript__
39+
* UI 框架: __Element Plus 2.x__
40+
* 状态管理: __Vuex 4__
41+
* 代码规范化检测: __Husky + lint-staged__
42+
* 单元测试框架: ~~__Jest__~~ 升级为 __Vitest__
43+
* 内置 __ESlint____Stylelint__, 可在此基础上扩展你想要的 Lint 配置规范
44+
* 内置封装了一个**可能比较好用的** Axios , 需要时配合 Vuex Actions 一起食用
45+
* 封装了 \<IconFont \/> 组件, 可直接使用 IconFont 图标
46+
* 内置全局 **$ModalDialog** 插件, 支持使用 service 式地动态调用此插件来显示任意组件
47+
* 内置 i18n, 支持到 VueRouter 路由级别切换语言,可编写国际化配置文件及扩展其他语言
48+
* 路由鉴权已帮你封装好,同时配合 Nprogress, 只需要修改 permission.ts 文件即可
49+
* 自带一个模块化的组件开发环境,可按照 modules 目录解耦页面组件、路由组件、样式等文件
50+
* 高度封装但不失灵活,内部抽象出了一个完整的业务流程供你参考,涉及三个核心页面:登录、列表和明细
51+
* 节省你配置的时间,因此该项目的**轻量化**致使你只需要专心编写自己的业务代码即可
52+
53+
54+
## 前置条件
55+
56+
* Vue 3.x
57+
* Node >= 18.12.x
58+
* Pnpm 9.x
59+
* **VS Code 插件 `dbaeumer.vscode-eslint` >= v3.0.5 (pre-release)**
60+
61+
62+
## 运行效果截图
63+
64+
<img width="1440" alt="image" src="https://user-images.githubusercontent.com/19891724/154829635-46de24db-e4c5-409f-9fa5-6a9770ace166.png">
65+
<img width="1440" alt="image" src="https://user-images.githubusercontent.com/19891724/154829667-a84787b0-0104-4466-bb9e-9f586be66778.png">
66+
67+
68+
## 安装和运行
69+
70+
* 安装依赖
71+
72+
```bash
73+
pnpm i
74+
```
75+
76+
* 本地开发
77+
78+
```bash
79+
pnpm dev
80+
```
81+
82+
## 单元测试
83+
84+
* 执行单测
85+
86+
```bash
87+
pnpm test
88+
```
89+
90+
* 执行覆盖率测试
91+
92+
```bash
93+
pnpm test:coverage
94+
```
95+
96+
## 🌍 国际化 i18n 设置
97+
98+
本项目支持多语言设置,默认语言为 `English`.
99+
100+
### 默认语言配置
101+
102+
103+
默认语言通过 [`defaultLanguageLocale`](src/locales/index.ts#L43) 常量设置。要更改默认语言,只需修改此常量的值:
104+
105+
```ts
106+
export const defaultLanguageLocale = 'en'
107+
```
108+
109+
### 扩展支持的语言
110+
111+
112+
项目当前支持以下语言,详见代码[src/locales/index.ts](src/locales/index.ts#L13):
113+
114+
```ts
115+
export const localesMapping = [
116+
{
117+
localeCode: 'zh-hans',
118+
localeName: '简体中文',
119+
localeLang: {...}
120+
},
121+
{
122+
localeCode: 'en',
123+
localeName: 'English',
124+
localeLang: {...}
125+
}
126+
]
127+
```
128+
129+
要添加新的语言支持:
130+
131+
*[`localesMapping`](src/locales/index.ts#L13) 数组中添加新的语言对象
132+
*[`src/locales/lang/`](src/locales/lang/) 目录下创建对应的语言文件(如 de.ts 为德语)
133+
134+
```
135+
./lang
136+
├── en.ts
137+
└── zh-hans.ts
138+
```
139+
* 导入并合并 `Element Plus` 语言包和自定义语言文件,确保 UI 组件和自定义内容均被本地化
140+
141+
142+
## 💡 提示
143+
144+
* 若 Husky 未生效,可能是由于未完成初始化,尝试执行以下命令进行初始化:
145+
146+
```bash
147+
pnpm run prepare
148+
```
149+
150+
151+
## 😎 Awesome
152+
153+
* [awesome-vite](https://github.com/pdsuwwz/awesome-vite)

0 commit comments

Comments
 (0)