목차
1. 공사 준비
- VScode/HBuilder와 같은 프런트엔드 개발 도구
- node.js&npm 로컬 개발 환경
둘째, node.js 설치
1. 다운로드 및 설치
Node.js 공식 웹사이트: Node.js 공식 웹사이트
설치가 성공한 후 CMD 콘솔에 다음 두 명령을 입력하여 설치 성공 여부를 확인합니다.
#查看node版本
node -v
#查看npm版本
npm -v
2. 기본 설치 디렉터리 및 캐시 로그 디렉터리 구성
① 기본 설치 디렉터리와 캐시 로그 디렉터리를 생성합니다. (내 node.js 디렉터리는 D 드라이브에 있으므로 node.js 폴더 바로 아래에 생성합니다.)
설치된 모듈은 전역 설치 명령문을 실행할 때 기본적으로 C:\Users\username\AppData\Roaming\npm 디렉터리에 설치되므로 C 드라이브는 시간이 지남에 따라 쉽게 가득 차게 됩니다(C 드라이브는 이를 무시할 만큼 충분히 큽니다). 단계) 따라서 기본 설치 디렉터리와 캐시된 로그를 다른 드라이브 문자로 재구성하여 C 드라이브의 공간을 절약하십시오.
②.명령을 실행하여 방금 생성한 폴더에 기본 설치 디렉터리와 캐시 로그 디렉터리를 구성합니다.
npm config set prefix "D:\项目配件\Node\node_global"
npm config set cache "D:\项目配件\Node\node_cache"
3. 환경 변수 구성
①.win 키를 누르고 "시스템 환경 변수 편집"을 입력한 후 아래의 "환경 변수"를 열고 클릭합니다.
② 시스템 변수 아래에 새로운 NODE_PATH 변수를 생성하고 기본 설치 디렉터리인 node_global에 node_modules의 경로를 입력합니다.
D:\项目配件\Node\node_global\node_modules
③ 시스템 변수의 Path를 입력하고, node.js 설치 경로를 입력합니다.
D:\项目配件\Node\
④ 사용자 변수의 Path를 입력하고 node.js의 기본 모듈 호출 경로를 입력합니다.
D:\项目配件\Node\node_global
D:\项目配件\Node\node_cache
4. 타오바오 미러 구성
NPM을 이용하여 설치하시면 해외서버를 사용하여 타임아웃 오류가 자주 발생하는데, 국내 타오바오 미러로 수정하시면 설치속도를 높일 수 있습니다. Taobao NPM 미러는 완전한 npmjs.com 미러이며, 공식 서비스와의 동기화를 최대한 보장하기 위해 동기화 빈도는 현재 10분마다입니다.
① cnpm을 설치합니다.
npm install -g cnpm --registry=https://registry.npm.taobao.org
② 설치가 잘 되었는지 확인
cnpm config get registry
3. Vue 및 비계 설치
1. vue.js 설치
cnpm install vue -g
2. 설치가 성공적으로 완료되었는지 확인
cnpm info vue
3. 웹팩 모듈 설치
cnpm install webpack -g
4. webpack-cli 설치
cnpm install --global webpack-cli
5. vue-cli 3.x 설치
cnpm install @vue/cli –g
넷째, vue3 프로젝트를 생성합니다
관리자 권한으로 cmd 콘솔을 열고 프로젝트를 생성할 디렉터리를 입력한 후 프로젝트 생성을 시작합니다.
1. 프로젝트 생성
vue create [项目名称]
2. 설치 버전을 선택하세요
vue2
기본 설치 vue3
사용자 정의 설치 기본 설치
여기서는 세 번째 사용자 정의 설치를 선택합니다.
3. 프로젝트 요구사항 구성
[*는 프로젝트의 필요에 따라 선택을 나타냅니다. 빈 공간을 선택하고 Enter를 눌러 선택 후 확인]
Babel(코드를 이전 버전과 호환되도록 변환하는 JavaScript 컴파일러)
TypeScript(프로그래밍 언어, 대규모 프로젝트에 권장)
Progressive Web App(PWA) 지원-APP는
Router(라우팅)
Vuex(Vuex)
CSS 전처리기(css 전처리기) 처리를 사용합니다. )
린터/포매터(코드 스타일/포맷팅)
단위 테스트(단위 테스트)
E2E 테스트(e2e 테스트)
4. Vue 버전을 선택하세요
vue3 프로젝트를 만들고 싶기 때문에 여기서는 3.x를 선택합니다.
5. 히스토리 라우터 사용 여부
Vue-Router는 브라우저 자체의 해시 모드 및 히스토리 모드 기능을 활용하여 프런트엔드 라우팅을 구현합니다(브라우저에서 제공하는 인터페이스를 호출하여). hash
: 브라우저 URL 주소 표시줄의 # 기호(예: http:// www .abc.com/#/hello, 해시 값은 "#/hello"), 해시는 HTTP 요청에 포함되지 않으므로(백엔드에는 전혀 영향을 미치지 않음) 해시를 변경해도 페이지가 다시 로드되지 않습니다.
기록: HTML5 기록 인터페이스의 새로운 pushState( ) 및 replacementState( ) 메서드를 활용합니다(특정 브라우저 지원 필요). 단일 페이지 클라이언트 애플리케이션, 기록 모드에는 백그라운드 구성 지원이 필요합니다.
6. CSS 전처리기를 선택하세요
7. ESLint를 선택하세요
8. 추가 린트 기능 선택
저장 시 Lint가 Lint를 감지하고 저장
후 커밋 시 수정
9. Bable 및 ESLint 구성 위치
10. 기본 구성으로 저장할지 여부(예를 선택한 경우 기본 이름을 직접 만들어야 함)
11. 성공적으로 생성되었습니다
5. 프로젝트 시작
성공적인 생성 프롬프트에 따라 명령을 사용하여 프로젝트를 실행하십시오.
#项目运行
npm run serve
여섯, 디렉토리 구조 분석
