小程序搭建开发环境,并新建一个mpvue项目及踩坑记

小程序搭建开发环境,并新建一个mpvue项目及踩坑记

  • 搭建小程序的开发环境
    • 初始化一个 mpvue 项目
      • 踩坑记

搭建小程序的开发环境

小程序自己有一个专门的微信开发者工具。最新版本下载地址
这一步比较简单,按照提示一步步安装好就行,然后用微信扫描二维码登陆。 至此小程序的开发环境差不多完成。
然后还需要填写一下小程序的一些基本信息,然后看到开发中的开发设置里有一个appid。
小程序搭建开发环境,并新建一个mpvue项目及踩坑记_第1张图片

初始化一个 mpvue 项目

首先需要安装一个 Node.js 。Node.js 下载链接
安装完后检查一下是否安装成功

$ node -v
$ npm -v

小程序搭建开发环境,并新建一个mpvue项目及踩坑记_第2张图片
然后需要全局安装一下vue-cli

$ npm install --global vue-[email protected]

然后就是创建一个基于 mpvue-quickstart 模板的新项目,具体语句如下:

$ vue init mpvue/mpvue-quickstart my-project

my-project为项目名,可更改为自己的项目名
之后按回车,然后输入一下APPID,然后一路回车下去,至此,mpvue项目创建完成了
之后是进入项目目录,安装配置文件,运行项目,具体语句如下:

$ cd my-project
$ npm install
$ npm run dev

出现以下这个就说明启动成功了
在这里插入图片描述

踩坑记

在创建mpvue项目,出现了错误:
小程序搭建开发环境,并新建一个mpvue项目及踩坑记_第3张图片
vue-cli · Failed to download repo mpvue/mpvue-quickstart: tunneling socket
百度找了几种方法,并没有效果,最后发现是ip地址有问题。

  1. 获取GitHub官方CDN地址:
    打开https://ipchaxun.com/github.com/
  2. 查询github.com的ip地址为:140.82.114.4
  3. 找到hosts文件将github.com的ip地址修改为:140.82.114.4(hosts文件路径:C:\Windows\System32\drivers\etc)(这一步需管理员权限,注意修改完保存)
  4. 重新创建mpvue项目vue init mpvue/mpvue-quickstart my-project

你可能感兴趣的:(小程序)