Electron-Vue 项目教程

Electron-Vue 项目教程

electron-vueSimulatedGREG/electron-vue：这是一个基于Electron和Vue.js的桌面应用开发框架，适合开发跨平台的桌面应用程序。特点包括一套代码、多端运行、易于上手等。项目地址:https://gitcode.com/gh_mirrors/el/electron-vue

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

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

electron-vue/
├── build/
├── config/
├── dist/
├── src/
│   ├── main/
│   ├── renderer/
│   └── index.ejs
├── static/
├── test/
├── .babelrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── .postcssrc.js
├── package.json
└── README.md

目录结构介绍

• build/: 存放构建相关的文件和配置。
• config/: 存放项目的配置文件，如开发和生产环境的配置。
• dist/: 构建后的输出目录。
• src/: 源代码目录。
  • main/: 主进程代码。
  • renderer/: 渲染进程代码。
  • index.ejs: HTML 模板文件。
• static/: 静态资源文件。
• test/: 测试代码目录。
• .babelrc: Babel 配置文件。
• .editorconfig: 编辑器配置文件。
• .eslintrc.js: ESLint 配置文件。
• .gitignore: Git 忽略文件配置。
• .postcssrc.js: PostCSS 配置文件。
• package.json: 项目依赖和脚本配置。
• README.md: 项目说明文档。

2. 项目的启动文件介绍

主进程启动文件

主进程的启动文件通常是 src/main/index.js 或 src/main/main.js。这个文件负责启动 Electron 应用的主进程，并管理窗口的创建和生命周期。

// src/main/index.js
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.loadFile('index.html')
}

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()
})

渲染进程启动文件

渲染进程的启动文件通常是 src/renderer/main.js。这个文件负责启动 Vue 应用，并挂载到 HTML 模板中。

// src/renderer/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3. 项目的配置文件介绍

Webpack 配置文件

Webpack 配置文件通常位于 config/ 目录下，包括开发和生产环境的配置。

// config/webpack.base.conf.js
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  entry: {
    app: './src/renderer/main.js'
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'js/[name].js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

package.json

electron-vueSimulatedGREG/electron-vue：这是一个基于Electron和Vue.js的桌面应用开发框架，适合开发跨平台的桌面应用程序。特点包括一套代码、多端运行、易于上手等。项目地址:https://gitcode.com/gh_mirrors/el/electron-vue