如何使用mpvue 引入vant weapp ui框架

一、如何使用mpvue 引入vant weapp ui框架

官方文档里面给了两种引入方式
1、通过npm安装（推荐）

npm
# npm
npm i vant-weapp -S --production

# yarn
yarn add vant-weapp --production

2、下载代码
直接通过git下载 Vant Weapp` 源代码，并将dist目录拷贝到自己的项目中

git clone https://github.com/youzan/vant-weapp.git

二、有哪些坑

本例采用下载代码的方式来完成ui框架的使用

1、坑1 ----> 下载后的文件应该引入哪个文件夹
2、坑2 ----> 引入文件后，执行npm run build 该文件是否会发生变化
3、坑3 ----> 文件会发生什么变化？为什么会发生变化
4、坑4 ----> 引入的文件放到哪里？
5、坑5 ----> 引入的文件应该进行什么样的处理？

三、如何填坑

1、填坑1 ----> 代码下载后使用下载文件夹里面的dist文件夹
2、填坑2
1、放入src文件夹，执行npm run build，dist（ui框架的dist）文件里面的各个组件只解析了json。（不可行）
2、放入dist（npm run build生成的文件夹）文件夹，每次执行npm run build时（dist里面的文件会重新生成）。（不可行）
3、放入static，并配置webpack文件（可行）

// build（文件夹）-->webpack.base.config.js-->module-->rules配置
{
    test: /\.js$/,
    include: [resolve('src'), resolve('test'), resolve('static/vant')], // 添加vant文件目录
    use: [
    'babel-loader',
    {
        loader: 'mpvue-loader',
        options: {
        checkMPEntry: true
        }
    },
    ]
},

3、坑3+坑4+坑5详见坑2

四、使用组件

以按钮组件为例，在需要该组件的文件夹内的main.json中引入自定义的组件

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

在index.vue里使用

 <van-button type="default">测试按钮</van-button>
 <van-button type="primary">测试主要按钮</van-button>
 <van-button type="warning">测试警告按钮</van-button>
 <van-button type="danger">测试危险按钮</van-button>