5가지 멋진 Vue.js 프로젝트 템플릿

주요 Vue 프로젝트를 시작하려고 하시나요? 견고한 기반에서 시작하려면 npm init 또는 vue init start에서 시작하는 대신 템플릿(보일러 플레이트, 스켈레톤, 스타터 또는 스캐폴딩이라고도 함)을 사용할 수 있습니다. .

많은 숙련된 개발자가 오픈 소스 템플릿 형식으로 고품질 Vue 애플리케이션을 구축하는 경험을 모았습니다. 이러한 템플릿에는 최상의 구성 및 프로젝트 구조, 최고의 타사 도구 및 기타 개발 모범 사례가 포함되어 있습니다.

유연성에 최적화된 Vue CLI 3와 달리 템플릿은 사용자 정의가 가능합니다. 따라서 개발 철학에 맞고 기본적으로 필요한 기능이 거의 동일한 제품을 선택하는 것이 중요합니다.

Vue 템플릿 선택 시 고려해야 할 사항은 다음과 같습니다.

• Webpack

• PWA

• 인증이 포함된 풀 스택

• 좋은 문서

• GraphQL

• 테스트

등.

훌륭한 Vue.js 템플릿이 많이 있지만 이 글에서는 새 프로젝트에 자주 필요한 주요 기능이 포함된 5가지 템플릿을 소개하겠습니다.

1. Webpack에 가장 적합

안정적인 Webpack 설정이 필요한 경우 Vue CLI 2에 포함된 Webpack 템플릿보다 더 나은 것을 찾지 마십시오. GitHub에 거의 7000개의 별이 있고 Vue 팀원이 개발하고 유지 관리하는 이 템플릿은 고도로 최적화된 웹팩 기반 SPA를 만들기 위한 최선의 선택입니다.

이 템플릿은 핫 리로딩, CSS 추출, Linting 및 단일 파일 구성 요소 로딩을 포함하여 Webpack과 해당 생태계의 다양한 최첨단 기능을 활용합니다. 또한 개발, 생산 및 테스트에 최적화된 개별 구성도 포함되어 있습니다.

Vue CLI 2의 일부로, 이것은 우리가 제공할 가장 주장이 적은 템플릿 중 하나이므로 서버 측 렌더링과 같이 필요한 추가 기능을 많이 포함하지 않습니다.

Webpack 템플릿이 너무 많다면 그 동생인 Webpack Simple 템플릿을 사용해 보세요.

링크: https://github.com/vuejs-templates/webpack

참고: 베타를 떠나는 Vue CLI 버전 3은 플러그인을 위해 템플릿 아키텍처를 포기했습니다. 이므로 이 템플릿은 기술적으로 인기가 없지만 Vue CLI 3을 사용하여 레거시 설정에서 계속 사용할 수 있습니다. Vue CLI 3: 프런트엔드 개발을 위한 판도를 바꾸는 기사에서 자세히 알아보세요.

2.

을 위한 최고의 PWA Vue Starter는 서버 렌더링 PWA를 위한 SPA 템플릿입니다. 여기에는 즉시 서버 측 렌더링(SSR)을 사용하도록 구성된 Vuex 및 Vue Router가 포함됩니다.

이 프로젝트는 SSR 및 서비스 덕분에 다국어 국제화 지원, Lighthouse 점수 90점 이상 등 배포하는 프로젝트가 처음부터 훌륭한 UX를 갖도록 많은 노력을 기울였습니다. 작업자 캐시.

또한 vue-meta를 사용하여 SEO용 문서 헤드 태그를 관리하고 SSR을 사용하면 JavaScript 콘텐츠를 지원하는 검색 엔진에서 페이지의 색인을 생성할 수 있습니다.

링크: https://github.com/devCrossNet/vue-starter

Demo: https://vue-starter.herokuapp.com

PWA를 구축하는 경우 또 다른 좋은 옵션은 VuePack입니다. 물론 Vue CLI 2 PWA 템플릿

