ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
# 安装基本工具 如果你的本地已经安装了nodejs(npm),省略这一步 ## 安装nodejs 推荐到[NodeJS的官网](https://nodejs.org/en/)下载安装包 ![](https://user-gold-cdn.xitu.io/2018/12/12/167a0472a0ccef4d?w=1398&h=752&f=png&s=80576) 下载完成后双击下载好的文件开始安装,点击next进入下一步,勾选同意协议,继续下一步。然后选择安装的位置,默认是在C盘,改成D盘安装,这是个好习惯,建议保持。全部`next`安装就好了 ![](https://user-gold-cdn.xitu.io/2018/12/12/167a04ce81be3409?w=510&h=397&f=png&s=42379) 安装NodeJs之后默认就有NPM,这时在打开命令行(快捷键`window+r`,输入`cmd`) ![](https://user-gold-cdn.xitu.io/2018/12/12/167a04ee0168389c?w=436&h=258&f=png&s=18281) ![](https://user-gold-cdn.xitu.io/2018/12/12/167a04efc59d7f4d?w=993&h=519&f=png&s=23718) 在命令行中输入`node -v`/`npm -v`,如无意外有版本号输入,则表示安装好了 ![](https://user-gold-cdn.xitu.io/2018/12/12/167a0514f72505dc?w=993&h=519&f=png&s=22926) ## 安装cnpm 这步可以忽略,如果你对自己的网速非常自信的话,`cnpm`是国内淘宝的镜像,可以更快的下载你所需要的包,运行以下命令安装`cnpm`: ``` npm install -g cnpm --registry=https://registry.npm.taobao.org ``` 安装完成后在命令行中输入`cnpm -v`,如果和下面输出大致相同,就安装成功了,以后就可以使用`cnpm`代替`npm`安装各种包了。 ![](https://user-gold-cdn.xitu.io/2018/12/12/167a05493d13c961?w=925&h=156&f=png&s=14617) # 编译H5页面 商城前后端源码在[coding](https://coding.net/u/weiphpdev/p/weiphp5.0/git?from=singlemessage)上,下载完之后进入根目录下`./mpvue/wap/`项目文件夹里,如果你安装了`cnpm`就可以使用`cnpm install` 反之则 `npm install`: ![](https://user-gold-cdn.xitu.io/2018/12/12/167a06348ca11612?w=600&h=146&f=png&s=7470) 上面显示有27个包要安装,目前安装了6个,默默等待安装...,直接看到类似`All packages installed`的提示,就表示安装成功了。 ![](https://user-gold-cdn.xitu.io/2018/12/12/167a066adba83694?w=1575&h=490&f=png&s=99699) 安装所有包之后`npm run build`打包构建一下 ![](https://user-gold-cdn.xitu.io/2018/12/12/167a0800126c9f34?w=511&h=59&f=png&s=3570) 只要把构建好的文件夹上传到服务器,就可以直接打开运行了,默认生成的文件是在项目根目录下的`public/wap里`,你也可以在`vue.config.js`里面修改你生成之后的路径,建议不要修改,因为可能商城后台也写了这个默认的路径。 # 编译小程序页面 商城前后端源码在[coding](https://coding.net/u/weiphpdev/p/weiphp5.0/git?from=singlemessage)上,下载完之后进入根目录下`./mpvue/weiapp/`项目文件夹里,如果你安装了`cnpm`就可以使用`cnpm install` 反之则 `npm install`: ![](https://user-gold-cdn.xitu.io/2018/12/12/167a06348ca11612?w=600&h=146&f=png&s=7470) 安装所有包之后`npm run build`打包构建一下 ![](https://user-gold-cdn.xitu.io/2018/12/12/167a0800126c9f34?w=511&h=59&f=png&s=3570) 构建好的之后,打开开发者工具,点击上传代码到微信开发者后台进一步操作就可以了 ![](https://user-gold-cdn.xitu.io/2018/12/12/167a07eebfdffa15?w=1771&h=969&f=png&s=278238)