Tic Tac Vue

Tic-Tac-Vue

Tic-Tac-Vue는 Vue, Vuex 및 Vue 라우터로 작성된 간단한 JavaScript 단일 페이지 응용 프로그램 (SPA)입니다. 그 목표는 VUE와 강력한 생태계를 배우고 자하는 초보자를위한 "사례 연구"가되는 것입니다.

온라인 데모 버전을 시도하려면 여기를 클릭하십시오.

내용 테이블

• 방법론
• 기술 기술
• 설치하다
• 용법

방법론

이 프로젝트에서 나는 두 가지 방법론을 채택하여 더 나은 사실이있는 코드와 정리 된 소스 파일 인 BEM 및 Atomic Design을 갖추 었습니다.

Bem

BEM (블록 요소 수정자를 의미 함)은 프론트 엔드 개발에서 재사용 가능한 구성 요소를 만드는 데 도움이되는 방법론입니다. 블록 , 요소 및 수정자를 사용하여 CSS 클래스를 분할하는 것입니다. 최종 DOM은 장점이 될 수 있지만, 더 나은 인사 소스 코드를 가질 것이며, CSS 클래스를 중첩 할 필요가 없기 때문에 CSS 번들이 덜 무거운 결과를 얻을 수 있습니다.

BEM으로 더 깊이 들어가려면 여기를 클릭하십시오.

원자 디자인

원자 디자인은 설계 시스템을 만드는 방법론입니다. 화학과 마찬가지로 원자 , 분자 및 유기체를 사용하여 구성 요소 파일 (이 시나리오 vue 단일 파일 구성 요소)을 구성 할 수 있습니다.

원자

원자는 물질의 기본 빌딩 블록입니다. 웹 인터페이스에 적용되는 원자는 양식 레이블, 입력 또는 버튼과 같은 HTML 태그입니다.

분자

분자는 함께 결합 된 원자 그룹이며 화합물의 가장 작은 기본 단위입니다.

유기체

유기체는 계면의 비교적 복잡하고 별개의 섹션을 형성하기 위해 함께 결합 된 분자 그룹입니다.

기술 기술

우선, VUE 문서를 살펴볼 것을 강력히 제안합니다.

• vue 핸들러
• vue 소품
• VUE 계산 속성
• vue 단일 파일 구성 요소
• Vuex State
• Vuex Getters
• Vuex 돌연변이
• vue 라우터

설치하다

TIC-TAC-VUE 프로젝트 클로닝을 설치할 수 있습니다.

 git clone https://github.com/Sanfra1407/tic-tac-vue.git

그런 다음 NPM 종속성을 설치하십시오.

 npm install

용법

이 프로젝트는 vite.js와 함께 개발되었으므로 자체 통합 CLI 명령을 사용하여 응용 프로그램을 미리 볼 수 있습니다.

데브 서버를 시작하십시오

 npm run dev

생산을 위해 컴파일하고 최소화합니다

 npm run build

구축 된 응용 프로그램의 미리보기

 npm run preview

라인 및 수정 파일

 npm run lint

배포

응용 프로그램을 배포하려면 공식 Vite.js 가이드를 팔로우 할 수 있습니다.