Outils de développement Vue.js V5.1.1

Après avoir téléchargé le fichier crx des outils de développement Vue.js, ouvrez la page des extensions de Chrome (chrome://extensions/ ou appuyez sur l'icône du menu Chrome > Plus d'outils > Recherche d'extensions), puis faites glisser et déposez le fichier crx sur la page des extensions pour l'installer. ;
4. Cliquez sur "Ajouter une extension" pour terminer l'installation.

5. Le plug-in Vue.js devtool ne peut pas être utilisé après l'installation, et l'invite "vue.js non détecté" apparaît. À ce stade, nous pouvons utiliser la méthode suivante :

.

Tout d'abord, nous devons trouver le répertoire d'installation du plug-in Vue.js devtool. (Si vous ne trouvez vraiment pas l'emplacement d'installation du plug-in, vous pouvez rechercher l'ID du plug-in sur votre ordinateur local : nhdogjmejiglipccpnnnanhbledajbpd.) L'emplacement d'installation du plug-in Chrome est différent selon les systèmes d'exploitation. Par exemple, l'emplacement d'installation du plug-in Chrome dans le système win8 : C:UsersAdministratorAppDataLocalGoogleChromeUser DataDefaultExtensionsnhdogjmejiglipccpnnnanhbledajbpd
Deuxièmement, après avoir trouvé le répertoire d'installation du plug-in Vue.js devtool, ouvrez le fichier mainifest.json (c'est la clé) .

Changez le code persistent: false dans mainfest.json en persistent: true. Comme le montre l'image ci-dessous :

Généralement, le code à l'emplacement ci-dessus est modifié. Après avoir ouvert le projet vue, sélectionnez vue dans la console et il devrait pouvoir être utilisé normalement.

Troisièmement, s'il ne peut toujours pas être utilisé après l'ajustement via la méthode ci-dessus, vous pouvez ajuster le code de webpack.config.js, comme indiqué ci-dessous :

Enfin, redémarrez votre projet vue. Il devrait être prêt à l'emploi.

2. Méthode d'installation du code source

1. Téléchargez le code source de devtools depuis github, adresse : https://github.com/vuejs/vue-devtools.

2. Après le téléchargement, entrez dans le projet vue-devtools-master, exécutez cnpm install, téléchargez les dépendances, puis exécutez npm run build pour compiler le programme source.

3. Une fois la compilation terminée, la structure des répertoires est la suivante :

Modifiez persistant dans mainifest.json dans le répertoire shells-chrome sur true :

4. Ouvrez les paramètres. de Google Chrome ---> Extension, et vérifiez le mode développeur

Faites ensuite glisser l'intégralité du dossier Chrome dans le répertoire shells du projet qui vient d'être compilé directement dans le navigateur actuel et sélectionnez Activer pour installer. le plug-in au navigateur.

5. Ouvrez un projet vue existant, exécutez le projet, puis dans le navigateur--->Paramètres--->Plus d'outils--->Outils de développement, entrez en mode débogage :
Si vous trouvez que vue.js n'est pas détecté, vous pouvez ajuster le code de webpack.config.js :


Enfin, redémarrez votre projet vue et il devrait être prêt à être utilisé.

Résumé : Une fois le plug-in Vue.js devtool installé, le problème de "vue.js non détecté" apparaît. Tout d'abord, sélectionnez le mode développeur dans l'extension, ouvrez le répertoire d'installation du plug-in, et définissez persistant dans mainifest.json sur true , si cela ne fonctionne toujours pas, ajustez le code de webpack.config.js, et enfin redémarrez le projet vue pour l'utiliser.