使用Wepy创建小程序步骤以及引用Vant-weapp组件库

一。安装Node

在使用wepy之前，首先要有npm，npm是Nodejs下的包管理器，大家可以直接到Node.js官网下载。
安装可以参考我之前的文章：使用nvm管理node安装和使用
安装好后，cmd命令行 npm config list，查看npm配置信息

二。安装微信开发框架Wepy

官方安装使用说明：

本人安装步骤

npm的包安装bai分为本地安装（local）、全局安装（global）两种
本地安装: npm install xxx 安装到命令行所在目录的node_module目录。
全局安装: npm install xxx -g 默认安装到\AppData\Roaming\npm\node_modules目录。

这里根据node.exe的路径，node_module会安装在node路径下

1. cmd命令行输入 ： npm install @wepy/cli@next -g 安装wepy2.0
   
   
   安装过程中可能会失败：
   downloading template wepy-cli · Failed to download repo standard: connect ETIMEDOUT 151.101.108.133:443
   修改镜像源为淘宝
   命令：npm config set registry http://registry.npm.taobao.org
   镜像列表
   1.淘宝镜像：http://registry.npm.taobao.org
   2.官方地址：https://registry.npmjs.org/
   之后cd到自己的项目想要存放的路径，比如：
   

2. 安装好 wepy后，开始创建项目
   wepy init standard myproject
   代替以前的wepy new myproject
   myproject 可以替换成自己的项目名称
   
   名词解释：
   ? Project name my_pry 项目名称（显示在微信小程序开发工具上面的，不能大写）
   ? AppId touristappid 我们是demo，直接使用 游客id 即可，正式的项目需要输入微信小程序对应的appid,
   ? Project description A WePY project 这里你可以输入关于项目的简介
   ? Author 1lin24 <1lin24@****.com> 这里写的是项目的信息
   ? Use ESLint to lint your code? Yes 是否将ESLit加入到项目中，ESLit是一个代码格式化检查工具，用于规范代码的书写
   ? Use Redux in your project? Yes 是否将Redux加入到项目中，Redux是一个系统状态管理工具
   ? Use web transform feature in your project? Yes这个我就不知道，谁知道评论指点一下，谢谢了
   
   看到 wepy-cli · Generated “road_lamp_applets”. 创建小程序项目成功。
   文件夹项目结构：
   

3. 然后需要更新和安装项目依赖，然鹅这一步骤微信文档没有显示：
   cd: myproject 进入刚创建的小程序项目
   更新项目依赖：wepy upgrade
   
   这个可以安装依赖 npm -install less –save-dev 解决
   安装依赖：npm install
   
   安装依赖成功后，文件夹新增node_modules文件夹：
   
   

4. 开发实时编译 : wepy build --watch ，编译项目
   
   编译项目成功后，会产生一个weapp文件夹，这个就是我们编译的产物，接下来我们要使用微信小程序开发工具来运行这个目录下面的内容
   
   在project.config.json 文件里可以查看到相关信息：
   

5. 使用微信开发者工具新建项目，本地开发选择项目根目录（可以选择刚才的项目文件路径myproject，这样好看清整个项目的结构），会自动导入项目配置

是因为babel编辑器不支付ES5, 应该将微信开发工具的ES5选项关闭。具体操作如下：
微信开发工具 -> 设置 -> 项目设置 ->
不勾选 “ES6 转 ES5”
不勾选 “上传代码自动样式补全”
不勾选 “代码上传时自动压缩”
勾选 “不校验安全域名、web-view 域名、TLS 版本以及 HTTPS 证书”

这个时候小程序其实已经创建好了，可以进行开发了

三。使用有赞组件库 vant-weapp

由于我想要使用vant-weapp的前端ui样式，所以需要引用vant，
官方安装提示：Vant Weapp快速上手

本人安装步骤

1. npm init -y 初始化npm
   这里一定需要注意：需要先cd进weapp 进入小程序根目录，（这个根目录不是project目录，而是编译后产生的weapp目录），打开cmd，输入：npm init -y （这一个步骤要在安装vant之前），然后再执行安装vant-weapp的命令，否则，之后在微信开发工具里构建npm后提示找不到需要构建的npm。
2. 通过 npm 安装
   npm i @vant/weapp -S --production
   
   成功后，可以看到根目录路径weapp下会新增一个node_modules目录，里面有@vant的文件夹
   
   去项目下的package.json下看是否有了vant字段，有就代表下载成功：

"dependencies": {
    "@vant/weapp": "^1.3.3",
    "@wepy/core": "^2.0.0-alpha.16",
    "@wepy/redux": "^2.0.1",
    "miniprogram-slide-view": "0.0.3",
    "redux": "^4.0.1",
    "redux-actions": "^2.6.5",
    "redux-promise": "^0.6.0"
  },

3. 然后到开发工具里构建npm，还需要设置项目勾选使用npm模块构建成功后会产生miniprograme_npm的文件夹，之后才能访问这里的文件
   
4. 测试，引用vant按钮组件
   index.wxml文件使用：

  <panel bind_init="__initComponent">
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>  
  </panel>

index.json文件配置：因为版本不一样，和安装的方式不一样，引用的路径都不同，要注意

{
  "usingComponents": {
    "van-button": "@vant/weapp/button/index"
  }
}

5. 结果：成功