mpvue目录结构

参考原文：https://www.jianshu.com/p/2c363ea29cda

mpvue的目录结构如下图：

（todo是我mpvue项目的名称）

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

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

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

app.json

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

<script>
/* 这部分相当于原生小程序的 app.js */
　　 export default {
　　　　　created () {
　　　　 console.log('miniapp created!!!')} 
　　}
 </script> 
 <style> 
/* 这部分相当于原生小程序的 app.wxss */ 
　.container { background-color: #cccccc; } 
 </style> 

App.vue

　　App.vue组件被 src/main.js引入并被设置了一个 mpType的属性值，其值为 app。这个值是为了与后面要讲的小程序页面组件所区分开来，因为小程序页面组件和这个 App.vue组件的写法和引入方式是一致的，为了区分两者，需要设置 mpType值。引入这个 App.vue组件后，会用它作为参数来创建一个Vue的实例，并调用 $mount()方法加载。下面是这个过程的关键代码行：

App.mpType = 'app'
const app = new Vue(App)
app.$mount()

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

  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中排在第一个位置，成为首页。

 

 

转载于:https://www.cnblogs.com/iamsmiling/p/10636791.html