Vue2+Node.js前后端分离项目创建常用配置及踩坑点

1. 创建github项目

1.1   在 github 上创建一个仓库，创建时记得选择初始化 README.file ，选择正确的 .gitignore 格式以及 liscense。

1.2   将仓库克隆到本地并使用 VSCode 打开该项目 ，详细步骤见下文：

VSCode中的git使用篇_Presbyterian的博客-CSDN博客_vscode使用git基本上使用在一个目录下clone项目；git clone XXXXXX.git使用VScode 打开项目右击通过Code打开。使用vscode提交代码打开下面视图，添加一行文字## 测试提交点击 + ；相当于git add .点击对号；等于git commit -m "备注信息"；右边的箭头输入需要备注的信息。然后按 Enter 确定。回车之后，然后我们可以看到。所有的...https://blog.csdn.net/weixin_38023551/article/details/105785223

注意：也可以使用国内的Gitee码云平台创建仓库，具体使用步骤如下：

【git】在vscode中使用git同步到gitee_yyhnet.cn的博客-CSDN博客_vscode 同步git文章目录操作步骤1.在gitee中新建仓库2.在本地初始化仓库3.提交代码到暂存区4.提交已暂存文件到工作区5.同步代码到远程仓库最终效果操作步骤1.在gitee中新建仓库2.在本地初始化仓库1.在vscode中文件-打开文件夹选择你要初始化的文件位置2.如下图所示初始化代码仓库3.提交代码到暂存区4.提交已暂存文件到工作区在输入框内输入更改的信息，按Enter，此时代码已提交到本地master分支上5.同步代码到远程仓库第一次先添加远程仓库，复制你的仓库url链接，输入你仓https://blog.csdn.net/qq_43094563/article/details/122611896

---

2. 创建Node.js服务器端项目 server

2.1 在总项目根目录文件夹中新建一个名为 server 的文件夹，用于使用 Node.js 编写服务端代码。

在终端中打开 server 文件夹，并执行如下语句，初始化 Node.js 项目：

npm init -y

（完成该步需要下载和使用 node 以及 npm ，MacOS 的 node 下载和使用方法见下文：）

Mac 安装 nodejs （图文详细步骤）_Small蒙奇的博客-CSDN博客_mac安装nodejsMac 下 安装 nodejshttps://blog.csdn.net/u010053344/article/details/50545304（ node 项目中还需要用到 nodemon 工具，下载方式是在终端中输入 sudo npm i -g nodemon ）

2.2 在 server 文件夹下新建一个名为 index.js 的文件，作为服务端项目的入口文件。

2.3 在 server 文件夹下的终端中输入以下命令，导入需要的包和中间件：

# 服务端项目必备包：web开发工具、数据库、跨域
npm i express@next mongoose cors

# 可选的包：
# 用于处理单复数转换，单词的格式转换
npm i inflection
# 用于上传文件
npm i multer
# 用于密码散列加密
npm i bcryptjs --save
# 做webtoken验证
npm i jsonwebtoken
# 判断东西是否存在，条件是否正确
npm i http-assert
# 把某个文件夹下的所有文件引用进来，使用一遍
npm i require-all

2.4 打开 server 文件夹下的 package.json 文件，添加如下一行代码：

（修改完成后，保存文件，就可以直接在终端输入npm run serve来执行这个服务端的项目）

2.5 server 项目启动方式

在终端中运行如下命令：（注意：运行该命令时，终端所在文件夹是server文件夹）

npm run serve

2.6 server 项目终止方式

在终端中按住 Ctrl + C 终止项目的运行，等下次需要再运行 server 项目。

 Note：Node.js服务器端的项目结构及代码编写方式可以参考我之前的一篇文章

Nodejs服务端开发实战——大事件后台API项目（获取文章的列表数据功能待完善...）_番大茄子的博客-CSDN博客Nodejs服务端开发实战之大事件后台API项目https://blog.csdn.net/SongD1114/article/details/123932700?spm=1001.2014.3001.5502

---

3. 创建Vue2前端项目 web 和 admin

3.1 在总项目根目录文件夹中打开终端，输入 vue create web ，选择使用默认项目即可，生成的文件夹用于使用 Vue2 编写用户端网站的前端代码。

      同时，在总项目根目录文件夹中打开另外一个终端，输入 vue create admin ，选择使用默认项目即可，生成的文件夹用于使用 Vue2 编写后台管理页面前端代码。

       两个 Vue2 项目都创建完成后，总项目根目录文件夹中新增两个文件夹 web 和 admin。

