Vue项目实战——【基于 Vue3.x + NodeJS】实现的课程表排课系统（搭建开发环境）

原创

已于 2022-11-13 21:03:56 修改 · 2.2k 阅读

标签

#javascript #Vue #node.js

于 2022-11-02 13:54:11 首次发布

本文介绍了如何基于 Vue3.x 和 NodeJS 搭建一个课程表排课系统的开发环境。首先阐述了搭建项目的背景和目的，接着详细讲解了创建项目、添加配置、准备数据等步骤。在创建项目部分，提到了未安装Vue和NodeJS的安装方法。在配置环节，主要涉及Vue配置和启动命令的修改。在做数据部分，分析了课程表所需的数据结构，并展示了如何在项目中处理这些数据。

基于 Vue3.x + NodeJS实现的课程表排课系统（一）

搭建开发环境

一、前言

由于前几天学习了NodeJS，所以想做个项目巩固一下相关知识，顺便复习一下Vue3的相关知识

二、创建项目

没安装过yarn的可以使用npm 想要安装yarn的，可以参考我的历史文章——yarn的安装与使用

// 创建项目
npm create vite

输入projectname: client
选择；Vue & JavaScript

// 定位到 clientt 目录
cd client

// 添加依赖
yarn

// 启动项目
npm run dev
-------------------------------------------------------

// 与client同级目录下 新建文件夹server
cd .. // 从client目录中出来

cd server

// 得到package.json
npm init -y

// 安装express
yarn add express

// 安装nodemon
yarn add nodemon -D -g

三、添加配置

在client/vite.config.js中配置

 resolve: {
   
   
   // 忽略掉文件后缀
   extensions: [".vue", ".js"],
 },

在server/package.json中修改启动命令 & 在server下新建文件app.js

"scripts": {
   
   
   "dev": "nodemon ./app.js"
 },

app.js搭建初始框架

const express = require("express");

const bodyParser = require("body-parser");

const {
   
    readFileSync, writeFileSync } = require("fs");

const {
   
    resolve } = require("path");

const app = express();

// 设置中间件
app.use(bodyParser.urlencoded({
   
    extended: true }));

app.use(bodyParser.json());

// 允许跨域
app.all("*", (req, res, next) => {
   
   
  res.header("Access-Control-Allow-Origin"