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

绝地灬酷狼 2023-06-07 14:28 35阅读 0赞

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

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

目前pages文件夹如下所示：  
![format_png][]

###### （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、查看效果 ####

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

#### 5、总结 ####

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

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

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

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

###### （4）重启项目 ######

> **作者：猫宁一**  
> 95后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习！热爱编程！  
> 可关注【猫宁一】公众号领取我所有全栈项目代码哦~
> 
> **点击查看课程目录：**[微信小程序全栈开发课程目录][Link 1]

![format_png 2][]

[format_png]: /images/20230601/3dd8aa052c0c48c882c32794fa6d3388.png
[format_png 1]: /images/20230601/48ef04d4e09142588ccb795e2563381a.png
[Link 1]: https://blog.csdn.net/shine_a/article/details/102566724
[format_png 2]: /images/20230601/95020ad55add4918ba0238d5ead317ce.png