ts开发炒股桌面程序 一election+vue+vite环境搭建

目标

本人也是老股民了（A股老韭菜了），学习了ts之后就产生了一个想法，是使用ts开发一个搜素炒股信息的小工具方便，摸鱼。在网上搜索，暂定使用 election+vue+vite的方式开发桌面程序。

接下来是搭建开发环境

开发环境

一安装nodejs，nodejs下载地址Node.js — Download。

安装好nodejs后打开相关窗口使用github下载框架的示例程序 git GitHub - wbjqiqi/electron-react-typescript-boilerplate: Live editing development on desktop app

并安装程序需要使用包

 cd your-project-name && npm install

我在安装的时候出现了下面的问题

问题一

npm install --legacy-peer-deps 解决，其中版本不对使用nvm切换版本

问题二 安装太慢，方法换源

查看当前源

设置淘宝源

npm config set registry https://registry.npm.taobao.org 

重新查看源

可以看出已经成功切换了淘宝源

npm init vite@latest或者npm create vite创建项目

在项目根目录创建electron/index.ts文件

内容如下：

import { app, BrowserWindow } from "electron";
import path from "path";

const createWindow = () => {
  const win = new BrowserWindow({
    webPreferences: {
      // 允许渲染进程使用node
      contextIsolation: false,
      nodeIntegration: true,
    },
  });
  // app.isPackaged 字段存在bug，即使正常打包后，仍然为false，所以不能用来判断项目是否经过打包
  if (process.env.NODE_ENV === 'development') {
    // 开发环境
    // process.env.VITE_DEV_SERVER_URL获取开发服务器的url
    // vite版本不同，VITE_DEV_SERVER_URL字段也有所变化，打印process.env查找具体的名称
    win.loadURL(process.env.VITE_DEV_SERVER_URL);
  } else {
    // 生产环境
    win.loadFile(path.join(__dirname, "../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'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    electron({
      // 入口文件
      entry: 'electron/index.ts'
    })
  ]
})

配置package.json

npm install

npm run dev 弹出弹窗，环境安装成功