mpvue开发小程序添加页面

mpvue是Vue.js框架的小程序实现版本，可以将Vue.js语法、组件化开发等思想应用到小程序开发中。在mpvue中，添加新的页面需要进行如下步骤。

1. 创建新的.vue文件

在小程序项目的pages目录下新建一个.vue文件，命名方式为小写单词，并且每个单词之间使用”-”隔开（例如：my-page.vue）。这一点与原生的小程序开发不同，原生的小程序开发需要我们在app.json配置文件中手动添加新的页面路径，而在mpvue中，只需要新建一个.vue文件即可。

2. 配置路由

在mpvue中，我们需要将所有页面配置在router.js文件中。打开router.js文件，新增一个路由配置，可参考如下代码：

```

export default [

{

path: '/pages/my-page/main',

name: 'my-page',

component: () => import('@/pages/my-page')

}

]

```

注意：路由的path标识了该页面在小程序中的路径，需要按照小程序路径规则书写，其中”/pages”为默认开头，”/my-page/main”为当前页面的实际路径。

3. 编写页面内容

在新建的.vue文件中，可以编写小程序页面的布局和业务逻辑，使用Vue.js语法以及组件化开发方式来编写。需要注意的是，在mpvue中组件的注册方式与原生小程序略有不同，可参考如下代码：

```

```

4. 配置app.json文件

在小程序项目的app.json文件中，需要配置新增页面的路径。打开app.json文件，新增一个pages节点，可参考如下代码：

```

"pages": [

"pages/index/main",

"pages/my-page/main"

]

```

其中，”pages/index/main”为小程序默认的首页路径，”pages/my-page/main”为新增的页面路径。

到此，我们就完成了在mpvue开发小程序中添加一个新的页面的步骤。总结一下，就是新建一个.vue文件，配置路由，编写页面内容，并在app.json配置文件中添加页面路径。mpvue的开发方式更符合Vue.js的思想，具有更好的组件化和开发体验，值得进一步探究和学习。