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

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

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

目前pages文件夹如下所示:
2.5【微信小程序全栈开发课程】个人中心页面搭建_第1张图片

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

在微信开发者工具中出现以下页面,说明添加新页面成功
2.5【微信小程序全栈开发课程】个人中心页面搭建_第2张图片

5、总结

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

(1)在src/pages文件夹下面新建一个以页面名称命名的文件夹
(2)在新建的文件夹下面创建.vue文件和main.js文件并填充基础代码
(3)在src/app.json的pages列表中添加上新页面的路径
(4)重启项目

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

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

你可能感兴趣的:(微信小程序全栈开发课程)