基于微信的巨型用戶量及易傳播社交屬性。C端采用了微信中嵌入APP的形式，即WebApp。然而2017年新興微信小程序有越來越火代替Webapp的趨勢(shì)，這是后話了。

圖為WebApp個(gè)人頁(yè)面

.vue文件的基本結(jié)構(gòu)：<style><template><script>

<style>定義整個(gè)css樣式?

<template>定義html DOM結(jié)構(gòu)

<script>定義js行為?

<template> 抽象公共部分，自定義通用組件，可以存儲(chǔ)為framework。

比如，將頁(yè)面的遮罩層，通知Toast，頂部Header，底部Footer抽離出來。遵循了軟件靈活解耦的設(shè)計(jì)特點(diǎn)。

如何做到靈活呢？

代碼示例?

<template>

????<header v-if="showHeader" class="Header">

????????????<slot name="header"></slot>

????</header>

</template>

<script>

props：{

????showHeader:{

????????????default:false

????}

}

</script>

以最簡(jiǎn)單的控制Header顯示隱藏，這是一個(gè)最精簡(jiǎn)的寫法，真實(shí)項(xiàng)目定義比這個(gè)要龐大的多。主要體現(xiàn)在動(dòng)畫的加入，各種樣式的定義，思路大體相同。

初始化操作

一般情況下，在created()、mouted()生命周期方法中，進(jìn)行頁(yè)面的初始化操作。見 ?vue生命周期

如：頁(yè)面數(shù)據(jù)初始化。

this.$http.get('personal').then(res=>{

if(res.data.state==1){

//做失敗處理

}else{

//做成功處理

}

]})

頁(yè)面路由

進(jìn)行頁(yè)面跳轉(zhuǎn)，使用vue生態(tài)的vue-router。在mainRouter.js中定義與配置路徑

代碼示例

this.$router.push(){

????name:"personalData"

}

router頁(yè)面跳轉(zhuǎn)有兩個(gè)方法push()和replace()

push()方法和replace()方法的區(qū)別：push()方法會(huì)保留之前的數(shù)據(jù)，可返回；replace()方法則會(huì)直接替代掉之前的頁(yè)面，不可返回。

附：vue項(xiàng)目常用語法 見 ?vue語法API文檔

：customMethod="" ?等價(jià)于 v-on:customMethod=""

@click @click.prevent

{{UserName}} 模版語法

$emit()?

總結(jié)：

這篇文章主要講了面向產(chǎn)品的 抽象通用組件（設(shè)計(jì)方法），初始化操作，頁(yè)面路由的基礎(chǔ)概念與基礎(chǔ)用法。