3. 인증에 가장 적합

사용자 인증이 필요한 경우 Vue Express Mongo 샘플 파일을 확인하세요. 이 프로젝트는 Google, Facebook, Twitter 및 GitHub에 대한 사용자 등록 및 소셜 로그인을 포함하여 즉시 사용 가능한 인증을 갖춘 풀 스택 "MEVN" 웹 애플리케이션의 상용구를 제공합니다.

이 템플릿은 OAuth 2, 헬멧(보안 HTTP 헤더 추가) 및 입력 삭제를 위한 Express Validator를 사용하여 보안 모범 사례를 따릅니다. 또한 여러 원격 로깅 서비스에 대한 지원도 제공합니다.

데이터베이스로는 Mongoose와 MongoDB가 제공됩니다. 리포지토리에는 Docker 구성도 포함되어 있어 인스턴스를 쉽게 스핀업할 수 있습니다.

링크: https://github.com/icebob/vue-express-mongo-boilerplate

Demo: http://vemapp.moleculer.services/

팁: Laravel을 인증된 Vue 애플리케이션을 위한 백엔드의 경우 유사한 기능이 많이 포함된 Laravel Vue Boilerplate를 사용해 보세요.

4. 문서화에 가장 적합

많은 템플릿이 실패하는 이유는 문서화 부족 때문입니다. Vue Enterprise 상용구그렇지 않습니다. 이 프로젝트는 대부분의 Vue 문서를 작성한 Chris Fritz가 만들고 유지 관리하므로 잘 구성되어 있으며 Vue 모범 사례에 맞춰져 있습니다.

이 템플릿 문서의 가장 큰 장점은 포함된 내용뿐만 아니라 종종 포함되지 않은 내용과 그 이유도 설명한다는 것입니다. 예를 들어 Chris는 TypeScript, Babel 폴리필, Pug 등에 공통 템플릿이 없는 이유를 설명했습니다.

이 앱의 단순한 기본 페이지에 속지 마세요. 이 앱에는 많은 기능도 있습니다. 제가 가장 좋아하는 것 중 일부에는 테스트용 모의 API가 포함되어 있으며 구성 요소, 보기 및 레이아웃 설정을 위한 단위 테스트를 자동으로 추가할 수 있는 생성기가 포함되어 있습니다.

Vue Enterprise Boilerplate는 Vue CLI 3도 지원하므로 다른 Vue CLI 3 플러그인을 사용하여 프로젝트를 쉽게 확장할 수 있습니다.

링크: https://github.com/chrisvfritz/vue-enterprise-boilerplate

5. GraphQL에 가장 적합

GraphQL은 현재 큰 인기를 끌고 있으며 많은 개발자가 이를 사용하려고 합니다. 새로운 Vue 프로젝트에서 이를 사용합니다. Vue 템플릿이 많지는 않지만 GraphQL이 필요하다면 Vuexpresso를 꼭 확인하세요.

이 프로젝트는 GraphQL, Apollo 및 GraphQL 탐색을 위한 브라우저 내 IDE인 GraphiQL UI를 사용합니다. 또한 잘 구성된 Webpack 설정, Vuex 및 Vue Router가 제공됩니다. 또한 UI 구성 요소를 대화형으로 개발, 테스트 및 공유할 수 있는 Storybook도 제공됩니다.

Vuexpresso의 유일한 단점은 아직 상당히 새롭기 때문에 시간을 내어 Vuexpresso로 구축한 모든 앱을 철저하게 테스트하세요.

링크: https://github.com/Ethaan/vuexpresso

GraphQL을 지원하는 또 다른 상용구는 Friendly Vue Starter이며, 여기에는 Critical을 통해 추출된 중요 경로 CSS도 포함되어 있습니다.

관련 권장 사항: vue 튜토리얼

위 내용은 5가지 멋진 Vue.js 프로젝트 템플릿의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!