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

阳光穿透心脏的1/2处 2023-07-18 02:27 14阅读 0赞

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

使用命令：

vue init mpvue/mpvue-quickstart vue-0323

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpaXBob25l_size_16_color_FFFFFF_t_70_pic_center]

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

cd vue-0323
    npm install

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

npm run dev

![在这里插入图片描述][20200323142055612.png_pic_center]

使用vscode-file-openfolder，打开项目  
![在这里插入图片描述][2020032314213887.png_pic_center]

然后按照教程里面指导的步骤，用微信开发者工具打开刚才创建的项目vue-0323。效果如下图所示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpaXBob25l_size_16_color_FFFFFF_t_70_pic_center 1]

## 2. 引入Vant-weapp样式 ##

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

npm i vant-weapp -S --production

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

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

删除pages文件夹下面的文件，只保留index文件夹下的内容。（当然，此处也可全部删除重新自己新建，为了方便我们就保留index，然后修改即可）  
![在这里插入图片描述][20200323144001524.png_pic_center]  
删除app.json文件里面关于已删除文件的引用生命，并且删掉框架代码里面的tabbar。删除后的app.json如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpaXBob25l_size_16_color_FFFFFF_t_70_pic_center 2]  
在pages/index文件夹下，新建一个main.json（组件的引用必须在这里完成，否则无法映射到小程序中）  
然后在main.json中输入如下代码

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

删除index/index.vue文件中的代码，只保留template、script、style三个标签即可  
![在这里插入图片描述][20200323145037544.png_pic_center]  
在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样式引入成功  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpaXBob25l_size_16_color_FFFFFF_t_70]

注意：如果有如下错误：

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpaXBob25l_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpaXBob25l_size_16_color_FFFFFF_t_70_pic_center]: /images/20230528/e3990806c2f748c2a1295362b3961111.png
[20200323142055612.png_pic_center]: /images/20230528/48bdc6de85ae40f3a348988485ef32be.png
[2020032314213887.png_pic_center]: /images/20230528/600d82fcea0c402b98f269c28f611bf7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpaXBob25l_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230528/99cde1f6aa714e5bb0378a683a0f0c4b.png
[20200323143843559.png_pic_center]: /images/20230528/aea4b85883114563a78d90f6728eeb90.png
[20200323144739431.png_pic_center]: /images/20230528/96b7206442ef4332909a13b6e225ee9f.png
[20200323144001524.png_pic_center]: /images/20230528/0a7412cbf4464c2ba57c0c6072aa9d2c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpaXBob25l_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20230528/0ae2342cfe6f44e6b507b84a11ea8eca.png
[20200323145037544.png_pic_center]: /images/20230528/84551048d88d4fffb1aabb53265bc16c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpaXBob25l_size_16_color_FFFFFF_t_70]: /images/20230528/78031333c45f469bbd6f9f56ebb7ce23.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXhpaXBob25l_size_16_color_FFFFFF_t_70 1]: /images/20230528/ee05a89b3d2c4e439dfd661b76131d28.png