Vue+Electron implémente une application de bureau simple

Cet article présente principalement l'implémentation d'applications de bureau simples avec Vue+Electron, qui a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

J'utilise C# pour. d'ailleurs, j'ai déjà écrit des applications de bureau. Récemment, lorsque je regardais node, j'ai découvert que le vscode couramment utilisé est écrit en électron, et l'idée d'​​essayer de manger des crabes m'est venue.

J'ai recherché des informations sur Electron sur Internet, j'ai également étudié les documents officiels et j'ai découvert que l'application Electron est en fait un navigateur Chrome et que l'interface utilisateur est entièrement écrite à l'aide de la technologie Web, car Vue a été utilisé pour l'écrire auparavant, donc la combinaison de Vue+Electron vient naturellement à l'esprit.

J'ai cherché en ligne et j'ai trouvé une roue prête à l'emploi appelée Electron-Vue. Je l'ai installée immédiatement et je l'ai utilisée. Cependant, j'ai trouvé qu'elle n'était pas si satisfaisante au final. Lors de la construction finale, il y avait toujours des erreurs. Plus tard, j'ai finalement découvert que le problème venait du réseau et du problème de configuration. Cela donne mal à la tête aux gens.

J'ai donc finalement décidé de le faire moi-même et de combiner les pages Web statiques générées par Vue avec Electron.

1.Vue utilise le projet webpack. Après la construction, une page Web statique sera générée dans le dossier dist De cette façon, la page Web générée est accessible correctement lorsqu'elle est placée dans le conteneur Web, mais. si le chemin du fichier de référence est ouvert directement localement, une erreur se produira et nous découvrirons plus tard que la raison était que l'index.html généré et les ressources n'étaient pas dans la même couche de répertoire.

Modifiez config/index.js dans le projet webpack en

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

2. Utilisez electronic-quick-start pour créer rapidement un projet électronique et copiez les fichiers générés ci-dessus dans l'électron projet Dans le répertoire racine, exécutez le projet et constatez qu'il s'exécute normalement.

3. Mais l'étape précédente consiste simplement à exécuter en mode développement. Ici, Electron-Builder est utilisé pour distribuer le projet. Après avoir installé Electron-Builder globalement, entrez Electron-Builder --win -. -ia32 --dir La distribution du projet est terminée.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

vue Comment contrôler si l'utilisateur a modifié les informations lors du changement de page après avoir obtenu les détails de la page

Promesse de programmation asynchrone JS, générateur, async/await

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!