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

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

이 기사의 운영 환경: 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

참고: 이 명령은 package.json

{
  "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"
  }
}

의 스크립트에서 구성됩니다.[관련 권장 사항: "

vue.js tutorial

"]

위 내용은 vue-cli3과 vue-cli2의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!