/vite-react-windicss-starter

Primary LanguageTypeScript

vite-react-windicss-starter

快速创建基于 vite+pnpm+typescript 的 Monorepo

项目结构

vite-react-windicss-starter
├── REACME.md // 项目简介
├── docs // Package 使用文档
├── package.json // 项目依赖
├── packages // packages
├── pnpm-lock.yaml // pnpm 生成的 lock 文件
├── pnpm-workspace.yaml // pnpm workspace 配置文件
├── tsconfig.base.json // tsconfig 基础配置
├── tsconfig.eslint.json // eslint tsconfig 配置
├── tsconfig.json // 项目 tsconfig 配置
└── windi.config.ts // windicss 配置

初始化项目

git clone https://github.com/umeimmense/vite-react-windicss-starter.git
npm install -g pnpm
pnpm install
pnpm start:package-template

安装依赖

仅支持 PNPM 包管理器

  • 全局安装第三方包
pnpm add -w <package-name>
  • package 内安装依赖
// @web/package-template 为package中的package
pnpm add <package-name> --filter  @web/package-template
  • 安装本地包
// @web/package-template 为package中的package
pnpm install "@web/components@*" -r --filter @web/package-template

内置工具方法（package/common）

//  引入
import { useSimpleJsonQuery } from '@web/common';

const { copy, setCopy, value, setValue, syncValue } = useSimpleJsonQuery({
  key: '',
});

setCopy('key', updateValue);
setValue((draft) => {
  draft.key = updateValue;
});

更多内置方法请看

通用组件（package/component）

import { Page } from '@web/components';

export const Demo = () => {
  return <Page></Page>;
};

代码格式化

内置 ESLint + prettier 可进行代码格式化

Eslint

prettier

tsconfig 配置说明

项目依赖

构建

react 相关

工具方法

网络请求