Electron-Nuxt 项目教程

Electron-Nuxt 项目教程

electron-nuxt⚡ An Electron & Nuxt.js / Vue.js quick start boilerplate with vue-cli scaffolding, electron-builder, unit/e2e testing, vue-devtools项目地址:https://gitcode.com/gh_mirrors/el/electron-nuxt

1. 项目的目录结构及介绍

Electron-Nuxt 项目的目录结构如下：

electron-nuxt/
├── assets/
├── components/
├── layouts/
├── middleware/
├── pages/
├── plugins/
├── static/
├── store/
├── electron/
│   ├── main/
│   ├── preload/
│   └── renderer/
├── nuxt.config.js
├── package.json
└── README.md

目录介绍

• assets/: 存放未编译的静态资源，如 Stylus 或 Sass 文件、图像等。
• components/: 存放 Vue 组件。
• layouts/: 存放应用的布局文件。
• middleware/: 存放应用的中间件。
• pages/: 存放应用的视图和路由。
• plugins/: 存放需要在根 Vue.js 应用实例化之前运行的 JavaScript 插件。
• static/: 存放静态文件，如图像、字体等，这些文件会直接映射到服务器根目录。
• store/: 存放 Vuex 状态管理文件。
• electron/: 存放 Electron 相关文件。
  • main/: 存放 Electron 的主进程文件。
  • preload/: 存放预加载脚本。
  • renderer/: 存放渲染进程文件。
• nuxt.config.js: Nuxt.js 的配置文件。
• package.json: 项目的依赖和脚本配置文件。
• README.md: 项目的说明文档。

2. 项目的启动文件介绍

主进程启动文件

在 electron/main/index.js 中，定义了 Electron 的主进程启动逻辑：

const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  mainWindow.loadURL('http://localhost:3000')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

渲染进程启动文件

在 electron/renderer/index.js 中，定义了渲染进程的启动逻辑：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

3. 项目的配置文件介绍

nuxt.config.js

nuxt.config.js 是 Nuxt.js 的配置文件，包含了项目的各种配置选项：

export default {
  mode: 'universal',
  head: {
    title: 'Electron-Nuxt',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  css: [
    '~/assets/styles/main.scss'
  ],
  plugins: [
    '~/plugins/axios',
    '~/plugins/vue-notifications'
  ],
  buildModules: [
    '@nuxtjs/eslint-module',
    '@nuxtjs/stylelint-module'
  ],
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/pwa'
  ],
  build: {
    extend (config, ctx) {
      if (ctx.isDev) {
        config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map

electron-nuxt⚡ An Electron & Nuxt.js / Vue.js quick start boilerplate with vue-cli scaffolding, electron-builder, unit/e2e testing, vue-devtools项目地址:https://gitcode.com/gh_mirrors/el/electron-nuxt