Vant vue-cli 4.x 에서 필요 에 따라 불 러 오기 동작

vue-cli 4.x 에서 vant 를 사용 하여 발생 한 문 제 를 기록 합 니 다.
1.필요 에 따라 불 러 오 려 면 babel-plugin-import 를 다운로드 하여 변환 해 야 합 니 다.babel-plugin-import 를 다운로드 하 십시오.
cnpm install babel-plugin-import -D
**2.루트 디 렉 터 리 에서 babel.config.js 파일 을 찾 아 필드 추가**

"plugins": [
  ["import",{
   "libraryName":"vant",
   "style":true
   }
  ]
 ]
          
module.exports = {
 presets: [
  '@vue/cli-plugin-babel/preset',
 ],
 "plugins": [
  ["import",{
   "libraryName":"vant",
   "style":true
   }
  ]
 ]
}

다음은 프로젝트 를 다시 시작 하 겠 습 니 다.
보충 지식:vue cli 3 vue cli 4 방법 절차 및 업그레이드 포인트 요약
공식 업그레이드영문 문서,중국어 문서는 상대 적 으로 낙후 되 었 다.
소개:vue cli 4 공식 업데이트 한 지 오래 되 었 습 니 다.지금 은 4.0.5 버 전 입 니 다.공식 문 서 를 보 니 20 여 개의 업데이트 가 있 습 니까?아니면 건어물 이 가득 합 니까?업그레이드 할 가치 가 있 습 니 다.다음은 업그레이드 절차 입 니 다.
1.우선,전역 에 최신 Vue CLI 를 설치 합 니 다.

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

설 치 된 버 전 검사
vue-V\#출력:@vue/cli 4.x.x 설명@vue/cli 4 설치 성공(vue cli 3 버 전 은 3.x.x 를 출력 합 니 다)
구덩이 밟 기 기록
npm install-g@vue/cli 실행 에 성 공 했 지만 vue-V 출력 을 실행 한 것 은 3.5.6(내 가 이전에 설치 한 버 전)입 니 다.
그래서 npm install-g@vue/cli 를 다시 실행 합 니 다.vue-V 출력 을 실행 한 것 은 3.5.6 입 니 다.
멍 한 얼굴 로 컴퓨터 를 다시 시작 하고 vue-V 출력@vue/cli 4.0.5 를 실행 하여 해결 합 니 다.
2.프로젝트 루트 디 렉 터 리 에서 실행
vue upgrade
그리고 나타 나

이 플러그 인 들 을 계속 업그레이드 하 는 것 을 알려 주 시 겠 습 니까?Y 를 입력 하면 됩 니 다.
3.2 단계 가 끝나 면 주로 2 개의 파일 이 수정 되 는 것 을 발견 할 수 있 습 니 다.
1.파일 babel.config.js
주로 babel 의 사전 설정 은@vue/app 에서@vue/cli-plugin-babel/preset 으로 바 뀌 었 습 니 다.
원래 의

module.exports = {
 presets: [
  '@vue/app', //   
  [
   '@babel/preset-env',
   {
    useBuiltIns: 'entry'
   }
  ]
 ]
}

레벨 업 후의

module.exports = {
 presets: [
  '@vue/cli-plugin-babel/preset', //   
  [
   '@babel/preset-env',
   {
    useBuiltIns: 'entry'
   }
  ]
 ]
}

2.파일 package.json(package-lock.json 도 변 경 됩 니 다)
주로 업그레이드 에 의존 합 니 다.
원래 의

{
 "@vue/cli-plugin-babel": "^3.11.0",
 "@vue/cli-plugin-eslint": "^3.11.0",
 "@vue/cli-service": "^3.11.0"
}

레벨 업 후의

{
 "@vue/cli-plugin-babel": "^4.0.5",
 "@vue/cli-plugin-eslint": "^4.0.5",
 "@vue/cli-service": "^4.0.5"
}

4.그리고 프로젝트 시작
npm run serve
그리고 아래 의 잘못 을 보고 하 세 요.

