왜 vue-cli 비계를 사용합니까?vue-cli3.0의 장점은 어디에 있습니까?

vue-cli3은 vue-cli에 비해 중요한 업데이트가 많다.
먼저 vue-cli 이 공구들의 취지를 말해 보자. 이 공구들은 개발자가 상자를 열고 바로 응용 개발을 신속하게 진행할 수 있도록 개발한 것이다. 그들은'약속이 설정보다 크다'는 사상을 계승한다. 쉽게 말하면'설정하지 않으면 배치하지 않는다. 너는 내 방식대로 해라. 이 좋고 나쁨을 논쟁하지 말고 업무 개발을 빨리 하는 것이 정당한 일이다'는 것이다.그것들은 네가 배치하는 것을 건의하지 않지만, 네가 배치하는 것을 막지는 않을 것이다.
또한 Webpack은 초보자에게 친절하지 않고'길고 구리다'는 설정으로 일반 개발자들은 정의가 양호하고 성능이 최적화된 설정을 쓰기 어렵다.그렇지 않으면 파라셀,create-react-app 등 각종 cli 도구가 나오지 않을 것이다.이 도구들은 개발자들이 코드 개발을 즐겁게 할 수 있도록 제로 설정을 선언했다.
이제 Vue-cli v3의 개선과 이런 것들이 어떤 의미가 있는지 생각해 봅시다.
 
1. cli 서비스층 분리
Create-React-App은 이런 일을 처음 한다.vue-cli3 라이브러리에는 다음 두 개의 모듈이 포함되어 있습니다.

CLI: 즉 vue 전역 명령으로 프로젝트 창설과 관리에 주로 사용되며 vue create,vue ui 명령을 포함한다.CLI 명령은 적게 실행되므로 업데이트가 자주 수행되지 않습니다

.

서비스 층: 프로젝트의 실제 구축, 즉 웹 패키지 프로젝트 구축을 책임진다.이 부분은 빈번하게 업데이트되는 것으로 일반적으로 프로젝트의 국부적인 의존이다.

 
오케이, 이렇게 하는 게 무슨 의미가 있지?이런 장면을 고려하면 이것도 답주가 만나기 전에 겪은 아픔이다.
vue-cli3 이전에는 구축 CLI가 아니었고 대부분이 템플릿 복사기였다. 모든 웹 패키지 설정과 구축 명령은 구체적인 프로젝트에 결합된 패키지였다.제이슨은 많은 개발 의존을 포함할 것이다.
웹 패키지나 관련 도구 업데이트에 따라가는 친구들은 업그레이드가 쉽지 않다는 것을 느낄 수 있다.예를 들어babel-loader를 업그레이드하면 웹 패키지까지 업그레이드해야 할 수도 있고 웹 패키지를 업그레이드하면 다른 도구가 호환되지 않을 수도 있습니다.
업그레이드의 문제점은 그 중 하나다.만약 당신의 팀이 많은 프로젝트를 유지해야 한다면, 당신은 어떻게 이런 프로젝트에 대해 유지보수와 업그레이드를 진행합니까?항목마다 복사해 볼까요?만약 어떤 항목이 특수 설정을 했다면?
팀의 입장에서 볼 때 프로젝트 구축은 가능한 한 통일되고 바보화되어야 한다. 이 방면에 너무 많은 정력을 들일 필요가 없고 이런 일을 잘하는 사람에게 하청을 주어야 한다.
또한 업데이트를 배척하지 마세요. 업데이트는 더 좋은 개발 체험과 구축 속도, 운행 성능을 얻을 수 있고 다른 사람들이 당신보다 이 방면에 대해 더 많이 알고 있습니다.
vue-cli-s 서비스를 분리한 후 프로젝트 구축 업데이트는 많은 특수화 작업을 하지 않은 한 명령일 뿐입니다.특수화 작업은 vue-cli의 플러그인에 봉인해야 합니다.이것은 vue-cli3의 또 다른 특색인 플러그인을 끌어냈다
 
2. 플러그인화
create-react-app에 비해 vue-cli는 너무 인자하다.vue-cli의 플러그인 메커니즘은 매우 유연하여 webpack-chain와webpack-merge를 통해 웹 패키지를 완전히 맞춤형화할 수 있다.
시중에서 유행하는 cli 도구의 확장성을 비교해 볼 수 있습니다.
 
