Tests de composants uniques Vue
Si nous voulons tester l'effet d'un composant à chaque fois que nous l'utilisons, nous devons à chaque fois importer le module dans le fichier d'entrée, et chaque fois que nous modifions un composant, nous devons supprimer le code d'origine, ce qui sera extrêmement gênant , donc l'outil d'échafaudage vue/clifournit Nous a donné une commande d'outil de développement de prototype très utilevue serve
Site officiel : https://cli.vuejs.org/zh/guide/prototyping.html
Les responsables savent que vous pouvez utiliser vue serveles commandes et vue buildpour *.vuele prototypage rapide d'un seul fichier, mais cela nécessite d'abord l'installation d'une extension globale supplémentaire.
npm install -g @vue/cli-service-global
vue serveL’inconvénient est qu’il nécessite l’installation de dépendances globales, ce qui rend sa cohérence sur différentes machines non garantie. Cela ne convient donc qu’au prototypage rapide. Ensuite, vous pouvez utiliser vue serve ./pathla commande pour tester l'effet d'un seul composant.
Lorsque je l'ai installé pour la première fois, l'installation a échoué. J'ai recherché des informations sur Internet et j'ai trouvé que ma vue/cliversion était trop élevée. Je devais contrôler vue/clila version dans 4.5.13cette plage pour pouvoir utiliser la commande
npm uninstall -g @vue/cli
Désinstallez la version supérieure précédemment installée vue/cli, puis exécutez la commande
npm install -g @vue/cli@4.5
Installez cette version de l'outil d'échafaudage, puis utilisez la commande
vue serve ./src/components/Pager/test.vue
Je pensais pouvoir tester et développer le composant Page, mais de façon inattendue, une erreur de syntaxe m'a été signalée :
ERREUR Échec de la compilation avec 1 erreur 17:52:19
dans ./src/components/Pager/index.vuevue&type=style&index=0&id=63726af4&scoped=true&lang=less&
Erreur de syntaxe : TypeError : this.getOptions n'est pas une fonction
Pour être honnête, je ne m'y attendais pas. Ensuite, je suis allé chercher des erreurs dans le fichier mentionné. Je l'ai retourné encore et encore et je n'ai trouvé aucun endroit où les erreurs de syntaxe pourraient être signalées. Après tout, j'avais déjà J'ai testé ce code dans le fichier d'entrée précédent et il n'y a eu aucun problème. , c'est étrange. J'ai collecté quelques articles et blogs et j'ai découvert npmqu'il existe des dépendances de version entre lesscelui-ci et son compilateur.less-loader
J'ai donc vérifié ma version
npm list
Il est vrai que les deux versions sont très différentes, j'ai donc d'abord désinstallé les deux packages.
npm uninstall less less-loader
Réinstallez ensuite le package avec de fortes dépendances de version
npm install [email protected] less-loader@5
Cela correspondra beaucoup
vue serve ./src/components/Pager/test.vue
Ensuite, l'erreur suivante a été signalée
Options non valides dans vue.config.js : l'enfant « transpileDependencies » échoue car
[« transpileDependencies » doit être un tableau]
vue.config.jsLe code dans le fichier d'origine est le suivant
const {
defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
})
Mais l'erreur ci-dessus s'est produite ici. La raison spécifique peut être que lors de l'utilisation de vue, les fichiers dans node_modules ne seront pas à nouveau compilés par babel. Par conséquent, certaines bibliothèques utilisent des attributs es6 tels que const, et ces bibliothèques sont empaquetées. Il n'y a aucune considération pour compatibilité avec IE, comme le swiper couramment utilisé. Par conséquent, à la fin, le projet signalera une erreur dans IE, entraînant une erreur indiquant que transpileDependencies n'est pas valide.
Après quelques recherches sur Internet, j'ai découvert que vous pouvez spécifier qu'une bibliothèque doit être compilée lors du packaging.Utilisez l'attribut transpileDependencies pour
la configurer dans vue.config.js.
Cependant, il n'y a pas de swiper dans la configuration de mon projet, c'est juste une valeur booléenne, donc le rapport d'erreur ne nécessite qu'un tableau. Peu importe de quoi il s'agit, j'ai donc modifié le code pour
const {
defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: [true] // 或者['swiper']
})
Ce problème peut être résolu par
Enfin, vous pouvez exécuter un seul composant, vous n'avez donc pas à vous soucier de l'importation de fichiers lors des tests ultérieurs des composants.
Mais ne serait-il pas toujours difficile de saisir à chaque fois une longue liste de commandes de chemin de test ? Nous pouvons donc configurer package.josnle script
{
"name": "my-codes",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:Pager": "vue serve ./src/components/Pager/test.vue",
"test:Avatar": "vue serve ./src/components/Avatar/test.vue",
"test:Icon": "vue serve ./src/components/Icon/test.vue"
},
"dependencies": {
"core-js": "^3.8.3",
"less": "^3.11.1",
"less-loader": "^5.0.0",
"vue": "^2.6.14"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"vue-template-compiler": "^2.6.14"
}
}
Exécutez simplement la commande ci-dessous
npm run test:Pager
npm run test:Avatar
npm run test:Icon
Vous pouvez tester les effets de différents composants