用mpvue實現一個簡單的demo

完全的組件化開發能力：提升代碼 完整的 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 （ 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 那裏拿下個人代碼對比下，但願能有個更深的學習。

原文連接：https://www.jianshu.com/p/cd8...