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. 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
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 :
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 :
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
data () { return { publicPath: process.env.BASE_URL } }
Ensuite :
<img :src="`${publicPath}my-image.png`">
Quand pour utiliser le dossier de fichiers publics
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
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!