vue-cli 3 비계 설정 및 사용 튜 토리 얼

이번 에는 vue-cli 3.0 설정 및 사용 에 대한 상세 한 설명 을 가 져 와 필요 한 친구 에 게 보 냅 니 다.
Vue CLI 는 Vue.js 를 기반 으로 빠 른 개발 을 하 는 완전한 시스템 으로 제공 합 니 다.

@vue/cli 를 통 해 상호작용 식 프로젝트 비 계 를 구축한다.

@vue/cli+@vue/cli-service-global 을 통 해 제로 프로 토 타 입 개발 을 빠르게 시작 합 니 다.

실행 시 의존(@vue/cli-service):풍부 한 공식 플러그 인 집합 으로 전단 생태 에서 가장 좋 은 도 구 를 통합 합 니 다.

승급 가능;

웹 팩 을 기반 으로 구축 되 고 합 리 적 인 기본 설정 이 있 습 니 다.

프로젝트 내 프로필 을 통 해 설정 할 수 있 습 니 다.

플러그 인 을 통 해 확장 할 수 있 습 니 다.

Vue.js 프로젝트 를 완전히 그래 픽 으로 만 들 고 관리 하 는 사용자 인터페이스 입 니 다.

Vue CLI 는 Vue 생태 에서 의 도구 기반 을 표준화 하 는 데 주력 하고 있다.이 는 각종 구축 도구 가 스마트 한 기본 설정 을 바탕 으로 안정 적 으로 연결 할 수 있 도록 확보 했다.그러면 며칠 동안 설정 문 제 를 고민 하지 않 고 응용 프로그램 을 작성 하 는 데 전념 할 수 있다.이 동시에 모든 도구 에 설정 을 조정 하 는 유연성 을 제공 하여 eject 가 필요 없다.
vue-cli 3 홈 페이지 는 vue-cli 3 의 특징 을 개술 해 주 었 다.개인 적 으로 vue-cli 3 를 사용 하 는 느낌 에서 제로 설정,업그레이드 가능 한 두 가지 특징 이 좋 습 니 다.
vue-cli 3 를 어떻게 설치 합 니까?
우선,nodejs 환경 이 있어 야 합 니 다.
Node 버 전 요구 사항
Vue CLI 는 Node.js 8.9 이상 버 전이 필요 합 니 다(8.11.0+추천).nvm 또는 nvm-windows 를 사용 하여 같은 컴퓨터 에서 여러 노드 버 전 을 관리 할 수 있 습 니 다.
그 다음 에 vue-cli 의 오래된 버 전 을 설치 했다 면 다음 과 같은 작업 을 해 야 합 니 다.
구 판본 에 대하 여
Vue CLI 의 가방 이름 은 vue-cli 에서@vue/cli 로 바 뀌 었 습 니 다.이전 버 전의 vue-cli(1.x 또는 2.x)를 전역 적 으로 설치 했다 면 npm uninstall vue-cli -g 또는 yarn global remove vue-cli 를 통 해 마 운 트 를 해제 해 야 합 니 다.
nodejs 환경 이 있다 고 가정 하면 다음 명령 을 통 해 vue-cli 3 가방 을 설치 할 수 있 습 니 다.

npm install -g @vue/cli
# OR
yarn global add @vue/cli 

설치 후 명령 행 에서 vue 명령 에 접근 할 수 있 습 니 다.vue 를 간단하게 실행 하여 사용 가능 한 모든 명령 에 대한 도움말 정 보 를 보 여 주 었 는 지 확인 할 수 있 습 니 다.(예 를 들 어 vue--version)
다음은 vue 프로젝트 를 만 드 는 것 입 니 다.다음 명령 을 사용 하 십시오.vue create hello-worldpreset 을 선택 하 라 는 힌트 를 받 을 것 입 니 다.기본 Babel+ESLint 설정 이 포 함 된 preset 을 기본 으로 선택 할 수도 있 고 필요 한 기능 을 선택 할 수도 있 습 니 다.

다 중 선택 시 빈 칸 은 선택 을 의미 하고 enter 는 다음 설정 항목 에 들 어 갑 니 다.
또한 수 동 으로 선택 한 설정 항목 은 컴퓨터 의~/vuerc 파일 에 저 장 됩 니 다.이렇게 하면 다음 에 vue 프로젝트 를 만 들 때 이전에 수 동 으로 설정 한 설정 을 선택 할 수 있 습 니 다.이 vue cli 3 는 매우 인성 화 되 었 습 니 다!좋아요!
위의 설정 을 선택 한 후 간단 한 vue 프로젝트 를 만 드 는 데 성 공 했 습 니 다.이때 당신 은 명령 행 cd hello-world 에서 hello-World 프로젝트 루트 에 들 어가 명령 행 에서 npm run serve 를 두 드 리 면 프로젝트 가 뛰 기 시작 합 니 다.
프로젝트 를 만 든 후의 디 렉 터 리 단 계 를 다시 한 번 말씀 드 리 겠 습 니 다.그림 연결:

한 명 씩:

Public 디 렉 터 리 는 ico 와 당신 의 index.html 를 설치 합 니 다.이 디 렉 터 리 블 로 거들 은 다른 서 류 를 추가 한 적 이 없어 요.낳 으 라 고 낳 으 라 고~~

src 이 디 렉 터 리 는 큰일 났 습 니 다.이것 은 우리 가 vue 프로젝트 를 개발 하 는 중점 디 렉 터 리 입 니 다.

1.assets 디 렉 터 리:

정적 파일 을 배치 합 니 다.예 를 들 어 그림,js,svg 의 js 등 이 있 습 니 다.이 디 렉 터 리 의 파일 은 생산 환경 에서 webpack copy 에 의 해 작 동 됩 니 다.
2.components 디 렉 터 리:공용 vue 구성 요소 페이지 설치
3.styles 디 렉 터 리:블 로 거 가 새로 추 가 했 습 니 다.reset.css 와 아 리 벡터 그림 글꼴 iconfont.css 를 재 작성 하 는 데 사 용 됩 니 다.
4.views 디 렉 터 리:블 로 거 는 확대 모듈 로 사 용 됩 니 다.로그 인 페이지,홈 페이지,등록 페이지 등등.
여러분 의 어린이 신발 에서 블 로 거들 이 당신들 보다 vue.config.js 파일 이 더 많은 것 을 발 견 했 는 지 모 르 겠 습 니 다.이 파일 은 더욱 심각 합 니 다.우리 전단 독립 개발 에 크로스 필드 문제 가 있 습 니 다.이전 vue-cli 2 의 proxy-table 등 설정 은 vue-cli 3 에서 어디 에 설정 되 었 습 니까?

// vue.config.js
module.exports = {
  //   ...
  baseUrl:"./",
  outputDir:"dist",
  assetsDir:"assets",
  indexPath:"index.html",
  filenameHashing:true,
  pages:undefined,
  lintOnSave:true,
  runtimeCompiler:false,
  transpileDependencies:[],
  productionSourceMap:false,
  crossorigin:undefined,
  integrity:false,
  devServer:{//  
    port:8086,
    proxy:'http://192.168.255.201:8082'
  }
}

총결산
위 에서 말 한 것 은 소 편 이 소개 한 vue-cli 3 비계 의 배치 와 사용 튜 토리 얼 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!