最新boss说要做一个小程序的项目，然后觉得项目是用vue做的，索性就用mpvue来开发，然后就怎么决定了，花了两天的时间边摸索，边开发，然后在这过程中，遇到了一些坑，有时候在网上搜，还是没有找到合适的答案，毕竟开发文档提供的资料也是有限，所以选择的时候，慎重选择开发的框架，这是我的开发的过程中遇到的一些文件。

一、pages文件夹中的文件的创建

1. 原生小程序中，在app.json文件中，创建的文件,文件的名称和js的文件的名称是一致的。

{
    "pages":{
        "pages/index/index"
    }
}

2. 而在mpvue中，app.json文件中，配置的文件的路径是这样的。

# app.json
{
    "pages": {
        "pages/index/main"
    }
}

其中的main就是main.js的文件，在index文件夹中，只有.vue、.js结尾的文件，而main.js就是vue中的入口文件

二、组件的引入

在src/components文件夹中，创建以.vue结尾的文件，就可以创建一个组件了，但如果在components文件中，在创建一个新的文件夹，文件夹中放置组件，然后在需要的地方import组件，是会报错的，如下：

报错的原因：

解决的方法： 就是在src/components/文件夹下，创建的文件不需要包含在一个文件夹的里面，然后引入的方式也是

import card from '@/components/card';

export default {
    components: {
        card
    }
}

就可以直接在页面使用该组件的了

三、请求数据的方法

之前在vue的项目中，使用的axios请求数据，但是在mpvue中，使用axios请求数据，是请求不到的，然后我就一直以为是自己请求的方法写错了，然后一直打印数据，然后才知道连请求都没有发送出去，然后就使用原生小程序的apiwx.request({}) 进行数据的请求就可以的，这里我稍微封装了一下。

export const get = (url, args = {}) => {
  let promise = new Promise((resolve, reject) => {
    wx.request({
      method: 'get',
      data: args,
      url: process.env.BASE_URL + url,
      success: function (res) {
        if (res.statusCode === 200) {
          resolve(res)
        } else {
          reject(res)
        }
      },
      fail: function (err) {
        reject(err)
      }
    })
  })
  return promise
}

四、页面的跳转

页面的跳转的时候，绝对路径是访问不了的，然后采用相对路径的方式才可以。具体的方法如下：