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

HelloWoRd v

已于 2024-03-14 14:28:11 修改

阅读量526

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript electron

于 2024-03-14 14:27:53 首次发布

本文链接：https://blog.youkuaiyun.com/github_75054236/article/details/136698206

本文讲述了作者作为老股民使用TypeScript开发炒股小工具的过程，遇到的开发环境问题（如node版本、npm速度慢），以及如何配置Electron、Vue和Vite框架，解决环境搭建问题并成功启动开发环境。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目标

本人也是老股民了（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