Umbraco UI 项目使用教程

Umbraco UI 项目使用教程

1. 项目的目录结构及介绍

Umbraco UI 项目的目录结构如下：

Umbraco.UI/
├── config/
│   ├── jspostcss.config.js
│   ├── staticwebapp.config.json
│   ├── tsconfig.json
│   ├── lint-staged.json
│   ├── turbo.json
│   ├── vite.config.ts
│   └── web-test-runner.config.mjs
├── src/
│   ├── components/
│   ├── styles/
│   ├── utils/
│   └── index.ts
├── tests/
├── .gitignore
├── .npmrc
├── .prettierrc
├── LICENSE
├── package.json
├── README.md
└── tsconfig.json

目录介绍：

• config/: 包含项目的各种配置文件。
  • jspostcss.config.js: PostCSS 配置文件。
  • staticwebapp.config.json: 静态 Web 应用配置文件。
  • tsconfig.json: TypeScript 配置文件。
  • lint-staged.json: lint-staged 配置文件。
  • turbo.json: Turbo 配置文件。
  • vite.config.ts: Vite 配置文件。
  • web-test-runner.config.mjs: Web Test Runner 配置文件。
• src/: 包含项目的源代码。
  • components/: 项目中的组件。
  • styles/: 项目的样式文件。
  • utils/: 项目的工具函数。
  • index.ts: 项目的入口文件。
• tests/: 包含项目的测试文件。
• .gitignore: Git 忽略文件配置。
• .npmrc: npm 配置文件。
• .prettierrc: Prettier 格式化配置文件。
• LICENSE: 项目许可证。
• package.json: 项目依赖和脚本配置。
• README.md: 项目说明文档。
• tsconfig.json: TypeScript 配置文件。

2. 项目的启动文件介绍

项目的启动文件是 src/index.ts。这个文件是项目的入口点，负责初始化项目和加载必要的组件。

// src/index.ts
import './components/MyComponent';
import './styles/main.css';

// 初始化逻辑

3. 项目的配置文件介绍

tsconfig.json

TypeScript 配置文件，定义了 TypeScript 编译选项。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist"
  },
  "include": ["src"]
}

vite.config.ts

Vite 配置文件，定义了 Vite 构建和开发服务器选项。

import { defineConfig } from 'vite';
import { resolve } from 'path';

export default defineConfig({
  root: resolve(__dirname, 'src'),
  build: {
    outDir: resolve(__dirname, 'dist'),
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'src/index.html')
      }
    }
  }
});

package.json

项目依赖和脚本配置文件。

{
  "name": "Umbraco.UI",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "test": "web-test-runner"
  },
  "dependencies": {
    "lit": "^2.0.0"
  },
  "devDependencies": {
    "vite": "^2.0.0",
    "web-test-runner": "^0.12.0"
  }
}

通过以上配置文件和目录结构，可以快速了解和启动 Umbraco UI