前言

小程序及web前端仓库&指引：点击前往

最近看到有很多站长、开发者朋友对于 3.0 前端的编译构建存在很多问题，所以在这里总结了一份简单的指南，针对可能出现的常见问题给出一些解决办法，帮助大家更好的使用 3.0 项目。

本教程，分为【1.运行环境篇】【2.构建编译篇】，先配置环境，后进行构建。

一、项目地址

3.0的前端项目地址（PC、H5、小程序）为以下，管理端暂时未完全开源，待开源后会在这里补充

discuz-fe

二、打包构建方法

和 2.x 版本不同，3.0的项目采用了基于 React 和 Taro 体系的技术架构，故无法再采用 hbuilder 来进行打包构建工作，以下我将以图文的方式介绍 3.0 的打包构建方法。

2.1 命令行工具

2.1.1 这里 linux 和 Mac 直接使用系统自带命令行终端 （terminal）即可

2.1.2 Windows 推荐使用 cmd ，powershell 可能存在兼容性问题

Win + R 启动 cmd

2.2 Node.js 安装

Node首先进入 Node.js 的官网下载安装包（这里推荐稳定版 14）

Node.js 的官网地址：https://nodejs.org/en/

2.3 linux 用户安装Node.js

linux用户 和 Mac用户可以使用 NVM 的方式来安装 Node

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

之后在命令行中执行 nvm install v14 来安装 Node v14.17

之后使用 nvm use v14 ，来将 node v14 设定为默认的 node 版本

三、开发者工具下载

3.1 微信开发者工具

微信小程序的构建发行，需要依赖于微信的开发者工具，不论是 mac 或是 Windows 都需要安装微信小程序开发者工具（Linux 暂无官方发行版）

下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

3.2 源码编辑工具VScode

工欲善其事必先利其器，不论你是有基本编辑需求还是进行深层二开需求的站长，我们都推荐您使用 vscode 作为您的编辑器，美观大方好用。

下载地址：https://code.visualstudio.com/

3.3 项目下载

如果没有随时跟进最新源码的需求，可以直接通过 Gitee 提供的下载操作来下载最新的源码。

如果您有需要跟进最新的源码，甚至更高阶的对源码进行二开修改，我们推荐使用 Git 客户端进行下载

Windows 没有自带 git 客户端，可以自行下载安装：https://git-scm.com/downloads

执行如下命令进行源码的克隆

git clone https://gitee.com/Discuz/discuz-fe

至此，所有的构建编译前准备工作已经完成，接下来就是构建编译过程的详细指南~