手把手教你调试构建一个Vue/小程序商城项目源码
下面将详细的介绍weiphp5.0
商城项目的调试打包上线的流程:
- 安装NodeJs/NPM
- 安装CNPM(可忽略)
- 运行项目
- 打包上线项目
1. 安装NodeJs
推荐到NodeJS的官网下载安装包
下载完成后双击下载好的文件开始安装,点击next进入下一步,勾选同意协议,继续下一步。然后选择安装的位置,默认是在C盘,改成D盘安装,这是个好习惯,建议保持。全部next
安装就好了
安装NodeJs之后默认就有NPM,这时在打开命令行(快捷键window+r
,输入cmd
)
在命令行中输入node -v
/npm -v
,如无意外有版本号输入,则表示安装好了
2. 安装CNPM
这步可以忽略,如果你对自己的网速非常自信的话,cnpm
是国内淘宝的镜像,可以更快的下载你所需要的包,运行以下命令安装cnpm
:
npm install -g cnpm --registry=https://registry.npm.taobao.org
复制代码
安装完成后在命令行中输入cnpm -v
,如果和下面输出大致相同,就安装成功了,以后就可以使用cnpm
代替npm
安装各种包了。
3. 运行商城项目
3.1 下载项目
商城前后端源码在codeing上,下载完之后解压就可以之后打开就可以看到下面这些目录文件:
3.2 运行Vue项目
首页我们进入根目录下./mpvue/wap/
项目文件夹里,用你喜欢的编辑器的命令行打开它,这里推荐vscode
,也可以使用window命令行工具
如果你安装了cnpm
就可以使用cnpm install
反之则 npm install
:
上面显示有27个包要安装,目前安装了6个,默默等待安装...,直接看到类似All packages installed
的提示,就表示安装成功了。
接下来我们输入npm run serve
运行它,会在本地打开一个8080的端口,默默进度到100%...
直到出现有链接,`打开这个链接直接在本地调试这个项目了:
运行之后的项目是这样的,推荐使用谷歌chrome浏览器
,功能更强大,好用
3.3 运行小程序项目
同上,我们也是先进入到根目录下的./mpvue/weiapp/
项目文件夹里,使用命令行到达它的路径
和上面一样输入cnpm install
或者 npm install
安装依赖的包,安装完成后会出现一个node_modules
的大文件夹,里面就是你所安装的所有依赖:
接下来我们执行npm run dev
,这个和vue
项目不一样,但是在package.json
中可以自定义的
使用微信开发者工具打开这个小程序项目,把Appid换成自己的,点击确定
打开之后的项目是这样滴,在编辑器里修改代码,微信开发者工具
就会自动刷新代码,进行调试小程序方便多了
4. 打包上线商城项目
vue网页商城
和小程序商城
上线都是先通过npm run build
打包构建一下
4.1 打包上线Vue网页项目
相比于小程序,Vue商城项目也很简单,只要把构建好的文件夹上传到服务器,就可以直接打开运行了,默认生成的文件是在项目根目录下的public/wap里
,你也可以在vue.config.js
里面修改你生成之后的路径,建议不要修改,因为可能商城后台也写了这个默认的路径。
4.2 打包上线小程序项目
构建好的之后,打开开发者工具,点击上传代码到微信开发者后台进一步操作就可以了
手把手教你调试构建一个Vue/小程序商城项目源码相关推荐
- 闲来无事,用java写了一个魔方小程序。附源码
闲来无事,用java写了一个魔方小程序.附源码 使用三维数组.相对来说还是简单.呵呵. import java.util.ArrayList; import java.util.List; impor ...
- java实现魔方_闲来无事,用java写了一个魔方小程序。附源码 | 学步园
闲来无事,用java写了一个魔方小程序.附源码 使用三维数组.相对来说还是简单.呵呵. import java.util.ArrayList; import java.util.List; impor ...
- PHP开发B2C商城 微信小程序商城系统源码+数据库,轻量级前后端分离的电商系统,支持微信小程序 + H5+ 公众号 + APP
项目介绍 一款轻量级.高性能.前后端分离的电商系统,支持微信小程序 + H5+ 公众号 + APP,前后端源码完全开源,看见及所得,完美支持二次开发,可学习可商用,让您快速搭建个性化独立商城. 完整代 ...
- 多端合一小程序商城制作系统源码 后台自由DIY+全开源可二开
分享一个多端合一小程序商城制作系统源码,系统后台自由DIY,含完整前后端+部署教程,源码全开源可二开. 系统支持7个终端+一个后台,省去一个平台开发一个小程序的麻烦,支持微信小程序.支付宝小程序.百度 ...
- 推荐一个微信小程序商城项目
推荐一款实用的微信小程序商城项目,这个项目不仅有商城基本的功能,比如:商品管理.订单管理.用户管理,还有分销功能,具备广告.优惠券等功能. 技术选型 后端采用 Spring 技术栈,使用到的框架主要包 ...
- crmeb打通版开源微信公众号小程序商城框架源码
crmeb是什么? crmeb是一套客户管理加电商营销系统,基于ThinkPhp6.0+Vue采用前后端分离模式开发,前后台都具有非常标准的API接口,是一款非常优秀的开源微信端及小程序商城框架,能够 ...
- 【程序源代码】微信小程序商城-最新源码
关键字:微信小程序 商城源码 前后端都有 正文 | 内容 01 - 基于Spring Boot和微信小程序框架开发.其中包括微信小程序和后台管理端,功能上常用的功能都有包括:分销(支持三级).团购(拼 ...
- 微信小程序商城系统源码
应用介绍 微信小程序商城开发框架php+uniapp系统源码,前端采用的是主流的uniapp框架,后端是php语言开发,前后端开发全部是开源的源码,减少重复的代码内容,支持小程序商城营销功能,优惠券, ...
- 零基础一天学会开发制作一个微信小程序【附源码】
时至如今,微信已然成为一个全民通用的工具,相应的微信小程序开发已经是一个热门的开发项目. 小程序的前端代码和web是极其相似的,wxml和html.wxss和css以及js,现在还经常将wxss读作c ...
最新文章
- YOLOv4 资源环境配置和测试样例效果
- 最锋利的Visual Studio Web开发工具扩展:Web Essentials详解
- Android AppCompatCheckBox在低版本上不显示问题
- 0基础学python难吗-0基础学武汉Python开发课程有多难?该怎么入门?
- CSP认证201412-3	集合竞价[C++题解]:枚举、结构体
- 无法读取配置节aspnetcore_传奇列表为什么会读取失败?
- virtualenv在ubuntu系统中的缺点
- LInux下du, df, top, free, pstack, su, sudo, adduser, password命令
- 张莉python 玩转数据答案_中国大学MOOC(慕课)用Python玩转数据答案大全
- win 10 linux shell,实用工具:Win10下的bash shell打开教程
- Excel 公式学习笔记:数组用法
- 卫星控制类操作系统VAX/VMS简介
- js 获取伪类和css变量
- 首次揭秘 | 淘宝新发布的躺平如何做3D场景化导购?
- 单片机秒表c语言程序设计思路,单片机秒表程序设计
- CRF原理介绍(以BILSTM-CRF模型为例)
- QT中使用C++ socket通信,socket通信原理三次握手和四次握手详解、客户端与服务端实例详解
- Java 自学路线图之 Java 进阶自学
- 【干货】直播聊天室详细分解,让你一眼学会快速搭建!
- 光电振荡器的MATLAB仿真,基于Matlab的RLC阻尼振荡电路建模与仿真研究
热门文章
- xge_mac学习(2) -- 模块结构
- 实现在win10上安装fmriprep
- 虹科分享 | 终端安全防护 | 网络安全术语列表(终篇)
- plsql能不能连接mysql_plsql可以连接MySQL吗
- Windows 8.1中添加美式键盘
- pytorch中nn.moudle模块
- Android实现ListView的A-Z字母排序和过滤搜索功能,实现汉字转成拼音
- 5y计算机应用2010综合测评答案,福师大《数据库管理与应用》在线作业一(答案参考)...
- [海明威]《乞力马扎罗的雪》灵魂上扬寻觅它永远的归宿
- 爬虫的原理和数据抓取