집 > 기사 > 웹 프론트엔드 > vue-cli 3.0.x에 대한 자세한 소개

vue-cli 3.0.x에 대한 자세한 소개

php中世界最好的语言원래의: 2018-04-28 15:33:241410검색

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

최근 프로젝트가 최적화되고 있습니다. 시간이 나면 vue-cli3.0.x 사용법을 살펴보았습니다. 꽤 기분이 좋습니다. 이전 프로젝트는 vue-cli 2를 사용하여 만들었기 때문에 eslint를 강제로 사용하는 것이 불편했습니다. 프로젝트와 관련 없는 일부 "빌드"와 "구성"이 사람들을 불편하게 만들었습니다. 기업 환경이 많기 때문에 테스트 환경 구성이 필요합니다. ""tt": "node build/tt-build.js""를 추가했습니다. 3.0.x에서는 어떻게 사용해야 하나요? 이러한 문제를 염두에 두고 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/'

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

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