用mpvue實現一個簡單的demo

摘要： 徹底的元件化開發能力：提高程式碼 完整的 Vue.js 開發體驗 這句話的意思呢，就是說 mpvue 基本集成了 vue 的核心程式碼，亦即繼承了 vue 的核心功能-元件。元件可以拓展 html 、封裝以及複用程式碼，它闡述一個元件樹是由無數的元件去組成的。通常一個應用會以一棵巢狀...

徹底的元件化開發能力：提高程式碼 完整的 Vue.js 開發體驗

這句話的意思呢，就是說 mpvue 基本集成了 vue 的核心程式碼，亦即繼承了 vue 的核心功能-元件。元件可以拓展 html 、封裝以及複用程式碼，它闡述一個元件樹是由無數的元件去組成的。通常一個應用會以一棵巢狀的元件樹的形式來組織：

而一個好的元件樹具有封裝性、複用性、拓展性。

封裝性

元件的封裝過程有這幾步驟：【建立一個 .vue 檔案】-【進行獨立的邏輯處理】-【向外暴露必要的屬性、方法等】。 舉個 demo ：列表卡片。裡面的資訊包括標題 title 、內容 content 、圖片 image 、時間 time 等。這是一個獨立的功能項，可以將其封裝起來，只暴露一個 Array 的屬性變數，非常簡潔、獨立。 此時，其他開發者可以不用關注列表項的細節，只需要專注於當前模組的邏輯處理。

複用性

元件的複用，換個專業術語便是，元件間通訊。以前面的 demo 列表卡片來講，它只負責裡面UI功能的實現，不負責與服務端進行打交道；而它的父元件能通過它暴露的 Array 屬性，將需要的資料傳進去，達到資料的渲染，這樣便可以達到減少耦合的效果，同時如果其他模組需要用到卡片這個元件，比如收藏啊，評論呀等等。因此，可以複用的元件亦即稱為通用元件。

拓展性

談到拓展性，這個可以說是 vue 的優秀做法了，利用面向物件的思想，達到元件間相互繼承的目的。 舉個 demo ： Echarts 實現的資料視覺化圖。通過元件化進行圖表的基礎配置，在業務實現的過程中，將extends圖表元件進行折線圖、柱狀圖以及力導向圖等的切換。 小小聊一下， vue 也有一個鉤子叫做 mixins ，這個其實跟 extends 功能很相似，都是起到混合合併的作用，而它們的區別是 extends 的優先順序較高，執行的順序要優先於父元件。

pvue的目錄結構

關於mpvue初始化的專案結構，一起來看一張圖，展示的是主要的目錄結構，

project 
└───build//編譯打包的node.js指令碼和webpack配置檔案
└───config//用於開發和生產環境下的不同配置
└───src//主要進行小程式功能編寫的地方
│──components
│──pages
│──utils
│──app.json
│──App.vue
│──main.js
└───static//用於存放各種小程式本地靜態資源
└───package.json//專案的主配置檔案
└───project.config.json//用於管理微信開發者工具的小程式專案的配置檔案

從這張圖可以看出各個目錄結構的功能以及應用。一般進行業務開發的時候，一般也只需要在src目錄下進行開發即可。

mpvue的生命週期

mpvue （ Dianping%2Fmpvue" target="_blank" rel="nofollow,noindex">github 地址請參見 ）是一個使用 Vue.js開發小程式的前端框架。框架基於 Vue.js 核心， mpvue 修改了 Vue.js 的 runtime和 compiler實現，使其可以執行在小程式環境中，從而為小程式開發引入了整套 Vue.js 開發體驗。

因此，mpvue的生命週期既包括vue的生命週期也包括了小程式的生命週期。 對於小程式的生命週期來講，分為2種情況。 APP物件有 onLaunch ， onShow 以及 onHide 。 Page物件有 onLoad , onShow , onReady , onHide 和 onUnload 。 而對於vue的生命週期來講，主要有8個鉤子。 【 beforeCreate 】-【 created 】-【 beforeMount 】-【 mounted 】-【 beforeUpdate 】-【 updated 】-【 beforeDestroy 】-【 destroyed 】。 mpvue 由於關聯了小程式與 vue 這兩種，因此 mpvue 的生命週期實際上是 vue 的例項相容小程式的生命週期的。一起來參照下mpvue的原始碼【 mpvue / mpvue-quickstart 初始化後的專案】-【 node_modules 】-【 mpvue 】-【 LIFECYCLE_HOOKS 陣列】。

從這張圖片可以看出， mpvue 的生命週期就是按照這個順序來對應的。

實現toolsList的簡單demo

簡介：利用 mpvue 初始化的專案，進行實現一個簡單的增刪改查的列表 demo ,過程分為幾個小步驟。

1. 建立一個todolist元件 首先，我們需要在【 src 】-【 components 】建立一個【 todolist.vue 】；接著在 pages 新建一個資料夾【 todolist 】，這是小程式新建一個頁面，專門來顯示todolist。

project 
└───build
└───config
└───src
│──components
│──todolist.vue//建立一個元件
│──pages
│──todolist//建立一個資料夾
│──utils
│──app.json
│──App.vue
│──main.js
└───static
└───package.json
└───project.config.json

2. 著手入口檔案 在 todolist 的資料夾裡，新建一個入口檔案 main.js ，這是一個統一的寫法，將新建立的元件進行引用以及掛載。

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

3. 新建一個入口元件 建立一個 index.vue 的頁面，在裡面呼叫 components 下的 todolist.vue 元件

<template>
<div>
<todo-list></todo-list>
</div>
</template>
<script> import TodoList from '@/components/todolist';
export default{
components: {
TodoList 
},
} </script>

4. 實現 todolist 的業務邏輯

<template>
<div>
<todo-list></todo-list>
</div>
</template>
<script> import TodoList from '@/components/todolist';
export default{
components: {
TodoList 
},
} </script>

5. 呈現的效果

ok，基本一個簡單的增刪改查 demo 已完成，雖然簡單，但裡面的坑位不少，比如 eslint 規則， wx:for 問題等等，所以有空的老鐵可以去 GitHub 那裡拿下我的程式碼對比下，希望能有個更深的學習。