创建小程序WePY项目过程报错指南

笔者在第一次创建小程序 WePY 项目的时候，遇到了各种各样的问题，也在网上搜索了一番，终于也还是把 WePY 项目创建起来了，为了日后遇到问题更快的处理，笔者也把在创建过程的遇到的问题记录了下来，如下：

1.在 WebStorm 中创建一个空的项目，如创建一个 WePYTest 项目

2.在 WebStorm 中，按快捷键 Alt + F12 唤起内置的命令行。执行下面的命令：wepy  init  standard  HelloWorld

C:\Users\HMF\WebstormProjects\WePYTest\HelloWorld>wepy init standard HelloWorld

如果出现报错：wepy-cli · Failed to download repo vuejs-templates/webpack: connect ECONNREF

解决办法：找到 C:\Windows\System32\drivers\etc 文件夹里的 host 文件，用记事本打开，在其末尾添加如下内容：

192.30.253.112 github.com
151.101.88.249 github.global.ssl.fastly.net

3.上述命令执行成功后，会对该项目进行一些初始化配置，笔者的配置如下：

对上述配置的说明：可参考这里

? Project name hello   // 项目名称
? AppId touristappid   // appid可以先不写，在小程序开发工具中设置
? Project description A WePY project   // 创建wepy项目 ，一般默认
? Author st  // 开发者名称
? Use ESLint to lint your code? Yes
? Use Redux in your project? No
? Use web transform feature in your porject? Yes

4.待项目创建成功后，可以在该文件夹下看到该项目工程的所有文件。但这是的项目只拥有一个框架，依旧是无法编译的，需要使用 npm  install 命令安装项目依赖才行。

C:\Users\HMF\WebstormProjects\WePYTest\HelloWorld>npm install

注意：如果安装时没有报错，仅仅是警告非最新的版本，并不会影响代码的运行。

5.接下来，使用以下命令 "wepy  bulid  --watch" 来启动开发时监控代码改动自动构建功能。使用 --watch 参数启动，会自动监控代码的改动，一旦代码有改动，保存后项目会重新构建。

C:\Users\HMF\WebstormProjects\WePYTest\HelloWorld>wepy bulid --watch

运行该命令时，可能的报错处理：

报错1：[WARNING] 未安装wepy-eslint，执行npm install wepy-eslint --save-dev 或者在wepy.config.js中关闭eslint选项

解决办法：按照提示，打开 wepy.config.js 文件，把 eslint 属性设置为 false

报错2：[WARNING] 找不到编译器：wepy-compiler-less

解决办法：分别运行下面的两条命令：npm  install  less、npm  install  wepy-compiler-less

C:\Users\HMF\WebstormProjects\WePYTest\HelloWorld>npm install less
C:\Users\HMF\WebstormProjects\WePYTest\HelloWorld>npm install wepy-compiler-less

报错3：[Error] 找不到组件：wepy-com-toast

解决办法：运行下面的命令：npm  install  wepy-com-toast  --save

C:\Users\HMF\WebstormProjects\WePYTest\HelloWorld>npm install wepy-com-toast --save

报错4：[Error] ReferenceError: Unknown plugin "transform-class-properties" specified in "base" at 0, attempted to resolve relative to

解决办法：运行下面的命令：npm install babel-plugin-transform-class-properties babel-plugin-transform-decorators-legacy babel-plugin-transform-export-extensions babel-plugin-transform-object-rest-spread babel-preset-env --save-dev

npm install babel-plugin-transform-class-properties babel-plugin-transform-decorators-legacy babel-plugin-transform-export-extensions babel-plugin-transform-object-rest-spread babel-preset-env --save-dev

上述命令 wepy  bulid  --watch 运行成功后，会在项目文件夹中生成一个 dist 文件夹，用于存放编译后的项目文件（这个文件夹中存放的是小程序代码）

6.打开微信开发者工具，导入刚刚由 WePY 生成的 dist 文件夹。项目启动后，调试器会出现报错信息，这主要是 WePY 项目和原生小程序对于代码的不同处理方式造成的。

解决办法：打开微信开发工具 -> 详情 -> 本地配置，取消下面三项的勾选

1.ES6转ES5          2.上传代码时样式自动补全           3.上传代码时自动压缩混淆

这样一个完整的小程序 WePY 项目就创建完成了