Umbraco UI 项目使用教程
Umbraco.UIUmbraco UI Components项目地址:https://gitcode.com/gh_mirrors/um/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
Umbraco.UIUmbraco UI Components项目地址:https://gitcode.com/gh_mirrors/um/Umbraco.UI