2.5【微信小程序全栈开发课程】个人中心页面搭建

1、创建个人中心页面文件夹

（1）在src/pages文件夹下面新建一个命名为me的文件夹，并且在文件夹下创建me.vue、main.js两个文件

目前pages文件夹如下所示：

（2）修改src/pages/me/main.js文件

main.js是入口文件，通过main.js来加载me.vue文件。每个页面文件夹中都要有main.js文件

//加载vue组件和me.vue文件
import Vue from 'vue'
import App from './me'

//新建一个me页面的Vue实例
const app = new Vue(App)
//挂载Vue实例，让me页面显示出来
app.$mount()

（3）修改me.vue文件

<template>
  <div>
    个人中心
  </div>
</template>

<script>
export default {
}
</script>

<style lang='scss'>
</style>

2、在app.json中添加新页面

修改src/app.json文件，在pages数组中添加上me页面的路径，前面我们也讲过，pages数组中第一个元素是进入小程序的默认显示页面，所以我们暂时将me页面放在第一个，方便我们调试。修改完代码后记得保存页面。

"pages": [
  "pages/me/main",
  "pages/index/main"
],

3、重启项目

如果目前项目在启动状态要先停止项目（ctrl+c）,再重新启动，不然新页面显示不出来。

//在项目目录中运行
~/WeChatProjects/truth_hold$ npm run dev

4、查看效果

在微信开发者工具中出现以下页面，说明添加新页面成功

5、总结

搭建一个新页面的流程如下：

（1）在src/pages文件夹下面新建一个以页面名称命名的文件夹

（2）在新建的文件夹下面创建.vue文件和main.js文件并填充基础代码

（3）在src/app.json的pages列表中添加上新页面的路径

（4）重启项目

作者：猫宁一
95后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习！热爱编程！
可关注【猫宁一】公众号领取我所有全栈项目代码哦~

点击查看课程目录：微信小程序全栈开发课程目录