从零开始，利用Electron + Vite + Vue 3 + TypeScript 构建跨平台应用程序

2024-02-03 17:39:11

前期准备

1.1 安装Node.js和npm

首先，我们需要确保您的计算机上安装了Node.js和npm。Node.js可以在其官方网站上下载，而npm通常随Node.js一起安装。

1.2 安装Electron和Vite

接下来，我们需要安装Electron和Vite。Electron是一个用于构建跨平台桌面应用程序的框架，而Vite是一个用于构建前端应用程序的工具。

使用以下命令安装Electron：

npm install -g electron

使用以下命令安装Vite：

npm install -g vite

1.3 安装Vue 3和TypeScript

最后，我们需要安装Vue 3和TypeScript。Vue 3是一个用于构建用户界面的JavaScript框架，而TypeScript是JavaScript的超集，它支持类型检查。

使用以下命令安装Vue 3：

npm install -g @vue/cli

使用以下命令安装TypeScript：

npm install -g typescript

2. 创建新项目

现在，我们可以创建一个新的Electron + Vite + Vue 3 + TypeScript项目。

首先，创建一个新的文件夹，然后使用以下命令导航到该文件夹：

cd my-app

然后，使用以下命令创建一个新的Vue 3项目：

vue create my-app

在项目创建过程中，您将被问到是否要使用TypeScript。选择“Yes”。

项目创建完成后，您将看到一个名为“my-app”的文件夹。

3. 安装依赖项

接下来，我们需要安装项目所需的依赖项。

使用以下命令安装Electron和Vite：

npm install electron vite

使用以下命令安装Vue 3和TypeScript：

npm install @vue/cli-plugin-typescript

4. 配置项目

现在，我们需要配置项目。

首先，我们需要在“package.json”文件中添加以下代码：

{
  "name": "my-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "dev": "vite",
    "build": "electron-builder"
  },
  "dependencies": {
    "electron": "^20.0.0",
    "vite": "^3.0.0",
    "@vue/cli-plugin-typescript": "^1.0.0"
  },
  "devDependencies": {
    "electron-builder": "^25.0.0"
  }
}

然后，我们需要在“vite.config.js”文件中添加以下代码：

module.exports = {
  plugins: [vue()],
  build: {
    outDir: 'dist',
    emptyOutDir: true,
    sourcemap: true,
    lib: {
      entry: 'src/main.ts',
      formats: ['cjs'],
      fileName: 'main'
    }
  }
};

5. 开发应用程序

现在，我们可以开始开发应用程序了。

首先，我们需要创建一个名为“src/main.ts”的文件，并在其中添加以下代码：

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

const app = createApp(App)

app.mount('#app')

然后，我们需要创建一个名为“src/App.vue”的文件，并在其中添加以下代码：

<template>
  <div id="app">
    <h1>Hello World!</h1>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Arial, Helvetica, sans-serif;
}
</style>