SPA-Vue企业级开发模式介绍

1.1概述

• 单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

• 在vue的spa中，需要编写vue文件。

• Vue提供单文件组件（扩展名为 .vue的文件），每一个vue文件由3部分组成：

    模板（html代码）：<template>
    脚本（js代码）：<script>
    样式（css代码）：<style>
  

• 传统的网站
  我们传统的网站是由很 多个独立的页面 组成的，当我们点击页面中的 a 标签时，就会向服务器发送一个新的请求，然后下载另一个页面显示，跳转时是页面之间的跳转。

• SPA
  SPA（单页面应用程序），顾名思议，整个网站中只有一个页面，在这个页面中会加载很多个不同的组件，当我们点击按钮时，并不会打开一个新的页面，而是还在当前的页面中切换显示不同的组件。

1.2 SPA 的优、缺点

• 优点
  1、减轻服务器的压力：一个网站只有一个页面，只需要从服务器加载一次
  2、并且把大量操作都放到了浏览器中去完成
  3、前、后端完成分离，使服务器只需要提供同一套 JSON 数据接口，就可以同时满足WEB端、桌面端、手机端等不同的前端设备
  4、而且前端只关注前端、后端只操作数据，各司其职

• 缺点
  1、首屏加载速度可能会很长
  2、SEO（搜索引擎优化）不友好，爬虫数据时什么也抓不到
  3、页面复杂度提高、开发难度加大

1.3 Vue全家桶的技术栈

Vue全家桶有哪些技术？

我们可以使用 Vue 框架来开发 SPA，开发时使用的技术：
1、使用 Vue Cli 脚手架工具快速构建项目目录结构、开发环境、部署
2、使用 Vue-Router 实现路由，实现组件之间的切换
3、使用 Vuex 实现状态数据的管理
4、使用 axios 发送 AJAX 和服务器通信

1.4 SPA中的组件-*.vue

在使用 Vue 开发 SPA 时，SPA 是由很多个 Vue 的组件组成的，每个组件就是一个 .vue 文件。

每个 .vue 文件中都由三部分组成：HTML、CSS、JS，并且：
1、html：所有的 html 代码必须要写在 <template>html代码</template> 标签中
2、css：所有的 css 代码写在 <style> css样式表<style> 标签中
3、js：所有 js 代码写在 <script>js代码</script> 标签中

以下是一个* .vue 文件中的内容：

<template>
<div>
	<h1>
        Hello World ! 我是 {{ tome }}
    </h1>    
    <input type="button" @click="sayHi" value="sayHi">
</div>
</template>

<style>
body{
	background-color: #EEE;
}
h1 {
    font-size: 30px;
}
</style>

<script>
export default {
    data(){
        return {
            name:'tom'
        }
    },
    methods:{
        sayHi(){
            alert("Hi")
        }
    }
}
</script>