扶贫助农管理系统--项目搭建

本专栏旨在从零开始搭建一个扶贫助农管理系统，计算机专业和软工专业的毕业设计通用

本文章为专栏的第一篇文章，主要是介绍项目初期的搭建，以及一些必要的依赖安装。

开发环境

在进行项目创建之前请确保您的电脑已安装node。

vite脚手架的安装与使用

虽然vue官方脚手架是vue-cli，但是由于国内使用vue-cli创建项目及其的缓慢，此处我们创建项目使用vite脚手架进行创建项目，命令如下：

//首先在计算机中进行全局安装vite
npm install vite -g

//安装好vite后进行vue项目的创建
npm create vue

项目的创建

运行命令后进行依赖的选择：

项目名称根据自己的需要来确定，我这边选择是扶贫助农的拼音，TS语法默认为否，JSX支持默认否vue Router点击右方向键切换为是，pinia同样选择是，其余选项默认即可。

electron的安装

我们的项目需要生成适配不同电脑的桌面客户端，选用的技术栈是electron进行开发

首先对electron和electron-builder进行安装

npm install electron --save-dev
npm install electron-builder --save-dev

项目配置

项目入口文件配置

在项目的根目录下创建electron应用程序的入口文件，命名为main.js

import { createRequire } from "module";
const require = createRequire(import.meta.url);
const { app, BrowserWindow } = require("electron");
let mainWindow;
function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true, 
            contextIsolation: false, 

        },
    });
    mainWindow.loadURL("http://127.0.0.1:5173");
    mainWindow.on("closed", function () {
        mainWindow = null;
    });
app.on("ready", createWindow);

package.json文件配置

在文件最上部添加下图命令

在调试文件中添加start命令，如下图所示

项目启动

添加完成后在命令行使用npm start进行启动可以看到打开了一个窗口，至此我们整个项目的初步配置就做好了，下一篇文章将正式开始项目的开发。如果在配置过程中遇到问题，欢迎扫描下方二维码添加我的QQ进行咨询。

添加QQ咨询问题，定做毕设