0%

微信小程序学习笔记(二)--------开发环境准备(微信小程序开发工具+Vue)

微信小程序开发环境

  1. 安装微信小程序开发工具
    https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

  2. 导入本项目的litemall-wx模块文件夹

打开微信开发者工具

选择小程序项目

选择litemall-wx模块文件夹

此时直接点击确定会出现以上错误

更换AppID
点击确定

  1. 使litemall-wx-api模块运行

  2. 打开litemall-wx模块的config文件夹中的api.js,并设置正确的后台数据服务地址

现在微信小程序之所以能显示图片和文字是因为使用了此项目开发者原本使用的API地址。
接下来我们要将API地址修改为自己电脑上的。

画面再转回微信程序开发者工具

似乎没什么变化,但是打开config里的api.js会发现,里边的API地址已经随IDEA对文件的改变而同步改变。
其实通过第二步和第三步就可以看出是否使litemall-wx-api模块运行对微信开发者工具里的显示图片和文字毫无影响,就是因为刚才所说的api.js里的API地址为此项目开发者原本使用的API地址。
现在我们将API地址修改为了自己电脑上的。可通过关闭litemall-wx-api模块,看微信开发者工具里的是否正常显示图片文字来验证。
关闭litemall-wx-api模块后。

点击编译

会发现不再显示图片和文字。
其实修改为本地API地址后,使用的是本地数据库的数据。

Vue开发环境

  1. 安装npm
    https://nodejs.org/en/
    npm与Node.js是一起发布的,意思就是在下载Node.js时,会自动安装npm。

下载最多人使用的LTS版本
完成后打开安装包。

Next

Next

自己选择路径,Next

默认的设置就好,Next

Install

然后在终端里输入npm -v验证npm是否安装成功

  1. 安装VSC(Visual Studio Code)
    https://code.visualstudio.com/Download

下载完成后,打开安装包

下一步

下一步

位置自己选,下一步

下一步

下一步

安装
3. 导入本项目的litemall-admin模块文件夹
打开VSC

点击打开文件夹

选中litemall-admin模块文件夹

导入完毕。
4. 安装依赖库
查看->集成终端
打开终端

确认现在所在位置为litemall-admin
然后输入npm install

如果出现上图的错误,则是由于npm网站在国内速度非常慢,所以可以在命令后面加上淘宝的镜像即为

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

效果立竿见影。
5.编译并运行
确认现在所在位置为litemall-admin
在终端输入命令
npm run dev
然后将会弹出一个网页

如果没有弹出网页,在浏览器输入http://localhost:9527
但现在是无法登陆的,因为litemall-admin-api模块还未运行
打开IDEA

然后打开litemall-admin-api模块
接着点击登陆便可进入后台