Cài đặt Electron bằng cnpm

#### Hướng dẫn chi tiết cài đặt ứng dụng Electron sử dụng công cụ cnpm

Cài đặt Electron qua npm

Bước 1: Khởi tạo dự án Node.js

npm init -y

Bước 2: Cài đặt Electron

npm install electron --save-dev

Bước 3: Kiểm tra phiên bản

npx electron -v

Bước 4: Tạo tệp main.js

<script type="text/javascript">
const { app, BrowserWindow } = require('electron');

function initializeWindow() {
  const windowInstance = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  windowInstance.loadFile('index.html');
}

app.whenReady().then(() => {
  initializeWindow();

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      initializeWindow();
    }
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
</script>

Bước 5: Tạo tệp index.html

<script type="text/html">
<html>
<head>
  <title>Ứng dụng Electron</title>
</head>
<body>
  <h1>Chào mừng đến với Electron!</h1>
</body>
</html>
</script>

Bước 6: Cấu hình package.json

<script type="text/json">
{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^33.2.0"
  }
}
</script>

Bước 7: Chạy ứng dụng

npm start

Cài đặt Electron qua cnpm

Bước 1: Cài đặt cnpm

npm install -g cnpm --registry=https://registry.npmmirror.com

Bước 2: Khởi tạo dự án

cnpm init -y

Bước 3: Cài đặt Electron

cnpm install electron --save-dev

Bước 4: Kiểm tra phiên bản

npx electron -v

Bước 5: Tạo tệp main.js

<script type="text/javascript">
const { app, BrowserWindow } = require('electron');

function initializeWindow() {
  const windowInstance = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  windowInstance.loadFile('index.html');
}

app.whenReady().then(() => {
  initializeWindow();

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      initializeWindow();
    }
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
</script>

Bước 6: Tạo tệp index.html

<script type="text/html">
<html>
<head>
  <title>Ứng dụng Electron</title>
</head>
<body>
  <h1>Chào mừng đến với Electron!</h1>
</body>
</html>
</script>

Bước 7: Cấu hình package.json

<script type="text/json">
{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^33.2.0"
  }
}
</script>

Bước 8: Chạy ứng dụng

cnpm run start

Các lỗi thường gặp và cách khắc phục

  1. Vấn đề mạng:
    • Đảm bảo kết nối internet ổn định
    • Thử dùng mirror của npm Trung Quốc
  2. Vấn đề cache:
    • Xóa cache npm: 
      npm cache clean --force
  3. Vấn đề quyền truy cập:
    • Trên Windows: Mở CMD bằng quyền admin
    • Trên macOS/Linux: Thêm sudo trước lệnh
  4. Không đủ dung lượng:
    • Kiểm tra không gian ổ đĩa
  5. Xem thông tin lỗi chi tiết:
    • Chạy lệnh: 
      npm start --verbose

Thẻ: electron cnpm npm Node.js JavaScript

Đăng vào ngày 23 tháng 5 lúc 11:13

Thẻ Phổ Biến

©2026 Thành phố Cuồng loạn