SpringBoot+Vue（二）ES6模块化、SPA-Vue企业级开发和Vue全家桶-阿里云开发者社区

md格式文档可点击下方小卡片问我获取

Vue全家桶

课程目标：

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

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

0 前置知识-ES6模块化

0.1 目标

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

0.2 路径

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

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 结论

模块化就是把拆分代码，方便重复利用
模块功能主要由两个命令构成：export和import。

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

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

1.1 目标

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

1.2 路径

介绍SPA的概念
阐述SPA的优点和缺点
阐述Vue全家桶技术栈的组件
讲解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 代码必须要写在标签中

2、css：所有的 css 代码写在

css样式表<style></code> 标签中</div><div>3、js：所有 js 代码写在 <code><script>js代码</script></code> 标签中</div><div>以下是一个* .vue 文件中的内容：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Ctemplate%3E%5Cn%3Cdiv%3E%5Cn%5Ct%3Ch1%3E%5Cn%20%20%20%20%20%20%20%20Hello%20World%20!%20%E6%88%91%E6%98%AF%20%7B%7B%20tome%20%7D%7D%5Cn%20%20%20%20%3C%2Fh1%3E%20%20%20%20%5Cn%20%20%20%20%3Cinput%20type%3D%5C%22button%5C%22%20%40click%3D%5C%22sayHi%5C%22%20value%3D%5C%22sayHi%5C%22%3E%5Cn%3C%2Fdiv%3E%5Cn%3C%2Ftemplate%3E%5Cn%3Cstyle%3E%5Cnbody%7B%5Cn%5Ctbackground-color%3A%20%23EEE%3B%5Cn%7D%5Cnh1%20%7B%5Cn%20%20%20%20font-size%3A%2030px%3B%5Cn%7D%5Cn%3C%2Fstyle%3E%5Cn%3Cscript%3E%5Cnexport%20default%20%7B%5Cn%20%20%20%20data()%7B%5Cn%20%20%20%20%20%20%20%20return%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20name%3A'tom'%5Cn%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20methods%3A%7B%5Cn%20%20%20%20%20%20%20%20sayHi()%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20alert(%5C%22Hi%5C%22)%5Cn%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%7D%5Cn%7D%5Cn%3C%2Fscript%3E%5Cn%E2%80%A2%201%5Cn%E2%80%A2%202%5Cn%E2%80%A2%203%5Cn%E2%80%A2%204%5Cn%E2%80%A2%205%5Cn%E2%80%A2%206%5Cn%E2%80%A2%207%5Cn%E2%80%A2%208%5Cn%E2%80%A2%209%5Cn%E2%80%A2%2010%5Cn%E2%80%A2%2011%5Cn%E2%80%A2%2012%5Cn%E2%80%A2%2013%5Cn%E2%80%A2%2014%5Cn%E2%80%A2%2015%5Cn%E2%80%A2%2016%5Cn%E2%80%A2%2017%5Cn%E2%80%A2%2018%5Cn%E2%80%A2%2019%5Cn%E2%80%A2%2020%5Cn%E2%80%A2%2021%5Cn%E2%80%A2%2022%5Cn%E2%80%A2%2023%5Cn%E2%80%A2%2024%5Cn%E2%80%A2%2025%5Cn%E2%80%A2%2026%5Cn%E2%80%A2%2027%5Cn%E2%80%A2%2028%5Cn%E2%80%A2%2029%5Cn%E2%80%A2%2030%5Cn%E2%80%A2%2031%5Cn%E2%80%A2%2032%5Cn%E2%80%A2%2033%22%2C%22id%22%3A%2223p54%22%7D"></div><h3 id="WMdcP"><a name="t19"></a><a></a>1.4 结论</h3><ol><li>什么是SPA？<br />SPA（单页面应用程序），项目中只需要1个html页面，多个功能组件，页面跳转其实就是切换组件。<br /></li><li>SPA的优缺点</li></ol><ul data-lake-indent="1"><li>优点<br />1、减轻服务器的压力：一个网站只有一个页面，只需要从服务器加载一次<br />2、并且把大量操作都放到了浏览器中去完成<br />3、前、后端完成分离，使服务器只需要提供同一套 JSON 数据接口，就可以同时满足WEB端、桌面端、手机端等不同的前端设备<br />4、而且前端只关注前端、后端只操作数据，各司其职<br /></li><li>缺点<br />1、首屏加载速度可能会很长<br />2、SEO（搜索引擎优化）不友好，爬虫数据时什么也抓不到<br />3、页面复杂度提高、开发难度加大<br /></li></ul><ol start="3"><li>Vue全家桶技术栈包含哪些技术？<br />1、使用 <code>Vue Cli</code> 脚手架工具快速构建项目目录结构、开发环境、部署<br />2、使用 <code>Vue-Router</code> 实现路由，实现组件之间的切换<br />3、使用 <code>Vuex</code> 实现状态数据的管理<br />4、使用 <code>axios</code> 发送 AJAX 和服务器通信<br /></li><li>SPA中vUE组件格式每个<code>.vue</code>文件中都由三部分组成：HTML、CSS、JS</li></ol><ul data-lake-indent="1"><li>html必须写在标签中</li><li>css必须写在</li></ul><h2 id="u2q7P"><a name="t20"></a><a></a>2 Vue CLI构建SPA项目</h2><h3 id="CxZHa"><a name="t21"></a><a></a>2.1 使用 Vue CLI构建项目</h3><h4 id="S0uxM"><a name="t22"></a><a></a>2.1.1 目标</h4><ol><li>掌握Vue-CLI脚手架构建项目</li></ol><h4 id="BDWOB"><a name="t23"></a><a></a>2.1.2 路径</h4><ol><li>下载和安装Vue-CLI<br /></li><li>使用Vue-CLI创建SPA项目<br /></li><li>启动SPA项目<br /></li></ol><h4 id="yWDJs"><a name="t24"></a><a></a>2.1.3 体验</h4><h5 id="AhILg"><a></a>2.1.3.1 下载安装Vue-CLI</h5><div>官方文档：<a href="https://cli.vuejs.org/zh/?spm=a2c6h.13046898.publish-article.203.7f7c6ffaBQV1tL" target="_blank">https://cli.vuejs.org/zh/</a></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzpiaduicf3hfi_c4af75df0dc543bc8718a6a61512e516.png%22%2C%22originWidth%22%3A1168%2C%22originHeight%22%3A831%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1168%2C%22height%22%3A831%7D"></span></div><div>首先要确定自己的电脑上安装了 <code>Node.js</code> 8.9 或更高版本。</div><div>然后，我们就可以使用 npm 来安装 vue/cli ：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22npm%20install%20-g%20%40vue%2Fcli%5Cn%E2%80%A2%201%22%2C%22id%22%3A%22KIKjt%22%7D"></div><div>安装之后，我们可以在命令行中使用 vue 指令查看安装的版本：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22vue%20--version%5Cn%E2%80%A2%201%22%2C%22id%22%3A%22Tql4T%22%7D"></div><h5 id="gbpRr"><a></a>2.1.3.2 创建一个项目</h5><div>我们可以使用下面的命令来创建一个 SPA 的项目：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22vue%20create%20%E9%A1%B9%E7%9B%AE%E5%90%8D%E7%A7%B0%5Cn%E2%80%A2%201%22%2C%22id%22%3A%22xMX98%22%7D"></div><div>创建项目时，会提示我们选择项目中需要使用的组件，我们可以使用默认的配置，也可以自己手动选择需要加载的组件。</div><div>手动选择组件</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzpiaduicf3hfi_6a57a8b9e0414a78a59a1f5a24df9e90.png%22%2C%22originWidth%22%3A596%2C%22originHeight%22%3A158%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A596%2C%22height%22%3A158%7D"></span></div><div>勾选需要安装的组件：</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzpiaduicf3hfi_7ab1b866be634d898ef1f2ef44d28c65.png%22%2C%22originWidth%22%3A716%2C%22originHeight%22%3A378%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A716%2C%22height%22%3A378%7D"></span></div><div> babel：将ES6的语法转成浏览器可以执行的低版本js语法</div><div> Router：（必须）路由</div><div> Vuex： 可选</div><div>使用路由的 history 模式：</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzpiaduicf3hfi_067452db4cac4e57b514f782fdac11fe.png%22%2C%22originWidth%22%3A1436%2C%22originHeight%22%3A180%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1436%2C%22height%22%3A180%7D"></span></div><div>把配置写到 package.json 文件中：</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzpiaduicf3hfi_40fb2576e1db4fd0a99de30753b8e887.png%22%2C%22originWidth%22%3A714%2C%22originHeight%22%3A246%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A714%2C%22height%22%3A246%7D"></span></div><div>不保存本次的配置：</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzpiaduicf3hfi_13894b90d3e94677a48588b23e445c99.png%22%2C%22originWidth%22%3A1096%2C%22originHeight%22%3A220%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1096%2C%22height%22%3A220%7D"></span></div><div>项目创建成功。</div><h5 id="dRh7G"><a></a>2.1.3.3 启动项目</h5><div>安装成功之后，我们可以进行使用以下指令启动项目：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22cd%20%E9%A1%B9%E7%9B%AE%E5%90%8D%20%20%20%2F%2F%20%E8%BF%9B%E5%85%A5%E9%A1%B9%E7%9B%AE%E7%9B%AE%E5%BD%95%5Cnnpm%20run%20serve%20%20%20%2F%2F%20%E5%90%AF%E5%8A%A8%E9%A1%B9%E7%9B%AE%5Cn%E2%80%A2%201%5Cn%E2%80%A2%202%22%2C%22id%22%3A%22esfjx%22%7D"></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzpiaduicf3hfi_de24c79af5c24105aaced872f151c593.png%22%2C%22originWidth%22%3A828%2C%22originHeight%22%3A284%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A828%2C%22height%22%3A284%7D"></span></div><div>启动之后我们可以在浏览器中访问欢迎页面：</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzpiaduicf3hfi_c3dcec86d2924f07999b0abb69998c19.png%22%2C%22originWidth%22%3A994%2C%22originHeight%22%3A763%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A994%2C%22height%22%3A763%7D"></span></div><h4 id="UalUg"><a name="t25"></a><a></a>2.1.4 总结</h4><div>1 安装Vue-CLI的命令：npm install -g @vue/cli</div><div>2 创建SPA项目的命令：vue create 项目名字</div><div>3 运行SPA项目的命令：npm run serve</div><h3 id="44hnn"><a name="t26"></a><a></a>2.2 SPA项目目录介绍</h3><h4 id="FD16f"><a name="t27"></a><a></a>2.2.1 目标：</h4><div>掌握SPA项目目录结构，知道未来的代码资源、图片资源等等存放的文件夹</div><h4 id="ts5dX"><a name="t28"></a><a></a>2.2.2 路径：</h4><div>1 阐述SPA项目目录结构</div><h4 id="vmL2L"><a name="t29"></a><a></a>2.2.3 体验</h4><div>我们写的代码都在 src 目录中： <span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzpiaduicf3hfi_7e258932087645db9027d723bfb8df56.png%22%2C%22originWidth%22%3A896%2C%22originHeight%22%3A428%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A896%2C%22height%22%3A428%7D"></span></div><h4 id="6qHKd"><a name="t30"></a><a></a>2.2.4 总结</h4><h3 id="4ugZE"><a name="t31"></a><a></a>2.3 入口文件main.js介绍</h3><h4 id="i75O4"><a name="t32"></a><a></a>2.3.1 目标</h4><div>了解main.js的功能和作用</div><h4 id="CthWx"><a name="t33"></a><a></a>2.3.2 路径</h4><ol><li>介绍main.js的功能</li><li>详解main.js中的代码</li></ol><h4 id="WGEvs"><a name="t34"></a><a></a>2.3.3 体验</h4><h5 id="ylh2f"><a></a>2.3.3.1 main.js的功能</h5><div>入口文件，项目启动之后会最先运行 main.js 文件</div><h5 id="hz80S"><a></a>2.3.3.2 main.js代码详解</h5><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22import%20Vue%20from%20'vue'%5Cnimport%20App%20from%20'.%2FApp.vue'%5Cnimport%20router%20from%20'.%2Frouter'%5Cnimport%20store%20from%20'.%2Fstore'%5CnVue.config.productionTip%20%3D%20false%5Cnnew%20Vue(%7B%5Cn%20%20router%2C%20%20%20%5Ct%5Ct%5Ct%20%5Ct%2F%2F%20%E8%A3%85%E8%BD%BD%20vue-router%5Cn%20%20store%2C%20%20%20%20%20%5Ct%5Ct%5Ct%5Ct%2F%2F%20%E8%A3%85%E8%BD%BD%20vuex%5Cn%20%20render%3A%20h%20%3D%3E%20h(App)%20%20%20%20%20%20%2F%2F%20%E6%B8%B2%E6%9F%93%20App%20%E7%BB%84%E4%BB%B6%5Cn%7D).%24mount('%23app')%5Cn%E2%80%A2%201%5Cn%E2%80%A2%202%5Cn%E2%80%A2%203%5Cn%E2%80%A2%204%5Cn%E2%80%A2%205%5Cn%E2%80%A2%206%5Cn%E2%80%A2%207%5Cn%E2%80%A2%208%5Cn%E2%80%A2%209%5Cn%E2%80%A2%2010%5Cn%E2%80%A2%2011%5Cn%E2%80%A2%2012%22%2C%22id%22%3A%22fbskt%22%7D"></div><div>在 main.js 文件中会</div><div>1、引入 vue 、vue-router、vuex 框架包</div><div>2、引入 App 组件</div><div>3、创建 Vue 对象并且装载 vue-router , vuex</div><div>4、渲染第一个组件：App.vue</div><div>所以我们运行之后看到的页面就是 App.vue 组件的内容。</div><h4 id="iShtk"><a name="t35"></a><a></a>2.3.4 总结</h4><h2 id="fxvgN"><a name="t36"></a><a></a>3. Vue-Router</h2><h3 id="qoEqh"><a name="t37"></a><a></a>3.1 Vue-Router介绍</h3><div>在 SPA 中，网站内容的变换实际上的组件的切换，为了方便的实现组件间的切换，Vue 框架引入了 <code>vue-router</code> 工具来实现多个组件之间的切换。</div><div>官方文档：<a href="https://router.vuejs.org/zh/?spm=a2c6h.13046898.publish-article.204.7f7c6ffaBQV1tL" target="_blank">https://router.vuejs.org/zh/</a></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzpiaduicf3hfi_0bad0dc45af04c69814ae88d10246cf7.png%22%2C%22originWidth%22%3A1088%2C%22originHeight%22%3A792%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1088%2C%22height%22%3A792%7D"></span></div><h3 id="qJTnn"><a name="t38"></a><a></a>3.2 Vue-Router路由配置</h3><h4 id="c0Ep9"><a name="t39"></a><a></a>3.2.1 目标</h4><div>掌握Vue-Router路由的配置</div><h4 id="FFslD"><a name="t40"></a><a></a>3.2.2 路径</h4><ol><li>配置Vue-Router</li></ol><h4 id="QmZ9g"><a name="t41"></a><a></a>3.2.3 体验</h4><div>在使用 vue-router 之前，我们需要先配置访问的路径与要显示的组件的对应关系。</div><div>我们需要在 <code>router.js</code> 文件中进行配置。</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzpiaduicf3hfi_28dff2eb194d484e81523717635eea30.png%22%2C%22originWidth%22%3A329%2C%22originHeight%22%3A339%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A329%2C%22height%22%3A339%7D"></span></div><div>router/index.js</div><div>默认配置了两个路由:</div><div>1、当访问 / 时，显示 Home 组件</div><div>2、当访问 /about 时，显示 about 组件</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22import%20Vue%20from%20'vue'%5Cnimport%20VueRouter%20from%20'vue-router'%5Cnimport%20Home%20from%20'..%2Fviews%2FHome.vue'%5Cn%2F%2F%20Vue%E5%AF%B9%E8%B1%A1%E7%9A%84%E9%9D%99%E6%80%81%E6%96%B9%E6%B3%95%5CnVue.use(VueRouter)%5Cn%2F%2F%20%E6%9C%89%E4%B8%80%E4%B8%AA%E9%A1%B5%E9%9D%A2%EF%BC%8C%E5%9C%A8%E6%AD%A4%E5%A4%84%E5%B0%B1%E9%9C%80%E8%A6%81%E9%85%8D%E7%BD%AE%E4%B8%80%E4%B8%AA%E8%B7%AF%E7%94%B1%5Cnconst%20routes%20%3D%20%5B%5Cn%20%20%7B%5Cn%20%20%20%20path%3A%20'%2F'%2C%5Cn%20%20%20%20name%3A%20'home'%2C%5Cn%20%20%20%20component%3A%20Home%5Cn%20%20%7D%2C%5Cn%20%20%7B%5Cn%20%20%20%20path%3A%20'%2Fabout'%2C%2F%2F%20%E5%B0%B1%E6%98%AFurl%EF%BC%8C%E5%B0%B1%E6%98%AF%E6%9C%AA%E6%9D%A5%E8%AE%BF%E9%97%AE%E7%9A%84%E8%B7%AF%E5%BE%84%5Cn%20%20%20%20name%3A%20'about'%2C%2F%2F%20%E9%9A%8F%E6%84%8F%5Cn%20%20%20%20component%3A%20()%20%3D%3E%20import(%20'..%2Fviews%2FAbout.vue')%5Cn%20%20%7D%2C%5Cn%20%20%7B%5Cn%20%20%20%20path%3A%20'%2Flist'%2C%2F%2F%20%E5%B0%B1%E6%98%AFurl%EF%BC%8C%E5%B0%B1%E6%98%AF%E6%9C%AA%E6%9D%A5%E8%AE%BF%E9%97%AE%E7%9A%84%E8%B7%AF%E5%BE%84%5Cn%20%20%20%20name%3A%20'list'%2C%2F%2F%20%E9%9A%8F%E6%84%8F%5Cn%20%20%20%20component%3A%20()%20%3D%3E%20import(%20'..%2Fviews%2FList.vue')%5Cn%20%20%7D%5Cn%5D%5Cnconst%20router%20%3D%20new%20VueRouter(%7B%5Cn%20%20mode%3A%20'history'%2C%5Cn%20%20base%3A%20process.env.BASE_URL%2C%5Cn%20%20routes%5Cn%7D)%5Cnexport%20default%20router%5Cn%E2%80%A2%201%5Cn%E2%80%A2%202%5Cn%E2%80%A2%203%5Cn%E2%80%A2%204%5Cn%E2%80%A2%205%5Cn%E2%80%A2%206%5Cn%E2%80%A2%207%5Cn%E2%80%A2%208%5Cn%E2%80%A2%209%5Cn%E2%80%A2%2010%5Cn%E2%80%A2%2011%5Cn%E2%80%A2%2012%5Cn%E2%80%A2%2013%5Cn%E2%80%A2%2014%5Cn%E2%80%A2%2015%5Cn%E2%80%A2%2016%5Cn%E2%80%A2%2017%5Cn%E2%80%A2%2018%5Cn%E2%80%A2%2019%5Cn%E2%80%A2%2020%5Cn%E2%80%A2%2021%5Cn%E2%80%A2%2022%5Cn%E2%80%A2%2023%5Cn%E2%80%A2%2024%5Cn%E2%80%A2%2025%5Cn%E2%80%A2%2026%5Cn%E2%80%A2%2027%5Cn%E2%80%A2%2028%5Cn%E2%80%A2%2029%5Cn%E2%80%A2%2030%5Cn%E2%80%A2%2031%5Cn%E2%80%A2%2032%5Cn%E2%80%A2%2033%22%2C%22id%22%3A%225BBgd%22%7D"></div><div>说明：</div><div>1、about 组件的写法是延迟加载：在访问 /about 路径时才会加载该组件，这样可以提高首屏显示速度</div><div>2、<code>/* webpackChunkName: "about" */</code> 的意思是将这个组件添加到 about 这个组中，当访问 about 这个组件时就会添加所有 about 这个组中的组件</div><h4 id="VEioN"><a name="t42"></a><a></a>3.2.4 总结</h4><h3 id="pQMeP"><a name="t43"></a><a></a>3.3 Vue-Router路由切换</h3><h4 id="jWSuK"><a name="t44"></a><a></a>3.3.1 目标</h4><div>掌握Vue-Router路由的跳转方式</div><h4 id="u4wMe"><a name="t45"></a><a></a>3.3.2 路径</h4><div>1 介绍路由方式</div><div>2 路由的二种使用方式</div><h4 id="jnNXV"><a name="t46"></a><a></a>3.3.3 体验</h4><h5 id="R7S5X"><a></a>3.3.3.1 路由方式介绍</h5><div>当我们定义好路由之后，我们就可以在页面中添加按钮跳转到相应的路由，有两种跳转方法：</div><div>1、在 HTML 中使用 <code>router-link</code> 标签（相当于a标签）</div><div>2、在 JS 中使用 <code>router-push</code> 实现跳转（相当于 location.href ）</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22this.%24router.push(%5C%22%E5%88%87%E6%8D%A2%E7%BB%84%E4%BB%B6%E7%9A%84%E5%9C%B0%E5%9D%80%5C%22)%5Cn%E2%80%A2%201%22%2C%22id%22%3A%22FBiWy%22%7D"></div><h5 id="Wpxa1"><a></a>3.3.3.2 router-link标签-html代码中使用</h5><div>我们可以在页面中使用 <code>router-link</code> 标签来制作可以跳转的按钮（相当于 a 标签）：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Cdiv%20id%3D%5C%22nav%5C%22%3E%5Cn%20%20%3Crouter-link%20to%3D%5C%22%2F%5C%22%3EHome%3C%2Frouter-link%3E%20%7C%5Cn%20%20%3Crouter-link%20to%3D%5C%22%2Fabout%5C%22%3EAbout%3C%2Frouter-link%3E%5Cn%3C%2Fdiv%3E%5Cn%E2%80%A2%201%5Cn%E2%80%A2%202%5Cn%E2%80%A2%203%5Cn%E2%80%A2%204%22%2C%22id%22%3A%22OGnbO%22%7D"></div><div>说明：to 属性用来指定点击按钮时要切换到的路由</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzpiaduicf3hfi_8f642cea31d044829a2009c843424637.png%22%2C%22originWidth%22%3A817%2C%22originHeight%22%3A473%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A817%2C%22height%22%3A473%7D"></span></div><h5 id="5utYm"><a></a>3.3.3.3 this.$router.push-js脚本中使用</h5><div>在 JS 中我们可以使用 <code>this.$router.push</code> 实现跳转。</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22login()%7B%5Cn%20%20console.log(%20'%E7%99%BB%E5%BD%95%E6%88%90%E5%8A%9F'%20)%5Cn%20%20%2F%2F%20%E8%B7%B3%E8%BD%AC%E5%88%B0%20%2F%5Cn%20%20this.%24router.push('%2F%E4%B8%BB%E9%A1%B5%E9%9D%A2.vue')%5Cn%7D%5Cn%E2%80%A2%201%5Cn%E2%80%A2%202%5Cn%E2%80%A2%203%5Cn%E2%80%A2%204%5Cn%E2%80%A2%205%22%2C%22id%22%3A%22PUISg%22%7D"></div><h4 id="YXssY"><a name="t47"></a><a></a>3.3.4 总结</h4><ol><li>路由切换的两种方式</li></ol><ul data-lake-indent="1"><li>router-link在HTML代码中使用</li><li>this.$router.push在js脚本中使用</li></ul><h3 id="Z9Sd4"><a name="t48"></a><a></a>3.4 组件容器</h3><h4 id="IMybY"><a name="t49"></a><a></a>3.4.1 目标</h4><div>掌握组件容器的使用</div><h4 id="7Ex4o"><a name="t50"></a><a></a>3.4.2 路径</h4><ol><li>学习</li></ol><h4 id="BLfKR"><a name="t51"></a><a></a>3.4.3 体验</h4><div>我们在使用 vue-router 时，除了要配置路由之后，最重要的是，我们还需要在页面中使用 <code>router-view</code> 标签来指定组件显示的位置：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Ctemplate%3E%5Cn%20%20%3Cdiv%20id%3D%5C%22app%5C%22%3E%5Cn%20%20%20%20%3Cdiv%20id%3D%5C%22nav%5C%22%3E%5Cn%20%20%20%20%20%20%3Crouter-link%20to%3D%5C%22%2F%5C%22%3EHome%3C%2Frouter-link%3E%20%7C%5Cn%20%20%20%20%20%20%3Crouter-link%20to%3D%5C%22%2Fabout%5C%22%3EAbout%3C%2Frouter-link%3E%5Cn%20%20%20%20%3C%2Fdiv%3E%5Cn%20%20%20%20%3C!--%20%E7%BB%84%E4%BB%B6%E6%98%BE%E7%A4%BA%E7%9A%84%E5%AE%B9%E5%99%A8%20--%3E%5Cn%20%20%20%20%3Crouter-view%2F%3E%5Cn%20%20%3C%2Fdiv%3E%5Cn%3C%2Ftemplate%3E%5Cn%E2%80%A2%201%5Cn%E2%80%A2%202%5Cn%E2%80%A2%203%5Cn%E2%80%A2%204%5Cn%E2%80%A2%205%5Cn%E2%80%A2%206%5Cn%E2%80%A2%207%5Cn%E2%80%A2%208%5Cn%E2%80%A2%209%5Cn%E2%80%A2%2010%22%2C%22id%22%3A%22hlJEo%22%7D"></div><div>这时所有的路由组件都会显示在 <code>router-view</code> 标签所在的位置上：</div><div>1、默认显示路由配置中的第一个路由，也就是 / 路由</div><div>2、当切换路由时，也是在这个标签的位置上切换路由</div><div>因为我们在 <code>router.js</code> 文件的路由是这样配置的：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22routes%3A%20%5B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E9%85%8D%E7%BD%AE%E8%B7%AF%E7%94%B1%E7%9A%84%E6%95%B0%E7%BB%84%5Cn%20%20%20%20%7B%5Cn%20%20%20%20%20%20path%3A%20'%2F'%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E8%AE%BF%E9%97%AE%E8%B7%AF%E5%BE%84%5Cn%20%20%20%20%20%20name%3A%20'home'%2C%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E8%B7%AF%E7%94%B1%E5%90%8D%E7%A7%B0%5Cn%20%20%20%20%20%20component%3A%20Home%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%AF%B9%E5%BA%94%E7%9A%84%E7%BB%84%E4%BB%B6%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20%7B%5Cn%20%20%20%20%20%20path%3A%20'%2Fabout'%2C%5Cn%20%20%20%20%20%20name%3A%20'about'%2C%5Cn%20%20%20%20%20%20component%3A%20()%20%3D%3E%20import(%2F*%20webpackChunkName%3A%20%5C%22about%5C%22%20*%2F%20'.%2Fviews%2FAbout.vue')%5Cn%20%20%20%20%7D%5Cn%5D%5Cn%E2%80%A2%201%5Cn%E2%80%A2%202%5Cn%E2%80%A2%203%5Cn%E2%80%A2%204%5Cn%E2%80%A2%205%5Cn%E2%80%A2%206%5Cn%E2%80%A2%207%5Cn%E2%80%A2%208%5Cn%E2%80%A2%209%5Cn%E2%80%A2%2010%5Cn%E2%80%A2%2011%5Cn%E2%80%A2%2012%22%2C%22id%22%3A%22Px0f2%22%7D"></div><div>第一个是 home 路由，所以默认显示的就是 Home 组件的内容：</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzpiaduicf3hfi_bc0e495bb350469690dfdee58eb35215.png%22%2C%22originWidth%22%3A990%2C%22originHeight%22%3A843%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A990%2C%22height%22%3A843%7D"></span></div><h4 id="2ngph"><a name="t52"></a><a></a>3.4.4 总结</h4><h3 id="CdB8X"><a name="t53"></a><a></a>3.5 案例：添加一个页面</h3><h4 id="yWppw"><a name="t54"></a><a></a>3.5.1 目标</h4><div>掌握Vue-Router路由的基本使用</div><h4 id="LPkcr"><a name="t55"></a><a></a>3.5.2 路径</h4><ol><li>创建Hello.vue页面</li><li>配置路由</li><li>通过路由的方式进行跳转</li></ol><h4 id="PE0XL"><a name="t56"></a><a></a>3.5.3 体验</h4><div>【第一步】首先在 <code>views</code> 目录下创建 <code>Hello.vue</code> 组件</div><div>views/Hello.vue</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Ctemplate%3E%5Cn%20%20%20%20%3Cdiv%3E%5Cn%20%20%20%20%20%20%20%20%3Cinput%20%40click%3D%5C%22sayHello%5C%22%20type%3D%5C%22button%5C%22%20value%3D%5C%22sayHello%5C%22%3E%5Cn%20%20%20%20%3C%2Fdiv%3E%5Cn%3C%2Ftemplate%3E%5Cn%3Cstyle%3E%5Cnbody%20%7B%5Cn%20%20%20%20background-color%3A%20%23eee%3B%5Cn%7D%5Cn%3C%2Fstyle%3E%5Cn%3Cscript%3E%5Cnexport%20default%20%7B%5Cn%20%20%20%20methods%3A%7B%5Cn%20%20%20%20%20%20%20%20sayHello()%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20alert('Hello%20~')%5Cn%20%20%20%20%20%20%20%20%7D%5Cn%20%20%20%20%7D%5Cn%7D%5Cn%3C%2Fscript%3E%5Cn%E2%80%A2%201%5Cn%E2%80%A2%202%5Cn%E2%80%A2%203%5Cn%E2%80%A2%204%5Cn%E2%80%A2%205%5Cn%E2%80%A2%206%5Cn%E2%80%A2%207%5Cn%E2%80%A2%208%5Cn%E2%80%A2%209%5Cn%E2%80%A2%2010%5Cn%E2%80%A2%2011%5Cn%E2%80%A2%2012%5Cn%E2%80%A2%2013%5Cn%E2%80%A2%2014%5Cn%E2%80%A2%2015%5Cn%E2%80%A2%2016%5Cn%E2%80%A2%2017%5Cn%E2%80%A2%2018%5Cn%E2%80%A2%2019%5Cn%E2%80%A2%2020%5Cn%E2%80%A2%2021%22%2C%22id%22%3A%22AbBxC%22%7D"></div><div>注意：HTML的代码必须要写在一个根标签中。</div><div>【第二步】配置路由</div><div>在 <code>router.js</code> 文件中的 routes 数组中添加一个 hello 路由</div><div>router.js</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22routes%3A%20%5B%5Cn%20%20%20%20...%5Cn%20%20%20%20%7B%5Cn%20%20%20%20%20%20path%3A%20'%2Fhello'%2C%20%20%20%2F%2F%20%E8%B7%AF%E5%BE%84%5Cn%20%20%20%20%20%20name%3A%20'hello'%2C%20%20%20%20%2F%2F%20%E5%90%8D%E7%A7%B0%5Cn%20%20%20%20%20%20component%3A%20()%20%3D%3E%20import('.%2Fviews%2FHello.vue')%20%20%20%20%2F%2F%20%E5%8A%A0%E8%BD%BD%E7%9A%84%E7%BB%84%E4%BB%B6%5Cn%20%20%20%20%7D%5Cn%5D%5Cn%E2%80%A2%201%5Cn%E2%80%A2%202%5Cn%E2%80%A2%203%5Cn%E2%80%A2%204%5Cn%E2%80%A2%205%5Cn%E2%80%A2%206%5Cn%E2%80%A2%207%5Cn%E2%80%A2%208%22%2C%22id%22%3A%22CptvH%22%7D"></div><div>【第三步】添加切换按钮</div><div>在 <code>App.vue</code> 页面中添加跳转到 /hello 的按钮</div><div>App.vue</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Cdiv%20id%3D%5C%22nav%5C%22%3E%5Cn%20%20%3Crouter-link%20to%3D%5C%22%2F%5C%22%3EHome%3C%2Frouter-link%3E%20%7C%5Cn%20%20%3Crouter-link%20to%3D%5C%22%2Fabout%5C%22%3EAbout%3C%2Frouter-link%3E%20%7C%5Cn%20%20%3Crouter-link%20to%3D%5C%22%2Fhello%5C%22%3Ehello%3C%2Frouter-link%3E%5Cn%3C%2Fdiv%3E%5Cn%E2%80%A2%201%5Cn%E2%80%A2%202%5Cn%E2%80%A2%203%5Cn%E2%80%A2%204%5Cn%E2%80%A2%205%22%2C%22id%22%3A%22biFw1%22%7D"></div><div>添加之后保存，保存之后页面会自动刷新：</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzpiaduicf3hfi_dc1aa0518e244ef08d1a0e11144ac446.png%22%2C%22originWidth%22%3A917%2C%22originHeight%22%3A641%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A917%2C%22height%22%3A641%7D"></span></div><div>点击 hello 按钮，就会在 router-view 标签的位置上切换到 Hello 组件：</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzpiaduicf3hfi_453bdf559379494f84693044a924b0e5.png%22%2C%22originWidth%22%3A768%2C%22originHeight%22%3A348%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A768%2C%22height%22%3A348%7D"></span></div><h4 id="svswf"><a name="t57"></a><a></a>3.5.4 总结</h4><h3 id="olfvd"><a name="t58"></a><a></a>3.7 页面组件与功能组件</h3><h4 id="JTisT"><a name="t59"></a><a></a>3.7.1 目标</h4><div>掌握页面组件和功能组件</div><h4 id="Fo2GC"><a name="t60"></a><a></a>3.7.2 路径</h4><ol><li>介绍页面组件和功能组件的概念</li><li>介绍页面组件的使用</li><li>介绍功能组件的使用</li></ol><h4 id="aDV4A"><a name="t61"></a><a></a>3.7.3 体验</h4><h5 id="9IYVC"><a></a>3.7.3.1 页面组件和功能组件的概念</h5><h5 id="T2F9A"><a></a>组件分为两种：<code>页面组件</code> 和 <code>功能组件</code>。</h5><ul><li>页面组件</li></ul><div>用来构建独立页面的组件，保存在 <code>views</code> 目录中，页面组件中可以包含多个功能组件。</div><ul><li>功能组件</li></ul><div>我们可以将页面中一些独立的小功能制作成组件，这些组件可以被页面组件引入使用，比如：翻页、时间插件等，功能组件保存在 <code>components</code> 目录中，这些组件不能独立显示，只能被包含在一个页面组件中使用。</div><div>页面组件和功能组件的关系：（每个页面就是一个页面组件，每个页面中可以包含多个功能组件）</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzpiaduicf3hfi_ffc6581d838a4c4c9ed39ff183561d6f.png%22%2C%22originWidth%22%3A1714%2C%22originHeight%22%3A866%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1714%2C%22height%22%3A866%7D"></span></div><h5 id="dkJW2"><a></a>3.7.3.2 页面组件的使用</h5><h5 id="71e4s"><a></a>3.7.3.3 功能组件的使用</h5><div>系统中默认有一个 <code>HelloWorld</code> 组件：</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzpiaduicf3hfi_5f85eb2467bd40ddbb41e632dc4ebba7.png%22%2C%22originWidth%22%3A390%2C%22originHeight%22%3A184%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A390%2C%22height%22%3A184%7D"></span></div><div>如果要在页面中使用这个组件需要先使用 <code>import</code> 引入该组件，然后在使用标签使用该组件。</div><div>修改 <code>Hello.vue</code> 页面：</div><div>views/Hello.vue</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzpiaduicf3hfi_cca433a0b7a34126b6be6717619e69bd.png%22%2C%22originWidth%22%3A1418%2C%22originHeight%22%3A1316%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1418%2C%22height%22%3A1316%7D"></span></div><div>效果：</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzpiaduicf3hfi_4f268503f2d3474eb9a6f5d25d0eb28f.png%22%2C%22originWidth%22%3A913%2C%22originHeight%22%3A720%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A913%2C%22height%22%3A720%7D"></span></div><h4 id="yx2AW"><a name="t62"></a><a></a>3.7.4 总结</h4><h3 id="8pZ5u"><a name="t63"></a><a></a>3.8 路由参数</h3><h4 id="IjPeL"><a name="t64"></a><a></a>3.8.1 目标</h4><div>掌握路由中传递参数</div><h4 id="SLh2k"><a name="t65"></a><a></a>3.8.2 路径</h4><ol><li>在配置路由的时候定义参数</li><li>在使用路由的时候携带参数</li><li>跳转的组件页面获取参数</li></ol><h4 id="X4zpH"><a name="t66"></a><a></a>3.8.3 体验</h4><h5 id="RJeej"><a></a>3.8.3.1 配置路由的时候定义参数</h5><div>我们在定义路由时经常需要为路由添加一些参数，比如当点击一件商品进入商品详情页时需要把商品的ID传到页面中。</div><div>我们可以使用以下语法定义带参数的路由：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%7B%5Cn%20%20path%3A%20'%2Fhello%2F%3Aid'%2C%5Cn%20%20name%3A%20'hello'%2C%5Cn%20%20component%3A%20()%20%3D%3E%20import('.%2Fviews%2FHello.vue')%5Cn%7D%5Cn%E2%80%A2%201%5Cn%E2%80%A2%202%5Cn%E2%80%A2%203%5Cn%E2%80%A2%204%5Cn%E2%80%A2%205%22%2C%22id%22%3A%22geyxP%22%7D"></div><div>如果我们希望只匹配数字做为参数，这时可以使用正则表达式来限制匹配的类型：</div><div>id 参数必须是数字：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%7B%5Cn%20%20path%3A%20'%2Fhello%2F%3Aid(%5C%5C%5C%5Cd%2B)'%2C%5Cn%20%20name%3A%20'hello'%2C%5Cn%20%20component%3A%20()%20%3D%3E%20import('.%2Fviews%2FHello.vue')%5Cn%7D%5Cn%E2%80%A2%201%5Cn%E2%80%A2%202%5Cn%E2%80%A2%203%5Cn%E2%80%A2%204%5Cn%E2%80%A2%205%22%2C%22id%22%3A%222qLeO%22%7D"></div><h5 id="E51mg"><a></a>3.8.3.2 使用路由的时候携带参数</h5><div>这时当我们访问 <code>/hello/1</code> , <code>/hello/tom</code> 等路径时匹配 Hello 组件。</div><h5 id="GKdum"><a></a>3.8.3.3 跳转的组件页面获取参数</h5><div>在组件中可以使用 <code>this.$router.params</code> 来接收传过来的所有的参数。</div><div>比如在 Hello.vue 组件中可以这样接收 id 这个参数：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22export%20default%20%7B%5Cn%20%20%20%20...%5Cn%20%20%20%20created()%7B%5Cn%20%20%20%20%20%20%20%20%2F%2F%20%E6%89%93%E5%8D%B0%E6%8E%A5%E6%94%B6%E7%9A%84%20id%20%E5%8F%82%E6%95%B0%5Cn%20%20%20%20%20%20%20%20alert(this.%24route.params.id)%5Cn%20%20%20%20%7D%5Cn%20%20%20%20...%5Cn%7D%5Cn%E2%80%A2%201%5Cn%E2%80%A2%202%5Cn%E2%80%A2%203%5Cn%E2%80%A2%204%5Cn%E2%80%A2%205%5Cn%E2%80%A2%206%5Cn%E2%80%A2%207%5Cn%E2%80%A2%208%22%2C%22id%22%3A%22A0vKk%22%7D"></div><h4 id="TVwR6"><a name="t67"></a><a></a>3.8.4 总结</h4><ol><li>配置路由的时候定义参数：<code>path: '/hello/:id(\\d+)'</code></li><li>使用路由的时候携带参数：<code>/hello/1</code></li><li>跳转的页面获取参数：<code>this.$route.params.id</code></li></ol><h3 id="b1l20"><a name="t68"></a><a></a>3.8 嵌套路由（很重要！！！！！！掌握）</h3><h4 id="XDKKF"><a name="t69"></a><a></a>3.7.1 目标</h4><div>掌握嵌套路由的使用</div><h4 id="IMNmb"><a name="t70"></a><a></a>3.7.2 路径</h4><ol><li>创建两个页面HelloJack.vue和HelloTom.vue</li><li>配置路由</li><li>编写Hello.js页面</li><li>测试</li><li>嵌套组件的关系</li></ol><h4 id="WiURn"><a name="t71"></a><a></a>3.7.3 体验</h4><div>【第一步】创建两个页面HelloJack.vue和HelloTom.vue</div><div>【第二步】router.js配置嵌套路由</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%7B%5Cn%20%20path%3A%20'%2Fhello'%2C%5Cn%20%20name%3A%20'hello'%2C%5Cn%20%20meta%3A%20%7B%5Cn%20%20%20%20title%3A'hello'%5Cn%20%20%7D%2C%5Cn%20%20component%3A%20()%20%3D%3E%20import('.%2Fviews%2FHello.vue')%2C%5Cn%20%20children%3A%20%5B%5Cn%20%20%20%20%2F%2F%20%2Fhello%2Ftom%5Cn%20%20%20%20%7B%5Cn%20%20%20%20%20%20path%3A%20%5C%22tom%5C%22%2C%5Cn%20%20%20%20%20%20name%3A%20%5C%22hello-tom%5C%22%2C%5Cn%20%20%20%20%20%20component%3A%20()%20%3D%3E%20import('.%2Fviews%2FHelloTom.vue')%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20%2F%2F%20%2Fhello%2Fjack%5Cn%20%20%20%20%7B%5Cn%20%20%20%20%20%20path%3A%20%5C%22jack%5C%22%2C%5Cn%20%20%20%20%20%20name%3A%20%5C%22hello-jack%5C%22%2C%5Cn%20%20%20%20%20%20component%3A%20()%20%3D%3E%20import('.%2Fviews%2FHelloJack.vue')%5Cn%20%20%20%20%7D%5Cn%20%20%5D%5Cn%7D%5Cn%E2%80%A2%201%5Cn%E2%80%A2%202%5Cn%E2%80%A2%203%5Cn%E2%80%A2%204%5Cn%E2%80%A2%205%5Cn%E2%80%A2%206%5Cn%E2%80%A2%207%5Cn%E2%80%A2%208%5Cn%E2%80%A2%209%5Cn%E2%80%A2%2010%5Cn%E2%80%A2%2011%5Cn%E2%80%A2%2012%5Cn%E2%80%A2%2013%5Cn%E2%80%A2%2014%5Cn%E2%80%A2%2015%5Cn%E2%80%A2%2016%5Cn%E2%80%A2%2017%5Cn%E2%80%A2%2018%5Cn%E2%80%A2%2019%5Cn%E2%80%A2%2020%5Cn%E2%80%A2%2021%5Cn%E2%80%A2%2022%22%2C%22id%22%3A%223JnNK%22%7D"></div><div>【第三步】编写Hello.js页面，使用嵌套路由</div><div>在 Hello.vue 页在中再添加两个按钮和一个 router-view 设置子页面的位置：</div><div>views/Hello.vue</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Crouter-link%20to%3D%5C%22%2Fhello%2Ftom%5C%22%3EHello%20Tom%3C%2Frouter-link%3E%20%7C%5Cn%3Crouter-link%20to%3D%5C%22%2Fhello%2Fjack%5C%22%3EHello%20Jac%3C%2Frouter-link%3E%5Cn%3Chr%3E%5Cn%3Crouter-view%3E%3C%2Frouter-view%3E%5Cn%E2%80%A2%201%5Cn%E2%80%A2%202%5Cn%E2%80%A2%203%5Cn%E2%80%A2%204%22%2C%22id%22%3A%22ulgRj%22%7D"></div><div>【第四步】效果</div><div>效果：当点击 Hello Tom 和 Hello Jack 按钮时，会切换嵌套组件</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzpiaduicf3hfi_8153bd894ba7497da7538b867c052bbd.png%22%2C%22originWidth%22%3A923%2C%22originHeight%22%3A446%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A923%2C%22height%22%3A446%7D"></span></div><div>【第五步】嵌套组件关系图：</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzpiaduicf3hfi_f194331564d14029a407c173f7e073a6.png%22%2C%22originWidth%22%3A844%2C%22originHeight%22%3A654%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A844%2C%22height%22%3A654%7D"></span></div><h2 id="Dlcef"><a name="t72"></a><a></a>4 spa中使用axios</h2><div>官方推荐我们在 vue 中使用 axios 发送 AJAX 的请求。</div><div>在开发 SPA 时，我们需要把 axios 集成进来。</div><h3 id="RRaEK"><a name="t73"></a><a></a>4.1 目标</h3><div>掌握SPA中Axios的使用</div><h3 id="gf8oQ"><a name="t74"></a><a></a>4.2 路径</h3><ol><li>下载安装Axios</li><li>局部使用Axios</li><li>全局使用Axios</li></ol><h3 id="5hLaM"><a name="t75"></a><a></a>4.3 体验</h3><h4 id="dFPPT"><a name="t76"></a><a></a>4.3.1 下载安装Axios</h4><div>使用的方法非常的简单：</div><div>1、先安装</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22npm%20install%20%20axios%5Cn%E2%80%A2%201%22%2C%22id%22%3A%22InZDP%22%7D"></div><h4 id="DMQOD"><a name="t77"></a><a></a>4.3.2 局部使用Axios</h4><div>1、局部引入和使用，在每个*.vue页面中都需要引入</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Cscript%3E%5Cn%2F%2F%20%40%20is%20an%20alias%20to%20%2Fsrc%5Cn%2F%2F%20import%20HelloWorld%20from%20'%40%2Fcomponents%2FHelloWorld.vue'%5Cnimport%20%20axios%20from%20%5C%22axios%5C%22%3B%5Cnaxios.defaults.baseURL%3D%5C%22http%3A%2F%2Flocalhost%3A8080%5C%22%5Cnexport%20default%20%7B%5Cn%20%20name%3A%20'home'%2C%5Cn%20%20data()%7B%5Cn%20%20%20%20return%20%7B%5Cn%20%20%20%20%20%20%20%20users%3A%5B%5D%5Cn%20%20%20%20%7D%5Cn%20%20%7D%2C%5Cn%20%20created()%7B%5Cn%20%20%20%20axios.get(%5C%22%2Fuser%5C%22).then(res%20%3D%3E%20%7B%5Cn%20%20%20%20%20%20%20%20this.users%20%3D%20res.data%5Cn%20%20%20%20%7D)%5Cn%20%20%7D%5Cn%7D%5Cn%3C%2Fscript%3E%5Cn%E2%80%A2%201%5Cn%E2%80%A2%202%5Cn%E2%80%A2%203%5Cn%E2%80%A2%204%5Cn%E2%80%A2%205%5Cn%E2%80%A2%206%5Cn%E2%80%A2%207%5Cn%E2%80%A2%208%5Cn%E2%80%A2%209%5Cn%E2%80%A2%2010%5Cn%E2%80%A2%2011%5Cn%E2%80%A2%2012%5Cn%E2%80%A2%2013%5Cn%E2%80%A2%2014%5Cn%E2%80%A2%2015%5Cn%E2%80%A2%2016%5Cn%E2%80%A2%2017%5Cn%E2%80%A2%2018%5Cn%E2%80%A2%2019%5Cn%E2%80%A2%2020%22%2C%22id%22%3A%22FvhGp%22%7D"></div><h4 id="beC60"><a name="t78"></a><a></a>4.3.3 全局使用Axios</h4><div>1、全局引入</div><div>安装之后需要修改 <code>main.js</code> ，在文件中引入并使用 axios 包：</div><div>main.js</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22import%20Vue%20from%20'vue'%5Cnimport%20App%20from%20'.%2FApp.vue'%5Cnimport%20router%20from%20'.%2Frouter'%5Cnimport%20store%20from%20'.%2Fstore'%5Cn%2F%2F%20%40%20is%20an%20alias%20to%20%2Fsrc%5Cn%2F%2F%20import%20HelloWorld%20from%20'%40%2Fcomponents%2FHelloWorld.vue'%5Cnimport%20axios%20from%20'axios'%5Cn%2F%2F%20axios.defaults.baseURL%3D%5C%22http%3A%2F%2Flocalhost%3A8080%5C%22%5Cn%2F%2F%20%E5%9F%BA%E5%9C%B0%E5%9D%80%E8%AE%BE%E7%BD%AE%EF%BC%8C%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%9C%B0%E5%9D%80%E8%AE%BE%E7%BD%AE%5Cnaxios.defaults.baseURL%3D'http%3A%2F%2Flocalhost%3A8080'%5CnVue.prototype.%24http%20%3D%20axios%5CnVue.config.productionTip%20%3D%20false%5Cnnew%20Vue(%7B%5Cn%20%20router%2C%5Cn%20%20store%2C%5Cn%20%20render%3A%20h%20%3D%3E%20h(App)%5Cn%7D).%24mount('%23app')%5Cn%E2%80%A2%201%5Cn%E2%80%A2%202%5Cn%E2%80%A2%203%5Cn%E2%80%A2%204%5Cn%E2%80%A2%205%5Cn%E2%80%A2%206%5Cn%E2%80%A2%207%5Cn%E2%80%A2%208%5Cn%E2%80%A2%209%5Cn%E2%80%A2%2010%5Cn%E2%80%A2%2011%5Cn%E2%80%A2%2012%5Cn%E2%80%A2%2013%5Cn%E2%80%A2%2014%5Cn%E2%80%A2%2015%5Cn%E2%80%A2%2016%5Cn%E2%80%A2%2017%5Cn%E2%80%A2%2018%5Cn%E2%80%A2%2019%5Cn%E2%80%A2%2020%5Cn%E2%80%A2%2021%22%2C%22id%22%3A%22gD04h%22%7D"></div><div>2、使用</div><div>引入了之后，我们就可以在项目中使用以下三种方法来使用 axios 了：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22export%20default%20%7B%5Cn%20%20name%3A%20'home'%2C%5Cn%20%20data()%7B%5Cn%20%20%20%20return%20%7B%5Cn%20%20%20%20%20%20users%3A%5B%5D%5Cn%20%20%20%20%7D%5Cn%20%20%7D%2C%5Cn%20%20created()%7B%5Cn%20%20%20%20this.%24http.get(%5C%22%2Fuser%5C%22).then(res%20%3D%3E%20%7B%5Cn%20%20%20%20%20%20%20%20this.users%20%3D%20res.data%5Cn%20%20%20%20%7D)%5Cn%20%20%7D%5Cn%7D%5Cn%3C%2Fscript%3E%5Cn%E2%80%A2%201%5Cn%E2%80%A2%202%5Cn%E2%80%A2%203%5Cn%E2%80%A2%204%5Cn%E2%80%A2%205%5Cn%E2%80%A2%206%5Cn%E2%80%A2%207%5Cn%E2%80%A2%208%5Cn%E2%80%A2%209%5Cn%E2%80%A2%2010%5Cn%E2%80%A2%2011%5Cn%E2%80%A2%2012%5Cn%E2%80%A2%2013%5Cn%E2%80%A2%2014%5Cn%E2%80%A2%2015%5Cn%E2%80%A2%2016%5Cn%E2%80%A2%2017%5Cn%E2%80%A2%2018%22%2C%22id%22%3A%220w3Rq%22%7D"></div><h3 id="VLQSz"><a name="t79"></a><a></a>4.4 结论</h3><ol><li>局部使用Axios在页面中引入</li><li>全局使用Axios在main.js中引入</li></ol><h3 id="hLfq4"><a name="t80"></a><a></a>4.5 案例：通过 axios 请求数据</h3><h4 id="80zW6"><a name="t81"></a><a></a>3.7.1 目标</h4><div>掌握Axios的Get方式请求数据</div><h4 id="P0zSr"><a name="t82"></a><a></a>3.7.2 路径</h4><ol><li>编写后台接口</li><li>Vue中编写代码请求数据</li><li>页面展示数据</li><li>测试</li></ol><h4 id="kUQr6"><a name="t83"></a><a></a>3.7.3 体验</h4><div>【第一步】在 Home.vue 中显示数据</div><div>Home.vue</div><div>在初始化时执行 AJAX 获取数据：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Cscript%3E%5Cn%2F%2F%20%40%20is%20an%20alias%20to%20%2Fsrc%5Cn%2F%2F%20import%20HelloWorld%20from%20'%40%2Fcomponents%2FHelloWorld.vue'%5Cnimport%20%7B%20axios%20%7D%20from%20%5C%22axios%5C%22%3B%5Cnaxios.defaults.baseURL%3D%5C%22http%3A%2F%2Flocalhost%3A8080%5C%22%5Cnexport%20default%20%7B%5Cn%20%20name%3A%20'home'%2C%5Cn%20%20data()%7B%5Cn%20%20%20%20return%20%7B%5Cn%20%20%20%20%20%20%20%20goods%3A%5B%5D%5Cn%20%20%20%20%7D%5Cn%20%20%7D%2C%5Cn%20%20created()%7B%5Cn%20%20%20%20axios.get(%5C%22%2Fgoods%5C%22).then(res%20%3D%3E%20%7B%5Cn%20%20%20%20%20%20%20%20this.goods%20%3D%20res.data%5Cn%20%20%20%20%7D)%5Cn%20%20%7D%5Cn%7D%5Cn%3C%2Fscript%3E%5Cn%E2%80%A2%201%5Cn%E2%80%A2%202%5Cn%E2%80%A2%203%5Cn%E2%80%A2%204%5Cn%E2%80%A2%205%5Cn%E2%80%A2%206%5Cn%E2%80%A2%207%5Cn%E2%80%A2%208%5Cn%E2%80%A2%209%5Cn%E2%80%A2%2010%5Cn%E2%80%A2%2011%5Cn%E2%80%A2%2012%5Cn%E2%80%A2%2013%5Cn%E2%80%A2%2014%5Cn%E2%80%A2%2015%5Cn%E2%80%A2%2016%5Cn%E2%80%A2%2017%5Cn%E2%80%A2%2018%5Cn%E2%80%A2%2019%5Cn%E2%80%A2%2020%22%2C%22id%22%3A%22iP3MZ%22%7D"></div><div>【第二步】将数据绑定到页面：</div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22%3Cul%3E%5Cn%20%20%3Cli%20v-for%3D%5C%22(v%2Ck)%20in%20goods%5C%22%20%3Akey%3D%5C%22k%5C%22%3E%5Cn%20%20%20%20%7B%7Bv.goods_name%7D%7D%20%EF%BF%A5%20%7B%7Bv.price%7D%7D%20%3Chr%3E%5Cn%20%20%3C%2Fli%3E%5Cn%3C%2Ful%3E%5Cn%E2%80%A2%201%5Cn%E2%80%A2%202%5Cn%E2%80%A2%203%5Cn%E2%80%A2%204%5Cn%E2%80%A2%205%22%2C%22id%22%3A%22xBWlY%22%7D"></div><div>【第三步】效果：</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fzpiaduicf3hfi_c22a2ea5eb714777a9d836803b73c0b3.png%22%2C%22originWidth%22%3A971%2C%22originHeight%22%3A577%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A971%2C%22height%22%3A577%7D"></span></div><div><br /></div>

SpringBoot+Vue（二）ES6模块化、SPA-Vue企业级开发和Vue全家桶

md格式文档可点击下方小卡片问我获取

Vue全家桶

0 前置知识-ES6模块化

0.1 目标

0.2 路径

0.3 体验

0.1.1 什么是模块化

0.1.2 export

0.1.3 import

0.4 结论

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

1.1 目标

1.2 路径

1.3 体验

1.3.1 什么是SPA？

1.3.2 SPA 的优、缺点

1.3.3 Vue全家桶的技术栈

1.3.4 SPA中的组件-*.vue

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

SpringBoot+Vue（二）ES6模块化、SPA-Vue企业级开发和Vue全家桶

md格式文档可点击下方小卡片问我获取

Vue全家桶

0 前置知识-ES6模块化

0.1 目标

0.2 路径

0.3 体验

0.1.1 什么是模块化

0.1.2 export

0.1.3 import

0.4 结论

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

1.1 目标

1.2 路径

1.3 体验

1.3.1 什么是SPA？

1.3.2 SPA 的优、缺点

1.3.3 Vue全家桶的技术栈

1.3.4 SPA中的组件-*.vue

热门文章

最新文章

相关课程

相关电子书

相关实验场景