1.첫 번 째 오류(경고)
WARN A new version of sass-loader is available. Please upgrade for best experience.
이 줄 은 vue cli 4 가 자신의 의존 sas-loader 를 업그레이드 해서 생 긴 것 입 니 다.
이것 은 sas-loader 를^7.x.x 버 전에 서^8.0.0 으로 업 그 레이 드 했 고 제 프로젝트 에 서 는^7.1.0 을 사 용 했 습 니 다.
그 러 니까 자기 프로젝트 의 sas-loader 를 업그레이드 하면 돼 요.
아래 명령 을 실행 하면 됩 니 다.
npm i [email protected] -D
2.그리고 두 번 째 오 류 는 코어-js 가 설치 되 어 있 지 않다 고 합 니 다.
vue cli 4 는 core-js 를^2.x.x 버 전에 서^3.x.x 로 업그레이드 하 였 습 니 다.
그래서 설치 해 봤 어 요.
npm i core-js
그리고 프로젝트 를 다시 시작 해도 안 됩 니 다.공식 문 서 를 보 니 babel 과 관련 이 있 습 니 다.
main.js 코드 중
import '@babel/polyfill'
이 코드 숨 기기
다시 시작 할 게 요.
그리고@babel/poly fill 을 babel-poly fill 로 바 꾸 면 됩 니 다.
npm i babel-polyfill
main.js 코드 에서
import 'babel-polyfill'
5.vue cli 4 주요 업그레이드 포인트 요약
1."@vue/cli-plugin-babel","@vue/cli-plugin-esint","@vue/cli-service"는 v3 버 전에 서 v4 로 업그레이드 되 었 습 니 다.
2.sas-loader 는 v7 버 전에 서 v8 로 업그레이드 되 었 습 니 다.
3.core-js 는 v2 버 전에 서 v3 로 업그레이드 되 었 습 니 다.
4.webpack-chain 은 v4 버 전에 서 v6 로 업그레이드 되 었 습 니 다.
5.css-loader 는 v1 버 전에 서 v3 로 업그레이드 되 었 습 니 다.
6.url-loader 는 v1 버 전에 서 v2 로 업그레이드 되 었 습 니 다.
7.file-loader 는 v3 버 전에 서 v4 로 업그레이드 되 었 습 니 다.
8.copy-webpack-plugin 은 v4 버 전에 서 v5 로 업그레이드 되 었 습 니 다.
9.terser-webpack-plugin 은 v1 버 전에 서 v2 로 업그레이드 되 었 습 니 다.
10.@vue/cli-plugin-pwa 는 v3 버 전에 서 v4 로 업그레이드 되 었 습 니 다.
11.신규 플러그 인 vue add vuex vue add router
12.pug-plain 이 pug-plain-loader 로 바 뀌 었 습 니 다.
13.기본 디 렉 터 리 구조 가 변경 되 었 습 니 다.
src/store.js 를 src/store/index.js 로 변경
src/router.js 를 src/router/index.js 로 변경
14.호환성 때문에 router&router History Mode 옵션 preset.json 을 지원 합 니 다.
하지만 이 제 는 plugins:{'@vue/cli-plugin-router':{history Mode:true}를 사용 하 는 것 을 권장 합 니 다.
더 좋 은 일치 성 을 얻다
15.api.hasPlugin('vue-router')은 더 이상 지원 되 지 않 습 니 다.현재 api.hasPlugin('router')
16.lintOnSave 옵션 의 기본 값(지정 되 지 않 았 을 때)을 true 에서 default 으로 변경 합 니 다.
17.vue-cli-service 테스트 폐기:e2e
18.@vue/cli-plugin-e2e-nightwatch Nightwatch.js 가 0.9 에서 1.x 로 업그레이드 되 었 습 니 다.
19.@vue/cli-plugin-unit-mocha 에서 Mocha 6 로 업그레이드
20.@vue/cli-plugin-unit-jest jest 는 v23 에서 v24 로 업그레이드 되 었 습 니 다.
21.@vue/cli-plugin-type escript 더 좋 은 ts(x)지원,js(x)보다
참조 링크
vue cli 4 공식 영문 업그레이드 문서
이상 의 이 Vant 는 vue-cli 4.x 에서 필요 에 따라 불 러 오 는 작업 은 바로 편집장 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 많은 응원 을 바 랍 니 다.