Vue3+TS+Vite+Electron 环境搭建

Vue3+TS+Vite+Electron 环境搭建

参考资料：

• Vite官网：https://cn.vitejs.dev/guide/
• vite-plugin-electron​仓库：https://www.npmjs.com/package/vite-plugin-electron

1、创建基于 Vite 的 Vue3+TS 项目

• 兼容性注意：

• 搭建 Vite 项目

  npm create vite@latest

      √ Project name: ... test # 输入项目名，我这的项目名是 test
      # 选择 Vue + TypeScript
   	? Select a framework: » - Use arrow-keys. Return to submit.
      Vanilla
  >   Vue     # 选择vue
      React
      Preact
      Lit
      Svelte
      Solid
      Qwik
      Others
  √ Select a framework: » Vue
  
  ? Select a variant: » - Use arrow-keys. Return to submit.
  >   TypeScript	# 选择 Typescript
      JavaScript
      Customize with create-vue ↗
      Nuxt ↗
  √ Select a variant: » TypeScript
  
  Scaffolding project in D:\work\JavaScript\vite\test...
  
  Done. Now run:
  
    cd test
    npm install
    npm run dev
  

• 启动测试vue项目

  1、 进入项目：cd test
  2 、安装依赖：npm i
  3、 启动项目：npm run dev

    VITE v5.0.10  ready in 1409 ms
  
    ➜  Local:   http://localhost:5173/   # Ctrl + 左键 点击 http://localhost:5173/ 进入网页
    ➜  Network: use --host to expose
    ➜  press h + enter to show help
  

  看到这个页面就算 vue 项目创建成功了：
  

2、安装 electron

• npm install electron vite-electron-plugin -D

• 在项目根目录创建 electron 文件夹，在 electron 目录中创建 main.ts 入口文件。
  

• 编辑 electron/main.ts ，在 main.ts 中编写如下内容:

  import { BrowserWindow, app } from 'electron'
  
  // 窗体对象
  let win
  
  const createWindow = () => {
    win = new BrowserWindow({
      autoHideMenuBar: true,
      width: 1000,
      height: 600
    })
  
    // process.env.VITE_DEV_SERVER_URL 读取 vue 启动url
    if (process.env.VITE_DEV_SERVER_URL) {
      win.loadURL(process.env.VITE_DEV_SERVER_URL)
    } else {
      win.loadFile('dist/index.html');
    }
  }
  
  app.whenReady().then(createWindow)
  

• 编辑 vite.config.ts 配置文件：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import electron from 'vite-plugin-electron/simple';
  
  export default defineConfig({
    plugins: [
      vue(),
      electron({
        // 之前编写的 main.ts
        main:{
          entry:'electron/main.ts'
        }
      })
    ],
    server:{
    	// 设置vue端口号
      port: 3000
    }
  })
  
  

  一定要注意，导入的是 vite-plugin-electron/simple 而不是 vite-plugin-electron，这里的教程只写简单API，至于vite-plugin-electron官方那边翻译过来是叫扁平化 API：

• 在 package.json 中添加如下内容：

  “main”: “dist-electron/main.js”

  electron/main.ts 最后会被编译到 dist-electron/main.js 。

  注意！！！重要的一点：electron 不支持 type:"module"，如果你的 package.json 里有 type:"module"，那就把它干掉。这是翻译过的官方原话（好吧，多余的话是我说的）：
  

• 最后，让我们启动它：

  npm run dev

  当我们看到这个窗体的时候，就说明启动成功：
  

3、小结

这里的 electron 环境只是最简单的环境搭建，更多内容还是要自己去看看官方是怎么说的：
vite-plugin-electron仓库