单页面应用程序（简称SPA），vue-cli的使用，Vue组件，vue-cli创建SPA项目

1.什么是单页面应用程序

单页面应用程序（英文名: Single Page Application）简称SPA，顾名思义，指的是一个 web 网站中只有唯一的一个HTML页面，所有的功能与交互都在这唯一的一个页面内完成。

1.1 单页面应用程序的特点

单页面应用程序将所有的功能局限于一个web页面中，仅在该web负面初始化时加载相应的资源（HTML、JavaScript和cSS)。
一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转。而是利用JavaScript 动态地变换HTML的内容，从而实现页面与用户的交互。

1.2 单页面应用程序的优点

SPA单页面应用程序最显著的3个优点如下︰

• 良好的交互体验
  单页应用的内容的改变不需要重新加载整个页面
  获取数据也是通过Ajax异步获取
  没有页面之间的跳转，不会出现“白屏现象”
• 良好的前后端工作分离模式
  后端专注于提供API接口，更易实现API接口的复用
  前端专注于页面的渲染，更利于前端工程化的发展
• 减轻服务器的压力
  服务器只提供数据，不负责页面的合成与逻辑的处理，吞吐能力会提高几倍

1.3 单页面应用程序的缺点

任何一种技术都有自己的局限性，对于SPA单页面应用程序来说，主要的缺点有如下两个:

• 首屏加载慢
  路由懒加载
  代码压缩
  CDN加速
  网络传输压缩
• 不利于SEO
  SSR服务器端渲染

2.什么是vue-cli

vue-cli 是Vue.js 开发的标准工具。它简化了程序员基于webpack创建工程化的Vue 项目的过程。
中文官网: https://cli.vuejs.org/zh/

vue-cli安装和用vue-cli创建SPA项目

vue-cli 是 npm 上的一个全局包，使用npm install 命令，即可方便的把它安装到自己的电脑（终端）上:npm install -g @vue/cli，安装成功之后输入vue -V查看版本

基于vue-cli 快速生成工程化的Vue项目:vue create 项目的名称
然后选择最后一项（按上下键，然后回车），手动选择进行创建：

选第一项：把Babel、ESlint等插件的配置项。放到自己独立的配置文件中：

vue 项目中 src 目录的构成：

assets 文件夹：存放项目中用到的静态资源文件，例如：css 样式表、图片资源
components 文件夹：程序员封装的、可复用的组件，都要放到 components 目录下
main.js 是项目的入口文件。整个项目的运行，要先执行 main.js
App.vue 是项目的根组件。

** vue项目的运行流程**
在工程化的项目中，vue要做的事情很单纯：通过 main.js把 App.vue渲染到index.html的指定区域中。
其中：

1. App.vue用来编写待渲染的模板结构
2. index.html中需要预留一个el区域
3. main.js 把 App.vue渲染到了index.html所预留的区域中

Vue组件

1.什么是组件化开发

组件化开发指的是：根据封装的思想，把页面上可重用的UI结构封装为组件，从而方便项目的开发和维护。

2.vue中的组件化开发

vue是一个支持组件化开发的前端框架。
vue 中规定:组件的后缀名是.vue。之前接触到的App.vue文件本质上就是一个vue的组件。

3. vue组件的三个组成部分

每个.vue,组件都由3部分构成，分别是:

1. template ->组件的模板结构
2. script ->组件的JavaScript行为
3. style ->组件的样式

4.组件之间的父子关系

4.1使用组件的三个步骤：

步骤1:使用import语法导入需要的组件
步骤2:使用components节点注册组件
步骤3:以标签形式使用刚才注册的组件

4.2通过components注册的是私有子组件

例如:
在组件A的components节点下，注册了组件F。则组件F只能用在组件A中;不能被用在组件C中。

4.3注册全局组件

在vue项目的main.js 入口文件中，通过Vue.component()方法，可以注册全局组件。示例代码如下：