• 源码铺子 欢迎您

禾匠v4vue前端用Hbuilderx编译工具操作说明

分类:网络资源 时间:2023-07-28 22:34 浏览:261
概述
独立开源版:禾匠榜店商城V4版本,后端更新至4.5.8版本,开源版本;版本包含:插件全开源+后端开源+前端开源+vue前端源代码,前后端都已经测试过了,修复前端登录,无任何问题。包含:全开源后端(一键安装)、开源前端(VUE未编译源代码)、完整数据库(已安装旧版的用户升级用)、编译的前端安装教程:https://www.shopet.cn/product/view2521.htmlVUE教程:新增:UU跑腿;新增:平台全局版权设置;新增
内容

一:安装环境


1、本机系统:Windows 7 企业版(64位),win8.1、win10机器以上均可。


2、Node.js:node-v12.19.0-x64.msi


二:安装步骤


1.下载所需的node版本。


  地址:https://nodejs.org/zh-cn/


  我下载的版本:

1.png

2.双击下载的node-v12.19.0-x64.msi进行安装


3.点击next按钮进行安装


4.我选择安装在D: ode文件夹中


5.后点击finishi 完成安装


6.win+R 打开cmd

2.png

7.输入node -v      npm -v 检验是否安装成功

3.png

8.在node的安装目录下创建node_global和node_cache两个文件夹


9.执行命令:


npm config set prefix "D: ode ode_global"


npm config set cache"D: ode ode_cache"


10.安装cnpm


npm install -g cnpm --registry=https://registry.npm.taobao.org


备注:


此时安装完的cnpm出现在D: ode ode_global文件夹下,cnpm文件夹出现在D: ode ode_global 


ode_modules文件夹下面,此时在cmd中输入cnpm -v显示cnpm不是内部命令


 11.解决cnpm不是内部命令


方案一:将cnpm的文件挪到与npm相同的位置


方案二:配置环境变量


在用户变量中新建变量名CNPM_PATH,变量值D: ode ode_global ode_modulescnpmin


在用户变量的Path中加入%CNPM_PATH%;


 12.环境变量配置:


在系统变量*新增了两个变量


NODE_HOME D: ode


NODE_PATH D: ode ode_global ode_modules


在用户变量的path中也加入了%NODE_HOME%;


 三.问题解决


  若此时仍会出现问题,可以将npm指向淘宝的registry


  npm 默认的 registry ,也就是下载 npm 包时是从国外的服务器下载,国内很慢,一般都会指向淘宝 https://registry.npm.taobao.org


原npm地址


npm config set registry http://registry.npmjs.org


2.设置国内镜像


通过config命令


我用到的命令是:npm config set registry https://registry.npm.taobao.org

二、下载Hbuilderx开发工具,同类型的开发工具还有很多这里推荐VScode和Hbuilderx,根据以下地址下载即可:https://www.dcloud.io/hbuilderx.html

4.png

然后根据你自己的操作系统选择苹果或者Windows版本,推荐选择正式版APP开发版:如图所示

5.png

下载完之后直接解压安装包并运行下面程序:

6.png

打开之后直接点击“工具”“安装插件”,把这些插件全部勾选装上

7.png

此时再点击“工具”——设置——运行配置,然后可以设置你微信开发者工具(也可以设置百度、支付宝、抖音、QQ等)的运行路径,

8.png

后面调试程序自动帮你打开微信开发者工具然后你自己上传代码。

9.png

然后点击左上角的“文件”然后“打开目录”,打开你的禾匠前端代码的的根目录。如图所示

10.png

根据下图所示安装依赖即可(如果是首次打开Hbuilderx的同*行这里选择内部命令或者外部命令都行,然后选择“npm install”,如图所示:

可以在“工具”菜单中自行调整)。待下方进度条安装完毕之后

13.png

此时修改vue文件中:

修改完之后点击工具栏上面的“运行”然后“运行到小程序模拟器”——“微信开发者工具”

运行完编译操作之后如果你设置了自动打开微信开发者工具则会自动帮你打开微信小程序开发者工具,方便调试。此时如果你的小程序没有直播权限则会提示你需要授权直播插件,没有权限则自己去掉app.json代码里面关于直播插件的代码即可。如下图所示:

彻底调试没问题则类似于上一步操作点击“发行”——“小程序-微信(仅适用于uniapp)”,检查小程序信息无误之后直接点“发行”按钮,

20.png

然后等程序编译完成会自动打开微信开发者工具,同样查看是否有直播权限。如果不要直播可以彻底在vue代码的app.json中去掉就不会重复编译。

21.png


评论
资讯正文页右侧广告
点击排行
源码铺子
网站首页| 关于我们| 广告合作| 联系我们| 隐私条款| 免责声明| 网站地图
CopyRight ©  2020- 源码铺子-www.shopet.cn源码铺子川公网安备51068202000248号 蜀ICP备20020328号-1
本站所有资源来源于互联网,仅用于学习及参考使用,切勿用于商业用途,如产生法律纠纷本站概不负责!
资源除标明原创外均来自网络转载,版权归原作者所有,若侵犯到您权益请联系我们删除,我们将及时处理!若您需使用非免费的软件或服务,请购买正版授权并合法使用!
本站支持http/3及IPV6访问! 本站支持http/3及IPV6访问!
浏览记录
联系客服
平台客服1 平台客服2 工作时间
09:00 - 21:00
手机版
源码铺子
扫一扫进手机版
返回顶部