diff --git a/.eslintrc.js b/.eslintrc.js index 6852415..8c253a2 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -4,7 +4,6 @@ module.exports = { browser: true, node: true, es2021: true, - jest: true, 'vue/setup-compiler-macros': true }, parser: 'vue-eslint-parser', diff --git a/README.md b/README.md index 5a78a91..9917669 100644 --- a/README.md +++ b/README.md @@ -5,72 +5,53 @@ [![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 图标 +* 支持 __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 图标 +* 内置全局 **window.$ModalXxxx** 插件, 支持使用 service 式地动态调用此插件来显示任意组件 * 路由鉴权已帮你封装好，同时配合 Nprogress, 只需要修改 permission.ts 文件即可 -* 自带一个模块化的组件开发环境，可按照 Modules 目录解耦页面组件、路由组件、样式等文件 -* 高度封装但不失灵活，内部抽象出了一个简单的业务流程供你参考(自由发挥)，涉及三个核心页面：登录、列表和明细 +* 自带一个模块化的组件开发环境，可按照 modules 目录解耦页面组件、路由组件、样式等文件 +* 高度封装但不失灵活，内部抽象出了一个完整的业务流程供你参考，涉及三个核心页面：登录、列表和明细 * 节省你配置的时间，因此该项目的**轻量化**致使你只需要专心编写自己的业务代码即可 ## Screenshot -image -image +image +image ## 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 @@ -78,13 +59,13 @@ pnpm dev ## Test -Unit Testing. +Unit Testing ```bash pnpm test ``` -Test code coverage. +Test code coverage ```bash pnpm test:coverage @@ -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) - diff --git a/__tests__/hello.spec.ts b/__tests__/hello.spec.ts index a427671..6fdedbe 100644 --- a/__tests__/hello.spec.ts +++ b/__tests__/hello.spec.ts @@ -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: { diff --git a/guide.md b/guide.md deleted file mode 100644 index 62ed955..0000000 --- a/guide.md +++ /dev/null @@ -1,6 +0,0 @@ -* 安装 naive-ui -* 安装 xicon 库 -```bash -pnpm add @vicons/fluent @vicons/ionicons4 @vicons/ionicons5 @vicons/antd @vicons/material @vicons/fa @vicons/tabler @vicons/carbon -pnpm add @vicons/utils -``` diff --git a/jest.config.js b/jest.config.js deleted file mode 100644 index 4b19017..0000000 --- a/jest.config.js +++ /dev/null @@ -1,44 +0,0 @@ -module.exports = { - testEnvironment: 'node', - testEnvironmentOptions: { - customExportConditions: [ - 'node', - 'node-addons' - ] - }, - - preset: 'ts-jest', - moduleFileExtensions: ['js', 'ts', 'vue'], - moduleNameMapper: { - '^@/(.*)$': '/src/$1', - '\\.(css|less|scss|sass)$': 'identity-obj-proxy', - '\\.(png|jpeg|jpg|gif)$': 'identity-obj-proxy', - '\\.(ttf|woff|woff2)$': 'identity-obj-proxy', - 'iconfont\\.js$': 'identity-obj-proxy' - }, - - testMatch: ['/__tests__/**/*.spec.ts'], - transformIgnorePatterns: ['/node_modules/'], - transform: { - '^.+\\.(js|ts)$': '@sucrase/jest-plugin', - '^.+\\.(vue)$': '@vue/vue3-jest' - }, - - coverageDirectory: 'coverage', - coverageReporters: ['html', 'lcov', 'text'], - coverageProvider: 'v8', - collectCoverageFrom: [ - // 'src/**/*.vue', - 'src/modules/**/components/*.vue', - 'src/components/**/*.vue' - // 'src/plugins/**/*.vue' - ], - coverageThreshold: { - global: { - branches: 40, - functions: 80, - lines: 90, - statements: 80 - } - } -} diff --git a/package.json b/package.json index dd3ea5d..b684d73 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "vite", "jest", "vue3-jest", + "vitest", "typescript", "admin", "example",