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

最新推荐文章于 2023-09-14 14:39:14 发布

舰圣

最新推荐文章于 2023-09-14 14:39:14 发布

阅读量329

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_44915822/article/details/121015119

版权

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

一、什么是SPA？

SPA(Single Page Application)：单页面应用程序，是一种前端的开发技术，是现在前、后端分离下的一种产物。

传统的网站

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

SPA

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

二、SPA的优、缺点

优点
1. 减轻服务器的压力，一个网站只有一个页面，只需要从服务器加载一次
2. 把大量操作都放到了浏览器红完成
3. 前、后端完成分离，使服务器只需要提供同一套JSON数据接口，就可以同时满足WEB端、桌面端、手机端等不同的前端设备
4. 前端只关注前端、后端只操作数据、各司其职
缺点
1. 首屏加载速度可能会很长
2. SEO（搜索引擎优化）不友好，爬虫数据时什么也抓不到
3. 页面复杂度提高，开发难度加大

三、Vue全家桶的技术栈

Vue全家桶有哪些技术？

我们可以使用Vue框架来开发SPA，开发时使用的技术：

使用Vue Cli脚手架工具快速构建项目目录结构，开发环境，部署环境
使用Vue-Router实现路由，实现组件之间的切换
使用Vuex实现状态数据的管理
使用axios发送AJAX和服务器通信

四、SPA中的组件- `*.vue`

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

每个.vue文件中都由三部分组成：HTML、CSS、JS，并且

html：所有的html代码必须写在<template>html代码</template>标签中
css：所有的css代码写在<style>css样式表</style>标签中
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>

五、结论

什么事SPA？

SPA（单页面应用程序），项目中只需要1个html页面，多个功能组件，页面跳转其实就是切换组件。
SPA的优缺点
- 优点
  1. 减轻服务器的压力：一个网站只有一个页面，只需要从服务器加载一次
  2. 把大量操作都放到了浏览器去完场
  3. 前，后端完成分离，使服务器只需要提供同一套JSON数据接口，就可以同时满足WEB端、桌面端、手机端等不同的前端设备
  4. 前端只关注前端、后端只操作数据，各司其职
- 缺点
  1. 首屏加载速度可能会很长
  2. SEO（搜索引擎优化）不友好，爬虫数据时什么也抓不到
  3. 页面复杂度提高、开发难度加大
Vue全家桶技术栈包含哪些技术？
1. 使用 Vue Cli 脚手架工具快速构建项目目录结构、开发环境、部署
2. 使用 Vue-Router 实现路由，实现组件之间的切换
3. 使用 Vuex 实现状态数据的管理
4. 使用 axios 发送 AJAX 和服务器通信
SPA中VUE组件格式

每个 .vue 文件中都由三部分组成：HTML、CSS、JS
- html必须写在<templete>标签中
- css必须写在<style>标签中
- js必须写在<script>标签中