Qwind 는 Qwik + Tailwind CSS를 사용하여 웹사이트를 만들 수 있는 무료 오픈 소스 템플릿입니다. 새로운 프로젝트를 시작할 준비가 되어 있으며 모범 사례를 고려하여 설계되었습니다.
? https://qwind.pages.dev/
이 프로젝트에서는 QwikCity와 함께 Qwik을 사용하고 있습니다. QwikCity는 디렉터리 기반 라우팅, 레이아웃 등을 포함하여 전체 사이트를 더 쉽게 구축할 수 있도록 도와주는 Qwik 위에 추가되는 도구 세트입니다.
Qwind 템플릿 내부에는 다음 폴더와 파일이 표시됩니다.
/
├── adaptors/
| └── static/
| └── vite.config.ts
├── public/
│ ├── favicon.svg
│ ├── manifest.json
│ └── robots.txt
├── src/
│ ├── assets/
│ │ ├── images/
| | └── styles/
| | └── global.css
│ ├── components/
│ │ ├── atoms/
│ │ ├── core/
│ │ ├── icons/
| | └── widgets/
| | ├── Hero.tsx
| | ├── Features.tsx
| | └── ...
│ ├── content/
│ | └── blog/
│ | ├── post-slug-1.md
│ | ├── post-slug-2.md
│ | └── ...
│ ├── routes/
│ | ├── blog/
│ | ├── index.tsx
| | ├── layout.tsx
| | ├-- service-worker.ts
│ | └-- ...
│ ├── config.mjs
│ ├── entry.dev.tsx
│ ├── entry.preview.tsx
│ ├── entry.ssr.tsx
│ └── root.tsx
├── package.json
└── ...
src/routes
: layout.tsx
레이아웃 파일의 계층 구조와 index.tsx
파일을 페이지로 포함할 수 있는 디렉터리 기반 라우팅을 제공합니다. 또한 index.ts
파일은 엔드포인트입니다. 자세한 내용은 라우팅 문서를 참조하세요.
src/components
: 컴포넌트에 권장되는 디렉토리입니다.
public
: 이미지와 같은 모든 정적 자산을 public 디렉터리에 배치할 수 있습니다. 자세한 내용은 Vite 공개 디렉토리를 참조하세요.
노련한 qwik 전문가? 이 파일을 삭제하세요.
config.mjs
및 내용을 업데이트합니다. 재미있게 보내세요!
모든 명령은 프로젝트 루트의 터미널에서 실행됩니다.
명령 | 행동 |
---|---|
npm install | 종속성을 설치합니다. |
npm run dev | 127.0.0.1:5173/ 에서 로컬 개발 서버를 시작합니다. |
npm run build | 프로덕션 사이트를 ./dist/ 로 구축하세요. |
npm run preview | 배포하기 전에 로컬에서 빌드 미리보기 |
npm run fmt | Prettier로 코드 형식 지정 |
npm run lint | Eslint 실행 |
npm run qwik ... | qwik add , qwik build 와 같은 CLI 명령 실행 |
기본 구성 파일: ./src/config.mjs
export const SITE = {
name : "Example" ,
origin : "https://example.com" ,
basePathname : "/" , // Change this if you need to deploy to Github Pages, for example
trailingSlash : true , // Generate permalinks with or without "/" at the end
} ;
다음을 사용하여 최적화된 프로덕션 빌드를 만들 수 있습니다.
npm run build
이제 웹사이트를 배포할 준비가 되었습니다. 생성된 모든 파일은 dist
폴더에 있으며, 이 폴더를 원하는 호스팅 서비스에 배포할 수 있습니다.
자신의 GitHub 계정에서 이 저장소를 복제하고 Netlify에 배포합니다.
자신의 GitHub 계정에서 이 저장소를 복제하고 Vercel에 배포합니다.
아이디어나 제안이 있거나 버그를 발견한 경우 자유롭게 토론이나 문제를 열거나 끌어오기 요청을 작성하세요. 이는 우리 모두에게 매우 유용할 것이며 우리는 기꺼이 듣고 조치를 취할 것입니다.
처음에는 onWidget에 의해 생성되고 기여자 커뮤니티에 의해 유지관리됩니다.
Qwind 는 MIT 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 LICENSE 파일을 참조하세요.