Heim > Web-Frontend > View.js > Hauptteil

Was ist der Unterschied zwischen vue-cli3 und vue-cli2?

WBOY
Freigeben: 2022-03-17 15:16:20
Original
6123 Leute haben es durchsucht

Unterschiede: 1. „vue-cli3“ basiert auf webpack4, während „vue-cli2“ auf webpack3 basiert; 2. „vue-cli3“ entfernt den statischen Ordner und fügt einen öffentlichen Ordner hinzu und verschiebt „index.html“. " an die Öffentlichkeit.

Was ist der Unterschied zwischen vue-cli3 und vue-cli2?

Die Betriebsumgebung dieses Artikels: Windows 10-System, Vue Version 2.9.6, DELL G3-Computer.

Was ist der Unterschied zwischen vue-cli3 und vue-cli2?

Das Github-Warehouse von vue-cli 3 wurde vom ursprünglichen unabhängigen Github-Warehouse in das Vue-Projekt verschoben.

Die Projektstruktur von vue-cli 3 verzichtet vollständig auf vue-cli 2 Die ursprüngliche Architektur von 3 ist abstrakter und prägnanter (hier kann sie später ausführlich vorgestellt werden).

vue-cli 3 basiert auf Webpack 4, vue-cli 2 oder webapck 3

vue-cli 3 stellt den vue ui-Befehl bereit , bietet visuelle Konfiguration und ist benutzerfreundlicher

Da vue-cli 3 auch die Zero-Configuration-Idee des Rollups gelernt hat, gibt es nach der Initialisierung des Projekts kein bekannteres Build-Verzeichnis und kein Webpack. base.config.js, Konfigurationsdateien wie webpack.dev.config.js und webpack.prod.config.js. Das Designprinzip von

vue-cli 3 ist die Nullkonfiguration. Die Build- und Konfigurationsverzeichnisse im Stammverzeichnis der Konfigurationsdatei wurden entfernt.

Der statische Ordner wurde entfernt, der öffentliche Ordner wurde hinzugefügt und index.html wurde hinzugefügt wurde in die Öffentlichkeit verschoben.

Die Verzeichnisstruktur des von Vue-cli3 erstellten Projekts

vue_project

  • -- node_modules # Installierte Bibliotheksabhängigkeiten

  • -- public # Entspricht static in vue-cli2, verpackt und intakt platziert In dist

  • -- src # Quellcode

  • -- .browserslistrc # Browserbezogene Dinge konfigurieren

  • -- .gitignore # Git-bezogene Dinge konfigurieren. Sie können konfigurieren, dass einige Dateien ignoriert werden

  •                                                                    . .babel                                                                                                     .babel                                  Fügen Sie am Ende die Versionsnummer hinzu, damit verschiedene Versionen von Abhängigkeiten installiert werden können project

    npm run serve
    Nach dem Login kopieren
  • #Paketprojekt
  • npm run build
    Nach dem Login kopieren

    Hinweis: Diese Befehle werden im Skript von package.json konfiguriert

    {
      "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"
      }
    }
    Nach dem Login kopieren
  • [Verwandte Empfehlung: „
  • vue.js Tutorial

    “]

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen vue-cli3 und vue-cli2?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
vue
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!