Vue3+Electron+TypeScript打造时尚便笺应用：入门篇

2023-10-05 21:42:41

一、搭建框架配置

1. 初始化项目

首先，我们需要创建一个新的Electron项目。您可以使用Electron官方提供的CLI工具进行初始化，在终端输入以下命令：

npx create-electron-app my-electron-app

2. 安装Vue3

接下来，我们需要在项目中安装Vue3。在终端输入以下命令：

cd my-electron-app
npm install vue@next

3. 安装TypeScript

同样地，我们还需要安装TypeScript。在终端输入以下命令：

npm install typescript

4. 配置TypeScript

安装完成后，我们需要配置TypeScript。在项目根目录下创建一个tsconfig.json文件，并添加以下内容：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "strict": true,
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

5. 创建Vue3组件

现在，我们可以创建Vue3组件了。在src目录下创建一个App.vue文件，并添加以下内容：

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  data() {
    return {
      msg: 'Hello, World!'
    }
  }
})
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

6. 运行项目

最后，我们可以运行项目了。在终端输入以下命令：

npm run dev

现在，您就可以在浏览器中看到您的Vue3组件了。

7. 将项目打包成Electron应用

为了将项目打包成Electron应用，我们需要在package.json文件中添加以下内容：

"build": {
  "appId": "my-electron-app",
  "productName": "My Electron App",
  "copyright": "Copyright © 2023 My Company",
  "directories": {
    "output": "dist"
  },
  "files": [
    "dist/**/*"
  ],
  "mac": {
    "category": "public.app-category.developer-tools"
  },
  "win": {
    "icon": "icon.png"
  }
}