小程序开发（2）-引入vant-weapp样式

1. 使用vue-cli搭建项目框架

使用命令：

vue init mpvue/mpvue-quickstart vue-0323

参数填写如下：
tips：这里我关掉了eslint的校验功能，因为实在是太烦了。

输入命令，进入项目文件，并初始化npm.等待下载结束

cd vue-0323
npm install

下载完成后，输入下面的命令，进入开发模式（只有执行了npm编译后，才能生成小程序所使用的的dist文件。）

npm run dev

使用vscode-file-openfolder，打开项目

然后按照教程里面指导的步骤，用微信开发者工具打开刚才创建的项目vue-0323。效果如下图所示

2. 引入Vant-weapp样式

在项目文件夹下，运行命令

npm i vant-weapp -S --production

在项目文件中，将会出现一个新的文件夹：node_modules，里面安装的就是vant-weapp样式库。

下载完成后，到node_modules里面找到vant-weapp的目录，在其中寻找名为dist的目录，这里面存放的就是iView Weapp原生小程序自定义组件代码。将上面提到的整个dist目录复制到你的mpvue工程下的static目录下（记得一定要是static目录，否则这些代码会被mpvue编译器错误的进行处理），然后给这个dist目录改个名字，比如叫vant-weapp。

删除pages文件夹下面的文件，只保留index文件夹下的内容。（当然，此处也可全部删除重新自己新建，为了方便我们就保留index，然后修改即可）

删除app.json文件里面关于已删除文件的引用生命，并且删掉框架代码里面的tabbar。删除后的app.json如下图所示：

在pages/index文件夹下，新建一个main.json（组件的引用必须在这里完成，否则无法映射到小程序中）
然后在main.json中输入如下代码

{
    "usingComponents": {
      "v-button": "../../static/vant-weapp/button/index"
    }
}

删除index/index.vue文件中的代码，只保留template、script、style三个标签即可

在template页签中，引用v-button的标签

<template>
  <div class="container">
    <v-button type="primary">vant按钮风格primary</v-button>
    <v-button type="danger">vant按钮风格danger</v-button>
    <v-button type="success">vant按钮风格success</v-button>
  </div>
</template>

然后在项目文件夹内执行npm run dev 或者npm start

在微信开发者工具中，可以看到如下页面，证明vant-weapp样式引入成功

注意：如果有如下错误：

Component is not found in path "static/vant-weapp/button/index

你需要在微信开发者工具的右上角“详情”按钮中，找到本地设置，然后看一下ES6转ES5是否打开，如果没有，打开后重新运行一下小程序即可