Settinng Up the Development Enviroment

Installing Node.js

Download and install Node.js from the official website: https://nodejs.org/

Installing Vue CLI

Install Vue CLI globally using npm:

npm install -g @vue/cli

Creating a Vue Project

Initialize a new Vue project:

vue create my-electron-app

During project setup, manually select the following features:

• Vue version selection
• TypeScript support
• Babel compilation
• Router for navigation
• Vuex for state management
• CSS pre-processors (select Less)
• Linting and formatting
• Unit testing
• E2E testing

Configuration Options

Choose Vue 2.x for stable development and enable class-style component syntax. Configure Babel to work with TypeScript for modern JavaScript features and polyfill detection.

For routing, select history mode which requires proper server configuration for production deployment.

Select Less as the CSS pre-processor for enhanced styling capabilities.

Choose ESLint with Airbnb configuraton for code quality and formatting standards. Enable linting on file save for immediate feedback.

Select Mocha with Chai for unit testing framework and Cypress for E2E testing, which is well-suited for Electron applications.

Store configuration in dedicated files rather than package.json for better organization.

Adding Electron Support

Navigate to your project directory and add Electron Builder:

cd my-electron-app
vue add electron-builder

Select Electron version 11.0.0 and enable Spectron testing framework integration.