diff --git a/README.md b/README.md index dfab9a0..dd90c04 100644 --- a/README.md +++ b/README.md @@ -1,103 +1,15 @@ -# varlet-app-template +# varlet-theme-builder English | -中文 +中文 ### Intro -varlet-app-template is an out-of-the-box lightweight mobile web template, developed based on `Vue3`, `Varlet`, `Vite`, `Typescript`. +varlet-theme-builder is a theme builder for generating [varlet](https://github.com/varletjs/varlet-theme-builder) theme variables. Intelligently derive color matching that matches the design system through product theme colors or product images. The algorithm comes from [material-foundation](https://github.com/material-foundation/material-color-utilities) -### License +### Preview Address -This project is based on the `MIT` license - -### Features - -- ⚡️   Developed based on `Vue3`, `Varlet`, `Vite`, `Typescript` -- 📦   Automatic and on-demand import of built-in component libraries and third-party libraries -- 🗂   Built-in stack routing navigation similar to native apps -- 🗂   Built-in conventional routing based on file directory structure -- 🌍   Built-in application-level internationalization -- 📦   Built-in request library integrated, support composition api -- 📦   Built-in theme customization -- 📦   Built-in mobile debugging tool -- 📦   Built-in `pinia` for state management -- 📦   Built-in `mockjs` for data mocking -- 📦   Built-in `vitest` for unit testing -- 📦   Built-in `cypress` for e2e testing -- 📦   Built-in `unocss` integration -- 📦   Built-in `eslint`, `commitlint`, `lint-staged`, `prettier` and other code checking/formatting tools -- 💪   Officially maintained by `varletjs`, the first party provides support for `varlet` - -### Page Preview Address - -https://varletjs.github.io/varlet-app-template - -### Install And Use - -#### Get Project - -[Create a repository from this template repository](https://github.com/varletjs/varlet-app-template/generate) - -or - -```shell -git clone https://github.com/varletjs/varlet-app-template.git -``` - -#### Install Dependencies - -```shell -pnpm install -``` - -#### Start the development environment - -```shell -pnpm dev -``` - -#### Build - -```shell -pnpm build -``` - -#### Preview - -```shell -pnpm preview -``` - -#### Lint Code - -```shell -pnpm lint -``` - -#### TS type checking - -```shell -pnpm type-check -``` - -#### Code Formatting - -```shell -pnpm format -``` - -#### Running unit tests - -```shell -pnpm test -``` - -#### Run unit tests and generate test reports - -```shell -pnpm test:coverage -``` +https://varletjs.github.io/varlet-theme-builder ### Community @@ -111,8 +23,8 @@ We recommend that `issue` be used for problem feedback, or others: ### Thanks to contributors - - + + ### Thanks to the following sponsors diff --git a/README.zh-CN.md b/README.zh-CN.md index 24fb765..6a35da8 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -1,103 +1,15 @@ -# varlet-app-template +# varlet-theme-builder -English | +English | 中文 ### 介绍 -varlet-app-template 是一个开箱即用的轻量化移动端 Web 模板，基于 `Vue3`、 `Varlet`、 `Vite`、`Typescript` 开发。 - -### 协议 - -本项目基于 `MIT` 协议 - -### 特性 - -- ⚡️   基于 `Vue3`、 `Varlet`、 `Vite`、`Typescript` 开发 -- 📦   内置组件库和常用第三方库的自动引入和按需引入 -- 🗂   内置与原生应用类似的堆栈路由导航 -- 🗂   内置基于文件目录结构的约定式路由 -- 🌍   内置应用级国际化 -- 📦   内置请求库封装，拥抱 composition api -- 📦   内置主题定制 -- 📦   内置移动端调试工具 -- 📦   内置 `pinia` 进行状态管理 -- 📦   内置 `mockjs` 进行数据 mock -- 📦   内置 `vitest` 进行单元测试 -- 📦   内置 `cypress` 进行端到端测试 -- 📦   内置 `unocss` 集成 -- 📦   内置 `eslint`、`commitlint`、`lint-staged`、`prettier` 等代码检查/格式化工具 -- 💪   由 `varletjs` 官方维护，第一方提供对 `varlet` 的支持 +varlet-theme-builder 是一个用于生成 [varlet](https://github.com/varletjs/varlet-theme-builder) 主题变量的主题生成器。通过产品主题色或产品图片智能推导出符合设计系统的配色。算法来自 [material-foundation](https://github.com/material-foundation/material-color-utilities) ### 预览地址 -https://varletjs.github.io/varlet-app-template - -### 安装使用 - -#### 获取项目 - -[通过该模板仓库创建一个你的仓库](https://github.com/varletjs/varlet-app-template/generate) - -或 - -```shell -git clone https://github.com/varletjs/varlet-app-template.git -``` - -#### 安装依赖 - -```shell -pnpm install -``` - -#### 启动开发环境 - -```shell -pnpm dev -``` - -#### 构建打包 - -```shell -pnpm build -``` - -#### 预览 - -```shell -pnpm preview -``` - -#### 代码检查 - -```shell -pnpm lint -``` - -#### TS 类型检查 - -```shell -pnpm type-check -``` - -#### 代码格式化 - -```shell -pnpm format -``` - -#### 运行单元测试 - -```shell -pnpm test -``` - -#### 运行单元测试并生成测试报告 - -```shell -pnpm test:coverage -``` +https://varletjs.github.io/varlet-theme-builder ### 反馈和交流 @@ -111,8 +23,8 @@ pnpm test:coverage ### 感谢贡献者们做出的努力 - - + + ### 感谢以下赞助者 diff --git a/build/env.ts b/build/env.ts deleted file mode 100644 index fbac1de..0000000 --- a/build/env.ts +++ /dev/null @@ -1 +0,0 @@ -export const isProduction = () => process.env.NODE_ENV === 'production' diff --git a/build/extendRoute.ts b/build/extendRoute.ts deleted file mode 100644 index 3af8d29..0000000 --- a/build/extendRoute.ts +++ /dev/null @@ -1,26 +0,0 @@ -export interface StackRoute { - name: string - children?: StackRoute[] -} - -export function extendRoute(route: any) { - const stacks = (route.meta?.stacks ?? []) as StackRoute[] - - const processStacks = (route: any, stacks: StackRoute[]) => { - stacks.forEach((stack) => { - const newRoute = { - name: `${route.name}-${stack.name}`, - path: stack.name, - component: `/src/stacks/${stack.name}.vue` - } - route.children ??= [] - route.children.push(newRoute) - - if (stack.children) { - processStacks(newRoute, stack.children) - } - }) - } - - processStacks(route, stacks) -} diff --git a/e2e/App.vue.spec.ts b/e2e/App.vue.spec.ts deleted file mode 100644 index 99abc50..0000000 --- a/e2e/App.vue.spec.ts +++ /dev/null @@ -1,8 +0,0 @@ -it('test basic navigation for mobile', () => { - cy.visit('/') - cy.title().should('eq', 'Varlet App Template') - cy.url().should('eq', 'http://localhost:10086/#/layout/home') - - cy.get('.var-card').first().click() - cy.url().should('eq', 'http://localhost:10086/#/layout/home/detail') -}) diff --git a/tests/components/AppBack.vue.spec.ts b/tests/components/AppBack.vue.spec.ts deleted file mode 100644 index 6bd497b..0000000 --- a/tests/components/AppBack.vue.spec.ts +++ /dev/null @@ -1,9 +0,0 @@ -import AppBack from '@/components/AppBack.vue' -import { mount } from '@vue/test-utils' -import { expect, it } from 'vitest' - -it('test AppBack mount', () => { - const wrapper = mount(AppBack) - - expect(wrapper.html()).toMatchSnapshot() -}) diff --git a/tests/components/__snapshots__/AppBack.vue.spec.ts.snap b/tests/components/__snapshots__/AppBack.vue.spec.ts.snap deleted file mode 100644 index e9d44ee..0000000 --- a/tests/components/__snapshots__/AppBack.vue.spec.ts.snap +++ /dev/null @@ -1,9 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`test AppBack mount 1`] = ` -"" -`; diff --git a/tests/setup.ts b/tests/setup.ts deleted file mode 100644 index 1ced638..0000000 --- a/tests/setup.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { config } from '@vue/test-utils' -import { vi } from 'vitest' - -config.global.mocks = { - $t: (key: string) => key -} - -vi.mock('vue-router', () => ({ - useRouter: () => ({ - router: { - back: () => {}, - push: () => {}, - replace: () => {} - } - }) -})) diff --git a/vite.config.ts b/vite.config.ts index e768e21..31fb814 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -8,11 +8,10 @@ import unoCSS from 'unocss/vite' import { fileURLToPath, URL } from 'node:url' import { VarletImportResolver } from '@varlet/import-resolver' import { defineConfig } from 'vitest/config' -import { isProduction } from './build/env' // Use as needed // import eruda from 'vite-plugin-eruda' -import { analyzer } from 'vite-bundle-analyzer' +// import { analyzer } from 'vite-bundle-analyzer' export default defineConfig({ base: './', @@ -32,10 +31,6 @@ export default defineConfig({ target: ['ios12'] }, - esbuild: { - drop: isProduction() ? ['console', 'debugger'] : [] - }, - test: { environment: 'jsdom', coverage: { @@ -84,9 +79,9 @@ export default defineConfig({ progress(), - unoCSS(), + unoCSS() - analyzer() + // analyzer() // eruda() ] })