vue-cli3과 vue-cli2의 차이점은 무엇입니까-View.js-php.cn

vue-cli3과 vue-cli2의 차이점은 무엇입니까

WBOY

풀어 주다： 2022-03-17 15:16:20

원래의

6146명이 탐색했습니다.

차이점: 1. "vue-cli3"은 webpack4를 기반으로 하고 "vue-cli2"는 webpack3을 기반으로 합니다. 2. "vue-cli3"은 정적 폴더를 제거하고 공용 폴더를 추가하며 "index.html을 이동했습니다. "를 공개합니다.

vue-cli3과 vue-cli2의 차이점은 무엇입니까

이 기사의 운영 환경: Windows 10 시스템, Vue 버전 2.9.6, DELL G3 컴퓨터.

vue-cli3과 vue-cli2의 차이점은 무엇인가요?

vue-cli 3의 github 웨어하우스가 원래 독립 github 웨어하우스에서 vue 프로젝트로 이동되었습니다.

vue-cli 3의 프로젝트 구조는 vue-cli를 완전히 버립니다. 2 3의 원래 아키텍처는 더 추상적이고 간결합니다(여기서는 나중에 자세히 소개할 수 있음)

vue-cli 3은 webpack 4, vue-cli 2 또는 webapck 3을 기반으로 합니다.

vue-cli 3은 vue ui 명령을 제공합니다. , 시각적 구성을 제공하고 더 사용자 친화적입니다

vue-cli 3은 롤업의 제로 구성 아이디어도 학습했기 때문에 프로젝트가 초기화된 후에는 더 이상 익숙한 빌드 디렉터리가 없으며 웹팩도 없습니다. base.config.js, webpack.dev.config.js 및 webpack.prod.config.js와 같은 구성 파일.

vue-cli 3의 설계 원칙은 구성 파일의 루트 디렉터리 아래에 있는 build 및 config 디렉터리가 제거되었습니다.

정적 폴더가 제거되고 public 폴더가 추가되었으며 index.html이 추가되었습니다.

Vue-cli3에 의해 생성된 프로젝트의 디렉토리 구조

vue_project

-- node_modules # 설치된 라이브러리 종속성
-- public # vue-cli2의 static과 동일하며 패키지화되어 있습니다. 그대로 배치됨 dist
-- src # 소스 코드
-- .browserslistrc # 브라우저 관련 항목 구성
-- .gitignore # git 관련 항목 구성, 일부 파일을 무시하도록 구성할 수 있음
.babel 뒤에 버전 번호를 추가하세요. , 따라서 다른 버전의 종속성이 설치될 수 있음)
- readme.md # 마크다운 문서
시작 프로젝트 및 패키징 프로젝트
```
npm run serve
```
로그인 후 복사
#Package project
```
npm run build
```
로그인 후 복사

{
  "name": "vue3test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    # 运行项目
    "serve": "vue-cli-service serve",
    # 打包项目
    "build": "vue-cli-service build"
  },
  # 运行依赖
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
# 开发依赖
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.4.0",
    "@vue/cli-service": "^4.4.0",
    "vue-template-compiler": "^2.6.11"
  }
}

로그인 후 복사