前言
小程序及web前端仓库&指引:点击前往
最近看到有很多站长、开发者朋友对于 3.0 前端的编译构建存在很多问题,所以在这里总结了一份简单的指南,针对可能出现的常见问题给出一些解决办法,帮助大家更好的使用 3.0 项目。
本教程,分为【1.运行环境篇】【2.构建编译篇】,先配置环境,后进行构建。
一、项目地址
3.0的前端项目地址(PC、H5、小程序)为以下,管理端暂时未完全开源,待开源后会在这里补充
二、打包构建方法
和 2.x 版本不同,3.0的项目采用了基于 React 和 Taro 体系的技术架构,故无法再采用 hbuilder 来进行打包构建工作,以下我将以图文的方式介绍 3.0 的打包构建方法。
2.1 命令行工具
2.1.1 这里 linux 和 Mac 直接使用系统自带命令行终端 (terminal)即可
![图片[1]-【运行环境篇】DZQ 前端编译构建指南-微看VCAN](https://www-vcan-1255523153.cos.ap-guangzhou.myqcloud.com/2021/07/20210718060110349.png)
![图片[2]-【运行环境篇】DZQ 前端编译构建指南-微看VCAN](https://www-vcan-1255523153.cos.ap-guangzhou.myqcloud.com/2021/07/20210718060101153-1024x651.png)
2.1.2 Windows 推荐使用 cmd ,powershell 可能存在兼容性问题
Win + R 启动 cmd
![图片[3]-【运行环境篇】DZQ 前端编译构建指南-微看VCAN](https://www-vcan-1255523153.cos.ap-guangzhou.myqcloud.com/2021/07/20210718060549471.jpg)
2.2 Node.js 安装
基于 M1 芯片的 Mac,需要使用 NVM 安装 14 版本的构建包。
Node首先进入 Node.js 的官网下载安装包(这里推荐稳定版 14)
Node.js 的官网地址:https://nodejs.org/en/
![图片[4]-【运行环境篇】DZQ 前端编译构建指南-微看VCAN](https://www-vcan-1255523153.cos.ap-guangzhou.myqcloud.com/2021/07/20210718060905606-1024x820.png)
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
![图片[5]-【运行环境篇】DZQ 前端编译构建指南-微看VCAN](https://www-vcan-1255523153.cos.ap-guangzhou.myqcloud.com/2021/07/20210718061132216-1024x712.png)
之后使用 nvm use v14 ,来将 node v14 设定为默认的 node 版本
![图片[6]-【运行环境篇】DZQ 前端编译构建指南-微看VCAN](https://www-vcan-1255523153.cos.ap-guangzhou.myqcloud.com/2021/07/20210718061145332-1024x718.png)
三、开发者工具下载
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 提供的下载操作来下载最新的源码。
![图片[7]-【运行环境篇】DZQ 前端编译构建指南-微看VCAN](https://www-vcan-1255523153.cos.ap-guangzhou.myqcloud.com/2021/07/20210718061657170-1024x608.png)
如果您有需要跟进最新的源码,甚至更高阶的对源码进行二开修改,我们推荐使用 Git 客户端进行下载
Windows 没有自带 git 客户端,可以自行下载安装:https://git-scm.com/downloads
执行如下命令进行源码的克隆
git clone https://gitee.com/Discuz/discuz-fe
![图片[8]-【运行环境篇】DZQ 前端编译构建指南-微看VCAN](https://www-vcan-1255523153.cos.ap-guangzhou.myqcloud.com/2021/07/20210718061622434-1024x270.png)
至此,所有的构建编译前准备工作已经完成,接下来就是构建编译过程的详细指南~
👋 感谢您的观看!
资源解压密码:ipotato.chat
1 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
3 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
4 本站资源统一解压密码:ipotato.chat
暂无评论内容