vue-spa

Vue全家桶

课程目标：

1 能够说出Vue全家桶的各个组件(Vue-CLI、Vue-Router、Vuex、Axios)的概念、功能和使用场景

2 能够使用Vue全家桶进行项目开发

0 前置知识-ES6模块化

0.1 目标

1. 能够说出模块化的概念
2. 能够使用export关键字和import关键字

0.2 路径

1. 什么是模块化
2. export关键字的用法
3. import关键字的用法
4. 备注：此处的代码暂时无法执行，待本章课程内容学习完，就可以运行

0.3 体验

0.1.1 什么是模块化

模块化就是把代码进行拆分，方便重复利用。类似java中的导包：要使用一个类，必须先导包。

而JS中没有包的概念，换来的是 模块。

模块功能主要由两个命令构成：export和import。

• export命令用于定义模块的对外接口，
• import命令用于导入其他模块提供的功能。

0.1.2 export

比如我定义一个js文件:hello.js，里面有一个对象：

const util = {
   
    sum(a,b){
   
        return a + b;
    }
}

我可以使用export将这个对象导出：

const util = {
   
    sum(a,b){
   
        return a + b;
    }
}
export util;

当然，也可以简写为：

export const util = {
   
    sum(a,b){
   
        return a + b;
    }
}

export不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、函数、数组、对象。

当要导出多个值时，还可以简写。比如我有一个文件：user.js：

var name = "jack"
var age = 21
export {
   name,age}

省略名称

上面的导出代码中，都明确指定了导出的变量名，这样其它人在导入使用时就必须准确写出变量名，否则就会出错。

因此js提供了default关键字，可以对导出的变量名进行省略

例如：

// 无需声明对象的名字
export default {
   
	sum(a,b){
   
        return a + b;
    }
}

这样，当使用者导入时，可以任意起名字

0.1.3 import

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。

例如我要使用上面导出的util：

// 导入util
import util from 'hello.js'
// 调用util中的属性
util.sum(1,2)

要批量导入前面导出的name和age：

import {
   name, age} from 'user.js'

console.log(name + " , 今年"+ age +"岁了")

但是上面的代码暂时无法测试，因为浏览器目前还不支持ES6 的导入和导出功能。除非借助于工具，把ES6 的语法进行编译降级到ES5，比如Babel-cli工具

我们暂时不做测试，大家了解即可。

0.4 结论

1. 模块化就是把拆分代码，方便重复利用
2. 模块功能主要由两个命令构成：export和import。
   • export命令用于规定模块的对外接口，
   • import命令用于导入其他模块提供的功能。

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

1.1 目标

能够说出SPA-Vue企业级开发模式的相关概念

1.2 路径

1. 介绍SPA的概念

2. 阐述SPA的优点和缺点

3. 阐述Vue全家桶技术栈的组件

4. 讲解SPA中的Vue组件

1.3 体验

1.3.1 什么是SPA？

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

• 传统的网站

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

• SPA

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

1.3.2 SPA 的优、缺点

• 优点

1、减轻服务器的压力：一个网站只有一个页面，只需要从服务器加载一次

2、并且把大量操作都放到了浏览器中去完成

3、前、后端完成分离，使服务器只需要提供同一套 JSON 数据接口，就可以同时满足WEB端、桌面端、手机端等不同的前端设备

4、而且前端只关注前端、后端只操作数据，各司其职

• 缺点

1、首屏加载速度可能会很长

2、SEO（搜索引擎优化）不友好，爬虫数据时什么也抓不到

3、页面复杂度提高、开发难度加大

1.3.3 Vue全家桶的技术栈

Vue全家桶有哪些技术？

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

1、使用 Vue Cli 脚手架工具快速构建项目目录结构、开发环境、部署

2、使用 Vue-Router 实现路由，实现组件之间的切换

3、使用 Vuex 实现状态数据的管理

4、使用 axios 发送 AJAX 和服务器通信

1.3.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>

1.4 结论

1. 什么是SPA？

   SPA（单页面应用程序），项目中只需要1个html页面，多个功能组件，页面跳转其实就是切换组件。

2. SPA的优缺点

   • 优点

     1、减轻服务器的压力：一个网站只有一个页面，只需要从服务器加载一次

     2、并且把大量操作都放到了浏览器中去完成

     3、前、后端完成分离，使服务器只需要提供同一套 JSON 数据接口，就可以同时满足WEB端、桌面端、手机端等不同的前端设备

     4、而且前端只关注前端、后端只操作数据，各司其职

   • 缺点

     1、首屏加载速度可能会很长

     2、SEO（搜索引擎优化）不友好，爬虫数据时什么也抓不到

     3、页面复杂度提高、开发难度加大

3. Vue全家桶技术栈包含哪些技术？

   1、使用 Vue Cli 脚手架工具快速构建项目目录结构、开发环境、部署

   2、使用 Vue-Router 实现路由，实现组件之间的切换

   3、使用 Vuex 实现状态数据的管理

   4、使用 axios 发送 AJAX 和服务器通信

4. SPA中vUE组件格式

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

   • html必须写在标签中
   • css必须写在

2 Vue CLI构建SPA项目

2.1 使用 Vue CLI构建项目

2.1.1 目标

1. 掌握Vue-CLI脚手架构建项目

2.1.2 路径

1. 下载和安装Vue-CLI

2. 使用Vue-CLI创建SPA项目

3. 启动SPA项目

2.1.3 体验