vue create web
vue create admin

（完成该步需要使用Vue Cli工具，该工具的下载和使用方法如下文：）

安装 | Vue CLI️ Vue.js 开发的标准工具https://cli.vuejs.org/zh/guide/installation.html
3.2 分别修改 web 和 admin 项目中 package.json 文件中 rules 的配置，防止项目因一些小问题频繁报错，具体修改方法见下方文章：

vue2.x版本报错error: ‘xxxx‘ is defined but never used (no-unused-vars)_聂大哥的博客-CSDN博客在vue2.x中，只要是声明了变量没有使用或者引入了某个文件没有使用就会报错，这其实是语法校验规则。我们只需要关闭这种校验规则即可。在项目中的package.json文件中找到rules，初始里面是空的，我们只需要加入以下内容即可："rules": { "generator-star-spacing": "off", "no-tabs":"off", "no-unused-vars":"off", "no-console":"off", "no-irregular-whithttps://blog.csdn.net/weixin_43729943/article/details/111477410@vue/cli 5.0.1脚手架报错 1:1 error Component name “XXXX“ should always be multi-word vue/multi-word-_我真的是乞丐的博客-CSDN博客报错：1:1 error Component name “Login” should always be multi-word vue/multi-word-component-names原因分析：是我们组件名不规范导致的，官方建议采用驼峰式命名解决方案1：组件使用驼峰命名解决方案2：关闭这个命名校验加上下图框中的配置即可const { defineConfig } = require('@vue/cli-service')module.exports = defineConfihttps://blog.csdn.net/weixin_44967580/article/details/1232857343.3 web 和 admin 项目的启动方式

• 将终端所在文件夹切换为 admin 文件夹，并在终端中输入npm run serve来执行admin项目。
• 将终端所在文件夹切换为 web 文件夹，并在终端中输入npm run serve来执行web项目。
• 启动成功后，即可点击进入项目首页 http://localhost:8080/ 

npm run serve

3.4 web 和 admin 项目终止方式

在终端中按住 Ctrl + C 终止项目的运行，等下次需要再运行该项目。

---

4. 配置Vue2前端项目 admin

admin 项目是一个后台管理系统网站，因为是电脑端的网站所以用到了element-ui。

4.1 安装 admin 项目所需包：

将终端切换到 admin 文件夹下，在终端中依次执行以下命令：

# 1. 引入element-ui
vue add element

# 2. 引入路由
vue add router

# 3. 提交数据，请求接口 
npm i axios

4.2 如果需要的话还可以安装： 

# 富文本编辑器
npm i vue2-editor

---

5. 配置Vue2前端项目 web

5.1 安装 web 项目所需包：

将终端切换到 web 文件夹下，在终端中依次执行以下命令：

# 1. 引入路由
vue add router

# 2. 提交数据，请求接口 
npm i axios

 5.2 如果需要的话还可以安装： 

# SASS（SCSS）用于生成css工具类，和less差不多
npm i -D sass sass-loader
# 格式化日期的包
npm i dayjs

 Vue2工程中使用SCSS定义工具样式_番大茄子的博客-CSDN博客

---

6. 创建完成后的项目结构

 展开之后的项目结构：

---

参考资料：

[第一章 + 第二章] NodeJs + VueJs (Express + ElementUI) 全栈开发王者荣耀手机端官网和管理后台_哔哩哔哩_bilibili免费不易，淘宝同名店铺《全栈之巅》求关注QQ2群：839167184，微信加小姐姐732500779拉群Git 源码: https://github.com/wxs77577/node-vue-moba，代码都在各个分支里，持续更新中，欢迎 star；编辑器 vscode，主题 material theme，字体mononoki；请先安装 nodejs 10+ ，mongodb server，nohttps://www.bilibili.com/video/BV1A4411Y7fi/?spm_id_from=333.788.recommend_more_video.0

[第三章]NodeJs + VueJs (Express + ElementUI) 全栈开发王者荣耀手机端官网和管理后台 - 第三章_哔哩哔哩_bilibili免费不易，淘宝同名店铺《全栈之巅》求关注QQ2群 839167184，微信加小姐姐732500779拉群Git 源码: https://github.com/wxs77577/node-vue-moba，代码都在各个分支里，持续更新中，欢迎 star；编辑器 vscode，主题 material theme，字体mononoki；请先安装 nodejs 10+ ，mongodb server，nohttps://www.bilibili.com/video/BV1S4411W79F/?spm_id_from=333.788.recommend_more_video.0