VsCode 새 Vuejs 프로젝트 의 상세 한 절차

본 고 는 VsCode 의 새로운 VueJs 를 소개 하고 여러분 에 게 공유 합 니 다.구체 적 으로 다음 과 같 습 니 다.
vue-cli 빠 른 구축 프로젝트 사용 하기
(vue-cli 는 vue.js 의 비계 로 vue.js 템 플 릿 프로젝트 를 자동 으로 생 성 하 는 데 사 용 됩 니 다.vue-cli 를 설치 하기 전에 vue 와 webpack 을 설치 해 야 합 니 다)

・ node -v //(     ：bash: npm: command not found)
・ npm -v 
//           node npm
・   vue，//  vue      
・   vue list  // vue       npm install vue

npm install -g vue-cli            
//    vue-cli
 vue init webpack projectName    
//      projectName   ，      projectName      （         ）
//     ，webpack         ，         ，     vue init webpack#1.0 ***    。

설치 할 때 물 어 볼 게 요:
①、Project name (sanfeng1)；프로젝트 이름(sanfeng 1).(엔 터 를 누 르 시 겠 습 니까?N 을 누 르 시 겠 습 니까?)
②、 Project description (A Vue.js project)；프로젝트 설명(vue.js 프로젝트).(간단 한 소 개 를 영어 로 마음대로 입력 하 세 요)
③、Author (sunsanfeng)；저자엔 터 를 누 르 시 겠 습 니까?N 을 누 르 시 겠 습 니까?)
④、Vue build (Use arrow keys)> Runtime + Compiler: recommended for most usersRuntime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render 　　　　　　　　functions are required elsewhere；Vue 회사 의 설립(화살표 키 사용)>실행 시+컴 파일 러:대부분의 사용자 들 은 실행 시간 을 추천 합 니 다.약 6kb 경 민+gzip 이지 만 템 플 릿(또는 그 어떠한 Vue 구체 적 인 HTML)은 사용 할 수 있 습 니 다.VUE 파일 렌 더 링 기능 은 필수 적 인 다른 곳 입 니 다.(엔 터 를 누르다
⑤、Install vue-router? (Y/n)；설 치 된 경로?(/N）。（코코아
⑥、Use ESLint to lint your code? (Y/n)；ESlint 문법 사용?(Y/ N）。（ESLint 문법 을 사용 하려 면 마음의 준 비 를 해 야 합 니 다.ESLint 문법 을 잘 모 르 면 곳곳에 잘못 보고 하고 미 치 게 됩 니 다.N)
⑦、Setup unit tests with Karma + Mocha? (Y/n)；유닛 테스트 설정?(Y / N）。（선 N)
⑧、Setup e2e tests with Nightwatch? (Y/n)；Nightwatch 에서 끝까지 테스트 를 만 듭 니까?(Y / N）。（선 N)

cd projectName
// ctrl+c                         
npm install                   
//       
npm run dev     
//    
//      http://localhost:8080，         。

하지만 이 건 로 컬 에서 만 뛸 수 있 습 니 다.저희 서버 에 어떻게 접근 하 시 겠 습 니까?
이 때 실행 해 야 합 니 다:

・ npm run build
//       ，     dist ，    index.html，                            。

메모:타 오 바 오 미 러 문 구 는 설치 후 npm 속도 가 빠 릅 니 다.사용 할 때 npm 를 모두 cnpm 로 바 꾸 기만 하면 됩 니 다.

$ npm install -g cnpm Cregistry=https://registry.npm.taobao.org

//or #      cnpm         bug           npm       
$ npm install Cregistry=https://registry.npm.taobao.org

그러나 문 제 는 index.html 에서 인용 한 css 와 js 의 인용 경로 가 잘못 되 었 다 는 것 을 발 견 했 습 니 다.이 럴 때 설정 을 수정 해 야 합 니 다.
config/index.js
원래 설정 의 참조 경 로 는?

내 가 변경 할 게.

이렇게 하면 정상적으로 방문 할 수 있다.

tips:
1.npm 를 설치 하 는 몇 가지 방법:

$ npm i  
$ cnpm i  
$ npm i cnpm -g （cnpm  ）  
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
//[    ](http://riny.net/2014/cnpm/)，    

2.어떻게 npm 를 최신 버 전 으로 업데이트 합 니까?

npm install -g npm

//  ，        npm    
//npm -v
//          。
//npm        update，          ：
//npm update [-g] [<pkg>...]
//         ：
//npm update -g npm
//       。

마지막 으로 npm 홈 페이지 로 갑 니 다.
다음 명령 을 사용 하 는 것 을 발견 하 였 습 니 다:

npm install npm@latest -g //    npm     

그 중에서@기호 뒤에 업데이트 하고 싶 은 버 전 번 호 를 추가 할 수 있 습 니 다.
3.vue 프로젝트 실행:
$npm run dev 또는 vsCode 통합 터미널 입력 이상 명령 보기

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.