vue 프로젝트 명령 및 절차 구축

1. 준비 단계
준비 단 계 는 node, npm, webpack, vue - cli 를 포함 하여 프로젝트 환경 을 설정 합 니 다.이미 완 성 된 동 료 는 이 단 계 를 뛰 어 넘 어 두 번 째 단 계 를 볼 수 있다.
1. node 설치 또는 node 버 전 업데이트
① node. js 중국어 망 에서 nodejs 를 다운로드 하고 설치 하려 면 다운로드 .msi 의 32 / 64 비트 설치 패 키 지 를 클릭 한 다음 로 컬 파일 을 더 블 클릭 하여 설치 하면 된다.8.10 이상 버 전 설치 에 주의 하 세 요!② 첫 번 째 단 계 는 본 컴퓨터 nodeJs 버 전 을 살 펴 보 자. node.js 두 번 째 단 계 는 제거 node -v 의 node.js: cache 세 번 째 단계, 설치 sudo npm cache clean -f 도구 이다. 이 도 구 는 관리 n 버 전 을 전문 적 으로 사용 하 는 것 이다. 이 도구 의 이름 을 의심 하지 마라. 그 가 바로 그 사람 이다. 그의 이름 은 'n' node.js 네 번 째 단계 이 고 최신 버 전 을 설치 하 는 것 이다.sudo npm install -g n node.js 설치 완료 후 명령 행 도 구 를 열 고 입력 sudo n stable 하면 다음 과 같다.

liushenghua@liushenghuadeMacBook-Pro ~> node -v
v10.15.3
liushenghua@liushenghuadeMacBook-Pro ~> npm -v
6.4.1

npm 최신 버 전 업데이트 node -v2. 웹 팩 설치
주: 아래 의 모든 sudo npm install npm@latest -g 작업 은 국내 속도 가 느 리 고 심지어 실패 하기 때문에 타 오 바 오 미 러 npm 로 대체 할 수 있 습 니 다. 아래 의 모든 cnpm 명령 은 npm 로 대체 하면 됩 니 다. 방식 은 다음 과 같 습 니 다.해당 버 전 번호 가 나타 나 면 설치 에 성공 한 것 을 의미 합 니 다. 제 가 설치 할 때 다음 과 같은 상황 이 발생 합 니 다.

One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no):

솔 루 션 은 입력 cnpm 입 니 다. 설치 에 성공 한 후 웹 팩 - v 를 실행 하여 버 전 번 호 를 봅 니 다.
3. vue 비계 설치 vue - cli
위의 명령 행 도 구 를 계속 합 니 다. 다음은 오늘 의 주인공 을 설정 하 는 vue 비계 도구 npm install -g cnpm --registry=https://registry.npm.taobao.org 를 설치 하 는 것 입 니 다. 방법 과 같이 명령 행 npm install webpack -g 의 전체 설 치 를 입력 한 다음 webpack -v 주 를 입력 하 십시오. 대문자 - V 로 설치 여 부 를 검사 합 니 다. 다음 과 같 습 니 다.

liushenghua@liushenghuadeMacBook-Pro ~> vue -V
2.9.6

4. 소결 은 현재 주로 npm install webpack-cli -g, vue-cli, npm install vue-cli -g 와 vue -V 네 가지 도구 의 환경 설정 을 완성 하고 있 습 니 다. 버 전 번 호 는 다음 과 같 으 니 일치 하지 않 아 도 됩 니 다.

liushenghua@liushenghuadeMacBook-Pro ~> npm -v
6.4.1
liushenghua@liushenghuadeMacBook-Pro ~> node -v
v10.15.3
liushenghua@liushenghuadeMacBook-Pro ~> webpack -v
4.29.6
liushenghua@liushenghuadeMacBook-Pro ~> vue -V

프로젝트 구축
이 단 계 는 프로젝트 구축 및 관련 설정 을 설명 합 니 다. 프로젝트 생 성, 기본 설정 수정, 프로젝트 실행 세 모듈 을 포함 하여 스스로 읽 거나 건 너 뛸 수 있 습 니 다.
1. 프로젝트 생 성
명령 행 도 구 를 열 고 node 이 파일 디 렉 터 리 에 빈 폴 더 를 만 듭 니 다. 예 를 들 어 npm 아래 에 webpack, vue-cli, vue-cli, cd 을 만 듭 니 다.만 들 항목 이름 으로 바 꿀 수 있 습 니 다. 차 로 돌아 간 후 일련의 정 보 를 입력 하 라 고 요구 합 니 다. 대부분 차 로 돌아 가 생략 할 수 있 습 니 다. 설명 은 다음 과 같 습 니 다. 설명 이 없 는 리 턴 은 생략 하면 됩 니 다.

? Project name sunseavue//   
? Project description A Vue.js project//    
? Author Shenghua Liu //  
? Vue build standalone
? Install vue-router? Yes//    
? Use ESLint to lint your code? NO//   ESLint             
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) n
pm
   vue-cli · Generated "sunseavue".

마지막 선택 Desktop 또는 vueProject 은 설치 항목 의 모든 의존 패 키 지 를 자동 으로 실행 합 니 다. 선택 하지 않 으 면 직접 설치 하 는 것 도 같은 효과 입 니 다. 설치 절 차 는 1. cd Desktop 부터 프로젝트 경로, 2. 실행 mkdir vueProject, 3. 설치 가 완료 되 기 를 기다 리 면 됩 니 다.
2. 프로젝트 소개cd vueProject 이 항목 에 도착 하거나 폴 더 를 엽 니 다. 프로젝트 디 렉 터 리 와 설명 은 다음 과 같 습 니 다.

├── project //    
│  ├── build    //webpack    
│  │  ├── build.js  //      
│  │  ├── check-versions.js //    
│  │  ├── utils.js  //      
│  │  ├── vue-loader.conf.js    //  vue       
│  │  ├── webpack.base.conf.js  //webpack    
│  │  ├── webpack.dev.conf.js   //webpack      
│  │  ├── webpack.prod.conf.js  //webpack      
│  ├── config   //vue    
│  │  ├── dev.env.js    //      
│  │  ├── index.js  //    
│  │  ├── prod.env.js   //      
│  │  ├── test.env.js   //      
│  ├── node_modules //      
│  ├── src  //      
│  │  ├── assets    //        js\css\image\     
│  │  ├── components    //    
│  │  ├── router    //    
│  │  │  ├── index.js   //      
│  │  ├── App.vue   //   
│  │  ├── main.js   //    
│  ├── static   //    
│  ├── test //    
│  ├── .babelrc //babel  
│  ├── .editorconfig    //    
│  ├── .gitignore   //git      
│  ├── .postcssrc.js    //css    
│  ├── index.html   //  
│  ├── package-lock.json    //              npm package         
│  ├── package.json //    
│  ├── README.md    //    

3. 시작 항목
명령 행 도구 입력 vue init webpack name, 시작 에 성공 할 때 까지 잠시 기 다 립 니 다. 실패 하면 name 으로 의존 도 를 다시 설치 할 수 있 습 니 다.