虾米带你轻松搞定Vuejs 系列

（五）构建实战1-单页面应用的基本配置

今天开始从Vue的内部入手，探索一下内部配置的基本构成，在了解这个之前，一定要去了解一下Vue项目的配置是如何划分的。

配置

1、路由配置

我们想一下，由于Vue的框架是一个或者多个单页面构成的,在单页面内部跳转根本不会重新渲染html文件，所以要引入路由机制对它进行控制，因此我们在项目内部要编写相应的路由机制，借助它实现页面被的跳转。
我们先看一下vue-cli 3.x帮我们生成的router.js

这份配置是最简单的路由配置，但是我在反复的操作过程中发现有几个问题，如下

• 假如路由存在二级目录，怎么办？
• 默认的路由模式是hash模式，会携带一个#标记，和我们真实的url不相符啊？
• 页面的组件并没有按需加载？

上述的几个问题大家仔细思考一下，看看是不是有这几个问题呢？经过我仔细思考，发现上述的几个问题都可以解决。解决方式如下：

• 假如存在二级目录，可以借助base属性，这里特别要说一下路由的默认地址是 “/”
• 默认的路由模式是hash模式，会携带一个#标记，和我们真实的url不相符,我们可以调整路由的模式为history模式。
• 页面的组件并没有按需加载，可以使用require,ensure()来优化一下。
  我们看一下优化后的代码：
  
  我们启动一下项目，看一下现在效果来验证一下上述的问题。
  
  

在About组件中加一个子组件，再看一下。

发现上述三点问题都有效解决了。其实除了使用require。ensure()来拆分代码。还可以使用import语法进行分块，废话不多说直接上代码：

2、Vuex配置

其实除了vue-router，如果你的项目需要用到应用程序开发的状态管理模式，那可能就需要用到Vuex.
首先我们安装Vuex，发现项目中多了一个store,js

该配置文件便是 Vuex 的配置文件，主要有 4 个核心点：state、mutations、actions 及 getter，详细的介绍大家可以参考官方文档:https://vuex.vuejs.org/zh/； 经过我反复推敲其实可以用一句话表明这四个核心的关系即：开发者可以通过actions异步提交mutations去修改state的值并使用getter来获取。

这里需要明白一点不是所有的项目都适合使用Vuex，如果你的项目是大中型项目没那么使用Vuex来管理错综复杂的状态数据是很有利的，主要是利于后期的扩展性和维护性（官网描述）。

这里有想了解Vuex的使用可以直接去官网了解研究，我本地没有尝试使用vuex。

3、接口管理

在项目开发的过程中，前端也是不可避免的域服务端进行数据的获取和交互，我的本地项目中使用的vue-axios,下面我记录一下实现接口管理的整个过程：
3.1、安装vue-axios插件，安装完毕后，打开包管理文件，发现已经安装完毕

3.2、在源码目录创建axios文件夹，文件夹下放置一个全局配置：

3.3、编辑配置文件，作为vue的全局配置：

3.4、随便在一个组件中写一个请求，这里我使用github的测试接口，直接上图

3.5、一个远程接口就搞定了，下载我们启动项目来检验一下是不是有效。

外瑞狗的，非常巴适。

总结

今天的笔记记录了Vue的SPA一些基础配置，我深深的感觉到在后续的学习中需要学习的知识越来越多。