# tsx-postcss-template

**Repository Path**: jingsheild/tsx-postcss-template

## Basic Information

- **Project Name**: tsx-postcss-template
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-06
- **Last Updated**: 2025-08-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# tsx-postcss-template

这是一个基于 Vue 3 + TypeScript + TSX + PostCSS 技术栈的设备控制台面板项目。

## 项目介绍

本项目是我首次尝试使用 Vue 3 结合 TSX 语法和 PostCSS 构建的现代化前端应用。项目采用 Vite 作为构建工具，提供了快速的开发体验和高效的构建性能。

## 技术栈

- **Vue 3**: 渐进式 JavaScript 框架
- **TypeScript**: JavaScript 的超集，提供静态类型检查
- **TSX**: TypeScript 的 JSX 语法扩展，用于 Vue 组件开发
- **PostCSS**: CSS 处理工具，支持 autoprefixer、pxtorem 等插件
- **Vite**: 新一代前端构建工具，提供快速的开发服务器和构建能力

## 推荐开发环境

[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (并禁用 Vetur 插件)

## TypeScript 支持

由于 TypeScript 默认无法处理 `.vue` 文件的类型信息，我们使用 `vue-tsc` 替代 `tsc` 进行类型检查。在编辑器中，需要安装 [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) 插件以支持 `.vue` 文件的类型提示。

## 项目配置

详细配置请参考 [Vite 配置文档](https://vite.dev/config/)

## 项目设置

### 开发环境编译和热重载

### 类型检查、编译和生产构建

### 运行单元测试 [Vitest](https://vitest.dev/)

### 代码检查 [ESLint](https://eslint.org/)

## 项目特点

- 使用 Vue 3 Composition API 和 TSX 语法开发组件
- 集成 PostCSS 进行 CSS 处理，支持 px 转 rem 等功能
- 采用现代化的 CSS 重置方案
- 配置了完整的开发、构建和测试流程
- 支持响应式设计和移动端适配