第一天（vue-cli安装、初始化项目、整合elementUI、axios封装）

1. vue cli安装

1.1  全局安装vue-cli

1.2  安装成功后，在命令行可以使用vue命令，比如查看vue版本

2  启动项目测试

2.1  输入npm run serve命令（ctrl+c退出）

 

3  初始化项目

3.1  配置vue.config.js

3.2  整合第三方库

3.2.1  安装axios，处理异步请求

3.2.2  安装pubsub-js，实现非父子组件间通信

3.3  整合elementUI

3.3.1  官网：http://element.eleme.cn/

3.3.2  elementUI安装

3.3.3  elementUI完整引入

启动项目（npm run serve），看控制台打印的环境是否为开发环境。

3.3.4  elementUI插件安装

在vs-code中安装element UI Snippets插件（有element语法提示）

4  axios封装

4.1  封装axios对象

（1）在src目录下创建utils目录及utils下面创建request.js文件

（2）

4.2  测试封装的axios

（1）在public下创建db.json数据文件，内容如下：

（2）在src目录下创建api目录及api下面创建test.js文件

（3）测试请求db.json，直接请求http://localhost:8888/db.json,

（4）在HelloWorld.vue中import导入test.js

（5）访问http://localhost:8888/#/查看浏览器控制台，查询出数据。

（6）测试2：采用config配置参数发送请求，将URL前缀抽成一个常量方便改动

重新刷新页面，发现控制台输入get2数据

（7）测试3：

Test.js：

HelloWorld.vue：

重新刷新页面，发现控制台输入get3数据

第一天心得：初步了解前后端分离项目的概况，完成了项目初始化，并封装了axios对象