前端安装部署教程

前端教程专为 Vue 项目打造，聚焦环境配置、依赖安装、项目启动等环节，清晰指引从环境准备到项目运行的全流程。教程步骤简洁易懂，适配 Vue2 / Vue3 开发场景，快速解决常见启动报错、配置问题。

标注 ⭐ 的步骤为关键注意点，涉及环境版本、命令执行、配置修改等易错环节，务必重点关注，确保项目顺利运行。

南粉福利🥇

提示

作者教程写的非常详细，严格按教程来一定可以跑起来！

给项目Star⭐了的同学可以 联系作者 免费给你远程跑起来（前提：自己走过一遍教程，环境已准备OK）

部署效果

开源版演示地址：https://open.nansin.top（普通用户：自己注册就行；管理员：椿/123456）

商业版演示地址：https://bbs-corp.nansin.top（超管：马亮南生/123456，体验完整的权限控制）

视频教程：https://www.bilibili.com/video/BV1ThYQzfEvR

文档教程：01 南生运营（南生系列基础系统）的设计理念、 02 10分钟搞懂南生论坛、 03 如何进行南生论坛管理维护？、 04 南生运营功能介绍、 05 如何获取南生论坛设计文档？、 06 南生论坛日常迭代（开源计划）

常见问题⭐

见【后端】安装部署教程 -> FAQ

环境准备

1. 安装nodejs

怎么安装自己谷歌/百度

node和npm的版本==尽量和作者一致==哈，其他版本作者也没有测试过（不清楚有没有问题）

管理nodejs作者推荐使用NVM ：NVM 安装使用介绍

验证安装是否成功，出现下面的版本号说明安装成功

2. 安装yarn

更多安装方式自己谷歌/百度

npm i -g yarn

验证安装是否成功，出现下面的版本号说明安装成功

pull源码并导入idea

为什么不用vscode？不要问，问就是作者习惯idea了...

# github
# github（Vue2和Vue3二选一即可）
git clone https://github.com/maliangnansheng/bbs-vue-ui.git
git clone https://github.com/maliangnansheng/bbs-vue3-ui.git

# or

# 码云（Vue2和Vue3二选一即可）
git clone https://gitee.com/maliangnansheng/bbs-vue-ui.git
git clone https://gitee.com/maliangnansheng/bbs-vue3-ui.git

导入idea直接看图

效果

启动项目

1. 安装项目依赖⭐

   yarn

   

2. 启动项目

   yarn serve

   

失败（成功请忽略）

自己按教程实在无法解决 联系作者 免费远程

1. 网络问题

如果出现类似截图上面的报错信息，直接看这篇文章 设置成国内的镜像源

2. 版本问题

除上面“网络问题”之外的启动失败 99% 的原因都是因为你本地nodejs版本与作者教程提供的版本不一致导致的，请和作者教程版本保持一致！

实在不能和作者保持一致的请参考以下配置： nodejs版本==高于==作者，package.json配置文件中的scripts替换成如下内容：

"scripts": {
    "serve": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build"
  },

浏览器打开项目⭐

前提： nginx 和 前端项目 以及 后端项目都已经启动

访问地址：http://bbs.localhost.com/ 大功告成！

注：请使用域名（即：http://bbs.localhost.com/）访问，否则某些功能无法正常使用！

南生论坛【管理员】账号：椿/123456

我要部署到Linux

南生论坛（本系统）- Linux部署教程

有偿服务⭐

全方位一体式一对一远程手把手教学，有效期一年（365天）

完全自愿！扫码加作者

需要作者一对一讲解和分析代码的同学需要有偿（499￥-挣点购买云服务器的费用 😜）

我要商用⭐

你如果觉得这个项目非常契合自己（公司）的发展需求，可以获取商用授权