手把手教你调试构建一个Vue/小程序商城项目源码

下面将详细的介绍weiphp5.0商城项目的调试打包上线的流程:

  1. 安装NodeJs/NPM
  2. 安装CNPM(可忽略)
  3. 运行项目
  4. 打包上线项目

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/小程序商城项目源码)