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