vue-cli 3.0.x 사용 단계에 대한 자세한 설명

이번에는 vue-cli 3.0.x 사용단계에 대한 자세한 설명을 가져왔습니다. vue-cli 3.0.x 사용시 주의사항은 무엇인가요?

1. 공식 홈페이지 정보

기술을 배울 때는 항상 공식 홈페이지 정보를 확인하세요. 그곳의 정보가 가장 빨리 업데이트되기 때문이죠.
vue-cli
vue-cli document

2. InstallationEnvironment

여기에 npm install -g @vue/cli 및 Yarn global add @vue/cli를 사용하는 것이 좋습니다. 다른 작업도 완료해야 하며 설정도 몇 분 안에 일부 파일을 삭제 생성했습니다.

npm install -g @vue/cli
# or
yarn global add @vue/cli
# 使用vue命令，创建项目(不同于cli2.0的init，create)
vue create my-project

yarn global add @vue/cli를 사용하여 설치하는 경우 디렉터리를 입력해야 합니다. 실행

yarn // 安装项目依赖
cd packages/@vue/cli // 目录
yarn link //添加 link `vue` 执行指命 。
vue create my-project // 创建项目 。

3. 다중 환경 구성

회사에는 개발 환경, 테스트 환경, 공동 디버깅 환경, 온라인 환경이 있기 때문입니다. 수동 구성을 줄이고 한 번에 구성하십시오. 따라서 2.0.x에서는 "package.json "tt": "node build/tt-build.js"" 유형의 구성이 추가되어 많은 파일을 구성할 수 없었습니다. vue-cli 3.0.x에서는 ".env" 파일 구성이 지원됩니다. 여기에 ".env.development", ".env.production" 및 ".env.test" 구성을 추가했습니다.

1. 기본 대응 및 기본값

  development is used by vue-cli-service serve
  production is used by vue-cli-service build
  test is used by vue-cli-service test

2. 구성 지정부터 시작

다른 구성을 추가하려면 아래 구성을 지정해야 합니다.

"dev-build": "vue-cli-service build --mode development",

3.".env "구성 파일Write

구성 파일 내용 형식은 다음과 같습니다.

 VUE_APP_*

예: ".env.production" 내용은 다음과 같습니다

VUE_APP_MOCK_URL = 'https://xxx.xxx.xxx/restapi/'

4.

 console.log(process.env.VUE_APP_MOCK_URL);
process.env.NODE_ENV // 特定
BASE_URL // vue.config.js 配置

읽으셨을 거라 믿습니다. 이 기사의 경우 방법을 마스터하셨으니 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목해 보세요!

추천 자료:

사용자 정의 라이브러리를 개발하는 방법

JS를 사용하여 재계산을 위해 여러 배열을 병합하는 방법

위 내용은 vue-cli 3.0.x 사용 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!