基于WebApp的Vue.js项目实战实例（一）-原创手记-慕课网

基于微信的巨型用户量及易传播社交属性。C端采用了微信中嵌入APP的形式，即WebApp。然而2017年新兴微信小程序有越来越火代替Webapp的趋势，这是后话了。

379

图为WebApp个人页面

.vue文件的基本结构：<style><template><script>

<style>定义整个css样式
<template>定义html DOM结构
<script>定义js行为

<template> 抽象公共部分，自定义通用组件，可以存储为framework。

比如，将页面的遮罩层，通知Toast，顶部Header，底部Footer抽离出来。遵循了软件灵活解耦的设计特点。

如何做到灵活呢？

代码示例

<template>
    <header v-if="showHeader" class="Header">
            <slot name="header"></slot>
    </header>
</template>
<script>
props：{
    showHeader:{
            default:false
    }
}
</script>

以最简单的控制Header显示隐藏，这是一个最精简的写法，真实项目定义比这个要庞大的多。主要体现在动画的加入，各种样式的定义，思路大体相同。

初始化操作

一般情况下，在created()、mouted()生命周期方法中，进行页面的初始化操作。见 vue生命周期

如：页面数据初始化。

this.$http.get('personal').then(res=>{
if(res.data.state==1){
//做失败处理
}else{
//做成功处理
}
]})

页面路由

进行页面跳转，使用vue生态的vue-router。在mainRouter.js中定义与配置路径

代码示例

this.$router.push(){
name:"personalData"
}

router页面跳转有两个方法push()和replace()

push()方法和replace()方法的区别：push()方法会保留之前的数据，可返回；replace()方法则会直接替代掉之前的页面，不可返回。

附：vue项目常用语法 见 vue语法API文档

：customMethod="" 等价于 v-on:customMethod=""
@click @click.prevent
{{UserName}} 模版语法
$emit()

总结：

这篇文章主要讲了面向产品的抽象通用组件（设计方法），初始化操作，页面路由的基础概念与基础用法。

作者：橘子不太好吃
链接：https://www.jianshu.com/p/b9a55ed6abd3