Que mettre en vue du public sur les échafaudages

Généralement, certaines ressources statiques (images) sont placées dans le dossier public lorsque webpack les empaquette, elles seront empaquetées intactes dans le dossier dist. Les fichiers du répertoire public ne seront pas traités par Webpack, ils seront copiés directement dans le répertoire final du packaging (la valeur par défaut est dist/static) ; ces fichiers doivent être référencés à l'aide de chemins absolus, qui dépendent de votre "vue.config.js" ; " Dans la configuration de publicPath, la valeur par défaut est "/".

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

1. Installez Vue scaffolding

1. Première étape (exécutée uniquement pour la première fois) : Installez @vue/cli globalement

npm i @vue/cli -g

2. Basculez vers le répertoire dans lequel vous souhaitez créer le projet, puis créez-le. le projet

vue create XXX

3, démarrez le projet

npm run serve

Remarques :

1. Adresse du miroir npm Taobao

npm config set registry https://registry.npm.taobao.org

2. L'échafaudage Vue masque toutes les configurations liées au webpack. Si vous souhaitez afficher et exécuter

vue inspect > output.js

2. de chaque dossier du projet d'initialisation de l'échafaudage vue-cli

dossier node_modules  : dossier de dépendances du projet

dossier public :

place généralement des ressources statiques (images). Il convient de noter que les ressources statiques placées dans le dossier public seront regroupées intactes dans le dossier dist lorsque Webpack les conditionnera.

Toutes les ressources statiques placées dans le dossier public seront simplement copiées sans passer par webpack. Vous devez les référencer via des chemins absolus.

Notez que nous vous recommandons d'importer des ressources dans le cadre du graphique de dépendances de votre module, afin qu'elles soient traitées par webpack et bénéficient des avantages suivants :

• Les scripts et les feuilles de style seront compressés et regroupés, évitant ainsi des requêtes réseau supplémentaires.
• Si un fichier est perdu, une erreur sera signalée directement lors de la compilation, au lieu qu'une erreur 404 soit générée côté utilisateur.
• Les noms de fichiers finaux générés incluent le hachage du contenu, vous n'avez donc pas à vous soucier de la mise en cache des anciennes versions par les navigateurs.

L'annuaire public fournit une solution de repli, lorsque vous le référencez via un chemin absolu, faites attention à l'endroit où l'application sera déployée. Si votre application n'est pas déployée à la racine du domaine, alors vous devez configurer le préfixe publicPath pour votre URL :

• dans public/index.html ou d'autres fichiers HTML utilisés comme modèles via html-webpack-plugin, vous Vous devez définir le préfixe du lien via
  <%= BASE_URL %> :

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

• Dans le modèle, vous devez d'abord transmettre l'URL de base à votre composant :

data () {
  return {
    publicPath: process.env.BASE_URL
  }
}

Ensuite :

<img :src="`${publicPath}my-image.png`">

Quand pour utiliser le dossier de fichiers publics

• Vous devez spécifier le nom d'un fichier dans la sortie de construction.
• Vous disposez de milliers d'images et devez référencer dynamiquement leurs parcours.
• Certaines bibliothèques peuvent être incompatibles avec webpack. Dans ce cas, vous devez utiliser une bibliothèque indépendante

vue-cli3.0 dispose de deux répertoires pour placer les ressources statiques, à savoir public et Assets.

les fichiers des lieux publics qui ne changeront pas (équivalent à static dans vue-cli2.x)
Les fichiers du répertoire public/ ne seront pas traités par Webpack : ils seront copiés directement dans le répertoire final du packaging (la valeur par défaut est dist/statique). Ces fichiers doivent être référencés à l'aide de chemins absolus. Cela dépend de la configuration publicPath dans votre vue.config.js. La valeur par défaut est /.

fichiers du magasin d'actifs susceptibles de changer
Les fichiers du répertoire d'actifs seront traités et analysés en dépendances de module par webpack, et seuls les formulaires de chemin relatif sont pris en charge.

Pour faire simple, les fichiers js des autres sont publics (c'est-à-dire qu'ils ne changeront pas), et les actifs mettent les fichiers js écrits par vous-même (fichiers qui doivent être modifiés)

dossier src

    dossier Assets : Généralement utilisé pour stocker des ressources statiques (ressources statiques partagées par plusieurs composants). Il convient de noter que lorsque Webpack regroupe les ressources statiques dans le dossier Assets, Webpack traitera les ressources statiques comme un module et les empaquetera dans JS à l'intérieur. le fichier. #                                                                                                                                   # .gitignore : configuration ignorée par le contrôle de version de git (généralement non touchée)

      babel.config.js : le fichier de configuration de babel (équivalent à un traducteur, tel que la traduction de la syntaxe liée à ES6 en ES5, avec une meilleure compatibilité, généralement non touché )

Package.json : fichier de configuration du package d'application (similaire à une carte d'identité de projet, enregistrement du nom du projet, des dépendances du projet, du projet en cours d'exécution et d'autres informations)

Package-lock.json : fichier de contrôle de version du package (fichier de mise en cache)

README. md : Fichier de description de l'application (fichier descriptif)

vue.config.js : L'échafaudage peut être personnalisé Pour savoir comment le configurer, veuillez vous référer au Vue CLI

Autres dossiers :

• fichier pages. Dossier : stocke les composants liés au routage (les pages peuvent également être remplacées par des vues)

• dossier routeur : fichier de configuration de routage

• dossier store : fichiers liés à vuex

• dossier mock : stocke les données de simulation simulées

3. Environnement de travail d'échafaudage

Environnement d'échafaudage vue-cli : basé sur node + webpack pour nous aider à écrire des projets vue

Fichier d'entrée par défaut main.js : Tous les codes doivent être générés directement ou indirectement avec main.js. La relation d'introduction

Processus d'emballage : lors de l'exécution de l'empaquetage, webpack construira une carte de code basée sur la relation d'entrée, traduira le code pertinent avec le chargeur/plug-in, le sortira dans un fichier .js et l'insérera dans l'index. html Exécutez

① main.js → Packagez et exécutez l'entrée

② Vue.component("nom du composant", objet composant) → Enregistrez un composant global pour Vue

Séquence d'exécution : enregistrez d'abord le composant global via main.js fichier, puis utilisez ce composant global dans le composant

[Recommandations associées : tutoriel vidéo vuejs, développement web front-end]

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!