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

基于 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

三、添加配置

在client/vite.config.js中配置

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

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

"scripts": {
   
   "dev": "nodemon ./app.js"
 },
1
2
3
4

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19