Vue CLI
create-react-app
parcel
빠른 원형 개발
뒷받침
-
뒷받침
전역 모드
제로 프로비저닝 원형 개발은 전역적이다
-
뒷받침
플러그 인
뒷받침
-
지원, 확장 파일 유형 및 파일 출력
확장성
강력, 플러그인으로 wepack 설정 확장
약, 강약정, 웹 패키지를 설정할 수 없음, eject를 사용할 수 있음, 그리고 수동으로 설정할 수 있음;babel-macro 지원하기;(엄밀히 말하면react-app-rewired를 통해 확장할 수 있다)
중(babel,postcss,Typescript를 구성할 수 있음);에서는 Node API를 제공합니다.플러그인 확장 파일 형식 지원
다중 페이지
뒷받침
-
뒷받침
적용 범위
Vue 구성 요소의 첫 번째 시민입니다.확장을 통해 모든 프런트엔드 프레임워크 지원
React 개발을 위한 추가 프레임워크는 지원되지 않음
parcel은 일반적인 패키지 도구로 경쟁 상대는 웹 패키지이다
컴파일 속도
cache-loader, thread-loader를 사용하여 JS 및 TS 컴파일 속도 향상
babel-loader가 캐치를 켰어요.
컴파일 속도는 웹 패키지의 두 배라고 불린다
업그레이드 가능
클라이언트 서비스 업그레이드를 지원합니다. 플러그인은 단독 업그레이드가 필요하며, 플러그인은 의미화된 버전이 필요합니다.너무 많은 플러그 인이 업그레이드 위험
react-script 업그레이드 지원, 공식 유지보수 및 기본 호환성 보장
업그레이드 Parcel-bundler 지원
UI
그래픽 관리는 CLI의 특징 중 하나입니다.
-
-
vue-cli의 플러그인 구현 메커니즘에 대해 이 글을 볼 수 있습니다.
vue-cli의 유연한 확장성 때문에 vue 자체에만 국한되지 않고 react,anything을 지원할 수 있습니다...
위에서 말한 바와 같이 만약 당신이 깊이 있는 vue-cli 맞춤형화를 하려면 vue에 직접 쓰는 것을 권장하지 않습니다.config.js에서 플러그인에 봉하여 독립적으로 이 플러그인을 유지하고 프로젝트는 이 플러그인에 의존합니다.이렇게 하면 업그레이드의 원가와 복잡도를 간소화할 수 있다.
 
3. GUI 인터페이스
대부분의 사람들은 개발 효율과 실제 향상 효과가 확실하기 때문에 효과가 크지 않다고 생각한다.보기만 편하고 직관적이면 충분하다.
 
4. 빠른 원형 개발
vue-cli3도 vue 파일을 직접 뛰는 것을 지원하고 원형 개발을 빠르게 하거나 어떤 아이디어를 검증할 때 좋다.
 
5. 현대 모델
선진적인 브라우저에 선진적인 코드(ES6 이후)와 함께 낡은 버전의 브라우저를 호환하면 선진적인 코드는 파일 부피나 스크립트 해석 효율이 비교적 높아진다.
볼륨 대비:
Version
Size (minified)
Size (minified + gzipped)
ES2015+ (main.mjs)
80K
21K
ES5 (main.es5.js)
175K
43K
해결 효율:
Version
Parse/eval time (individual runs)
Parse/eval time (avg)
ES2015+ (main.mjs)
184ms, 164ms, 166ms
172ms
ES5 (main.es5.js)
389ms, 351ms, 360ms
367ms
요약:

만약에 우리가 괴롭히는 것을 좋아한다면 vue-cli3이 속수무책이라고 느낄 것이다. 이때 우리는 vue-cli3의 목표 사용자가 아니다.예를 들어 우리 팀은 CLI 구축 도구를 하나하나 만들었다. jm-cli는 자신의 팀의 수요에 따라 깊이 있게 맞춤형으로 만들었지만 우리의 이 도구는 디렉터리 구조, 인코딩 규범 등을 포함한다.우리는 팀원들에게 특수화 맞춤형 제작을 추천하지 않기 때문에 갱신을 편리하게 하기 위해 아예 확장하지 못하게 한다. 통일과 규범은 팀에게 가장 중요한 것이다.만약 비슷한 개발 경험이 있다면, vue-cli는 모든 구축 CLI의 최종 귀착점이나 본보기가 될 수 있다고 생각할 것이다.

괴롭히고 싶지 않으면 코드만 쓰고 싶으면 직접 가져와서 사용하세요.

만약에 괴롭히고 싶으면 팀워크와 도구 체인을 구축하는 유지 보수 비용을 고려해야 하기 때문에 vue-cli가 적합하다.물론 너도 바퀴를 만들 수 있지

웹팩의 구축 프로젝트를 배우고 싶다면 vue-cli

를 추천하지 않습니다.
 
마지막으로 vue 팀에게 좋아요를 눌러주세요.