Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🏄‍ feat: update readme #8

Merged
merged 1 commit into from
Oct 1, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ module.exports = {
browser: true,
node: true,
es2021: true,
jest: true,
'vue/setup-compiler-macros': true
},
parser: 'vue-eslint-parser',
Expand Down
65 changes: 20 additions & 45 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,86 +5,67 @@
[![thanks](https://badgen.net/badge/thanks/♥/pink)](https://github.com/pdsuwwz)
[![License](https://img.shields.io/github/license/pdsuwwz/vite-naive-template?color=blue)](https://github.com/pdsuwwz/vite-naive-template/blob/main/LICENSE)

🐳 Starter using NaiveUI + Vite 4 + Vue 3 + Pinia + TypeScript + i18n + Unplugin + UnoCSS to fast build a prototyping
🏄‍♂️ A Starter template built on Vite 4.x + Vue 3.3 + Naive UI + Pinia + UnoCSS + Unplugin Auto Import TypeScript.

一个适用国际化多语言(i18n)扩展、帮助你快速开发 B 端 ✈️✈️✈️ Vue3 + Vite4 + TS + Pinia 中小型后台管理系统的原型模板项目框架,集成 vue-i18n-next 💪


__[💻 Live Demo 在线体验](https://pdsuwwz.github.io/vite-naive-template/#/zh-hans)__


## 🌱 不同版本
目前一共有以下六个不同技术栈的仓库模板在持续维护,请尝试后选择适合自己的模板使用

### NaiveUI
(推荐基于在[当前仓库](https://github.com/pdsuwwz/naive-ts-starter/generate)基础上二次开发)
- 💚 (推荐1) [TS + Pinia + 🌐 低耦合(i18n)多语言 Vite4 + Vue3 + TS + UnoCSS + UnPlugin + NaiveUI + vue-i18n@next](https://github.com/pdsuwwz/naive-ts-starter)

### ElementPlus

- 💥 (推荐2) [TS + Pinia + 🌐 低耦合(i18n)多语言 Vite4 + Vue3 + TS + UnoCSS + UnPlugin + Element-Plus2 + vue-i18n@next](https://github.com/pdsuwwz/vue-boilerplate-i18n)

- ⚡️ TS + Pinia 版 [Vite4 + Vue3 + TS + Pinia + Element-Plus2 + useLocale + i18n](https://github.com/pdsuwwz/pinia-starter-ts)
- ⚡️ JS + Pinia 版 [Vite4 + Vue3 + Pinia + Element-Plus2 + useLocale + i18n](https://github.com/pdsuwwz/vite-pinia-starter)

- ⚡️ TS + Vuex4 版 [Vite4 + Vue3 + TS + Vuex4 + Element-Plus2 + useLocale + i18n](https://github.com/pdsuwwz/vite-ts-starter)
- ⚡️ JS + Vuex4 版 [Vite4 + Vue3 + Vuex4 + Element-Plus2 + useLocale + i18n](https://github.com/pdsuwwz/vite-starter)
一个简洁的 Vite 4 + Vue 3.3 + TypeScript 的 B 端后台原型 Naive UI 模板框架,内置 Pinia 模块化管理代码、路由鉴权、UnoCSS 暗黑模式、Unplugin 自动导入等, 开箱即用, 注重快速高效搭建实际业务场景, 持续更新最新技术栈 💪

[🔥 Live Demo 在线体验](https://pdsuwwz.github.io/vite-naive-template)


## 🎉 Features

* 支持 __Vite 4 + Vue 3 + TypeScript__
* UI 框架: __NaiveUI 2.x__
* Icons: 内置 __XIcons__ 和 \<IconFont \/> 组件, 可直接使用 IconFont 图标
* 支持 __Vite 4 + Vue 3.3 + TypeScript__
* UI 框架: __Naive UI 2.x__
* 状态管理: __Pinia__
* 基于 __UnoCSS__ 进行`暗黑模式`切换
* 单元测试框架: __Vitest__
* 内置 **UnoCSS + Unplugin**, 可实现样式内联、暗黑模式和组件按需自动导入, 提升开发效率
* 内置 __ESlint__ 和 __Stylelint__, 可在此基础上扩充你想要的 Lint 配置规范
* 内置封装了一个**可能比较好用的** Axios , 需要时配合 Pinia Actions 一起食用
* 内置 **vue-i18n-next**, 支持到 VueRouter 路由级别切换语言,可编写国际化配置文件及扩展其他语言
* 封装了 \<IconFont \/> 组件, 可直接使用 IconFont 图标
* 内置全局 **window.$ModalXxxx** 插件, 支持使用 service 式地动态调用此插件来显示任意组件
* 路由鉴权已帮你封装好,同时配合 Nprogress, 只需要修改 permission.ts 文件即可
* 自带一个模块化的组件开发环境,可按照 Modules 目录解耦页面组件、路由组件、样式等文件
* 高度封装但不失灵活,内部抽象出了一个简单的业务流程供你参考(自由发挥),涉及三个核心页面:登录、列表和明细
* 自带一个模块化的组件开发环境,可按照 modules 目录解耦页面组件、路由组件、样式等文件
* 高度封装但不失灵活,内部抽象出了一个完整的业务流程供你参考,涉及三个核心页面:登录、列表和明细
* 节省你配置的时间,因此该项目的**轻量化**致使你只需要专心编写自己的业务代码即可


## Screenshot

<img width="1440" alt="image" src="https://user-images.githubusercontent.com/19891724/154831095-32a64eee-01ce-49be-ad64-626f0d276559.png">
<img width="1440" alt="image" src="https://user-images.githubusercontent.com/19891724/168773776-2d43c03d-54dd-4364-8830-0bba65603ef4.png">
<img width="1440" alt="image" src="https://user-images.githubusercontent.com/19891724/154829635-46de24db-e4c5-409f-9fa5-6a9770ace166.png">
<img width="1440" alt="image" src="https://user-images.githubusercontent.com/19891724/154829667-a84787b0-0104-4466-bb9e-9f586be66778.png">


## Environment Support

* Vue 3.2.x
* Vue 3.3
* Node >= 16.15.x

## Install

Run `pnpm i` to install the dependencies.
## Installation

Install node dependencies in all packages

```bash
pnpm i
pnpm install
```

## Run

Run `pnpm dev` to start the frontend dev server.
Local Development

```bash
pnpm dev
```

## Test

Unit Testing.
Unit Testing

```bash
pnpm test
```

Test code coverage.
Test code coverage

```bash
pnpm test:coverage
Expand All @@ -93,9 +74,3 @@ pnpm test:coverage
## 😎 Awesome

* [awesome-vite](https://github.com/pdsuwwz/awesome-vite)


## License

[MIT](./LICENSE) License | Copyright © 2020-PRESENT [Wisdom](https://github.com/pdsuwwz)

1 change: 0 additions & 1 deletion __tests__/hello.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { expect, test } from 'vitest'
import { mount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld/index.vue'

// https://stackoverflow.com/questions/56398742/eslint-throws-no-undef-errors-when-linting-jest-test-files
test('displays message', () => {
const wrapper = mount(HelloWorld, {
props: {
Expand Down
6 changes: 0 additions & 6 deletions guide.md

This file was deleted.

44 changes: 0 additions & 44 deletions jest.config.js

This file was deleted.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
"vite",
"jest",
"vue3-jest",
"vitest",
"typescript",
"admin",
"example",
Expand Down
Loading