mpvue目录结构

太过爱你忘了你带给我的痛 2021-07-24 15:14 400阅读 0赞

### mpvue目录结构如图： ###

![20190913085422163.png][]

srcDom是自己写的请忽略

dist目录是在执行npm run dev后由src编译生成的微信小程序文件。

counter目录是mpvue官方快速模板中存放vuex的目录，也就类似于vuex中的store目录。

project.config.json是开发工具的配置文件。

app.json

`app.json`是小程序的全局配置文件，其包含了小程序的页面文件路径配置、窗口的全局样式信息、底部选项卡式菜单栏的配置，以及一些小程序网络超时的配置等等。与原生小程序的app.js文件的作用一样。

这部分相当于原生小程序的 app.js

这部分相当于原生小程序的 app.wxss

在src/page目录下的index文件夹：

![20190913090352531.png][]

`main.js的`功能是引入`index.vue`并创建Vue实例：

import Vue from 'vue'
    import App from './index'
    
    const app = new Vue(App)
    app.$mount()

实现`index.vue`页面组件，它的写法是最典型的Vue组件写法

<template>
         <div class="container" @click="clickHandle"> 
            <div class="message">{
       {msg}}</div> 
        </div> 
    </template>
    <script> 
    export default {
        data () {
             return { msg: 'Hello'}
        }, 
        methods: {
            clickHandle () {
                 this.msg = 'Clicked!!!!!!'
            }
        }
     }
     </script> 
    <style scoped>
         .message { color: red; padding: 10px; text-align: center; }
     </style>

回头再来看，当我们实现了这个`index.vue`页面组件后，其实还缺最后一个步骤，就是需要将这个页面组件指定为首页。如果我们的小程序只有一个页面的话，其实也可以省略这一步，因为mpvue会自动将`src/pages`目录下的页面组件路径添加到最终编译出来的小程序配置文件中去（可以打开`dist/app.json`文件观察一下）：

{ 
    　　"pages": ["pages/index/main"],
    　　"window": { 
    　　　　"backgroundTextStyle": "light", 
    　　　　"navigationBarBackgroundColor": "#fff", 
    　　　　"navigationBarTitleText": "第一个小程序",
    　　　 "navigationBarTextStyle": "black"}
     }

但是，大多数情况下我们的小程序会由很多个页面组成，在`src/pages`目录下编写多个页面组件后，mpvue也会自动把它们都添加进配置文件，但是由于小程序有一个机制：

配置文件中pages数组里的第一个page路径会被当做是首页。

如果你期望的首页组件并没有被mpvue添加到第一个路径的话，就不会被当做首页显示。比如有多个页面，并在`dist/app.json`里生成的是下面的序列，则第一个`pages/articles/main`页面会被当做首页：

"pages": [
      "pages/articles/main",
      "pages/authors/main",
      "pages/index/main",
      "pages/kickstart/main"
    ]

为了解决这种情况，我们需要显式的去指定首页。可以在`src/main.js`的配置里，加入这样一行配置信息：

pages: [
      '^pages/index/main'
    ]

注意：以上配置中指定为首页的路径前面有个`^`符号。

加入这行配置之后，`pages/index/main`总是会在最终生成的`dist/app.json`中排在第一个位置，成为首页

[20190913085422163.png]: /images/20210724/da924cda488a460a8b1809bff31d6619.png
[20190913090352531.png]: /images/20210724/51b9fe0e0c7d4636bee1d8c7313fc918.png