Maison  >  Article  >  interface Web  >  Quelle est la différence entre vue-cli3 et vue-cli2

Quelle est la différence entre vue-cli3 et vue-cli2

WBOY
WBOYoriginal
2022-03-17 15:16:206148parcourir

Différences : 1. "vue-cli3" est basé sur webpack4, tandis que "vue-cli2" est basé sur webpack3 ; 2. "vue-cli3" supprime le dossier statique et ajoute un dossier public, et "index.html" est déplacé. " au public.

Quelle est la différence entre vue-cli3 et vue-cli2

L'environnement d'exploitation de cet article : système Windows 10, Vue version 2.9.6, ordinateur DELL G3.

Quelle est la différence entre vue-cli3 et vue-cli2 ?

L'entrepôt github de vue-cli 3 a été déplacé de l'entrepôt github indépendant d'origine vers le projet vue

La structure du projet de vue-cli 3 abandonne complètement vue-cli. 2 L'architecture originale de 3 est plus abstraite et concise (vous pourrez la présenter en détail plus tard)

vue-cli 3 est basée sur webpack 4, vue-cli 2 ou webapck 3

vue-cli 3 fournit la commande vue ui , fournit une configuration visuelle et est plus convivial

Depuis que vue-cli 3 a également appris l'idée de configuration zéro du rollup, une fois le projet initialisé, il n'y a plus de répertoire de construction familier et il n'y a pas de webpack. base.config.js, fichiers de configuration tels que webpack.dev.config.js et webpack.prod.config.js.

Le principe de conception de vue-cli 3 est zéro configuration. Les répertoires build et config sous le répertoire racine du fichier de configuration ont été supprimés

Le dossier statique a été supprimé, le dossier public a été ajouté et index.html a été supprimé. a été déplacé vers public.

La structure de répertoires du projet créé par Vue-cli3

vue_project

  • -- node_modules # Dépendances de bibliothèque installées

  • -- public # Équivalent à statique dans vue-cli2, packagé et placé intact Dans dist

  • -- src # Code source

  • -- .browserslistrc # Configurer les éléments liés au navigateur

  • -- .gitignore # Configurer les éléments liés à git, vous pouvez configurer pour ignorer certains fichiers

  •                                                                                           .babel Ajouter le numéro de version après , donc différentes versions de dépendances peuvent être installées)

  • - readme.md # document markdown

  • Projet de démarrage et projet de packaging

  • #Projet de démarrage
  • npm run serve

    #Package project

    npm run build
  • Remarque : Ces commandes sont configurées dans le script de 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"
  }
}

[Recommandation associée : "

tutoriel vue.js

"]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn