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中排在第一個位置，成為首頁。