总结一下最近学习的知识点

最近这段时间初步学习了vue2，然后完成了团队的前端考核，总结一下遇到的困难和知识点

---

说一下考核的具体要求

任务要求

任务：在线账单本

• 项目要求：使用npm方法安装vue脚手架并生成项目

• 完整功能：增删改查（ CRUD ）

• 对接后台：学会使用接口文档，安装使用axios库发送请求，安装接口测试工具进行接口调试（ 如 postman等）

• 响应式布局：不同屏幕大小有不同的展现方式

• 界面友好：使用第三方组件库（ iView或Element），样式统一，良好观感

• 其它要求：不能使用jQuery与bootstrap，尽量发挥你的想象力

• 额外挑战：（ 尽量尝试去完成 ）

  • 多页面：使用哈希路由，增加第二个页面用于展示统计信息，例如已完成与未完成的数量展示，占比，图例等
  • 版本控制：学会使用git，上传你的代码至github，交任务可以直接将仓库链接发给我

    ---

     

 1.接口文档的使用

这次考核不同与以前不同，以前的考核的数据都是些死数据，要求存储在本地，这次的数据则是从后台拿的。

在项目开发中，web项目的前后端分离开发，APP开发，需要由前后端工程师共同定义接口，编写接口文档，之后大家都根据这个接口文档进行开发，到项目结束前都要一直维护

这里推荐用postman 接口测试工具进行接口调试

---

2.跨域问题

这次后台给的接口，我在发送post请求的时候发生了cors跨域的问题，我以为这也是考核内容之一，结果后来做完了问师兄才发现，原本是没有的，只是后台那边忘了配置了……

后台没有处理接口文档的跨域问题，用vue内置的代理解决了，如下图

---

 3.组件间通信

一、为什么要进行组件通信？

  组件可以说是一个具有独立功能的整体，但是当我们要将这些组件拼接在一起时，这些组件相互之间要建立联系，这个联系我们就称之为通信

二、组件通信的方式有以下几种

   1. 父子组件通信 ： 使用props来实现

    (1).在父组件的模板中将数据用单项数据绑定的形式，绑定在子组件身上

          <Son :money = "money"/>

  在子组件的配置项中可以使用一个props配置项来接收这个数据，接收时，props的取值可以是一个数组

        Vue.component('Son',{

            template: '#son',

          props: ['money']

      })

    (2).在子组件模板中，接收到的属性可以像全局变量一样直接使用

      <p> 父亲给了我  {{ money }}  钱  </p>

 

全局事件总线

 EventBus  如下图

 

---

4.elementUi 的使用

在开发过程中，为了保证样式统一，美观。我们选择第三方的组件库，其中比较优秀的就是elementui。刚开始用的时候，觉得是真的难用，第一次用不太熟悉，样式什么的也乱飞。实属头疼，后面通过各种博客和文章的学习，还有官方文档的提示，熟悉了之后才发现elememt ui是多么厉害的一个第三方组件库。大大节约了造轮子的时间，而且自己写的样式也不如他的好看。

---

5.路由的使用Router

想要在单个页面实现多页面的切换，就需要用到路由了。

 

1.基本使用

1.安装vue-router，命令: npm i vue-router

2.应用插件:Vue.use(VueRouter)

3.编写router配置项:
//引入VueRouter
import VueRouter from'vue-router

//引入Luyou组件
import About from'../components/About import Home from'../components/Home'

//创建router实例对象，去管理一组一组的路由规则

const router =newVueRouter({
routes:[
{
path:'/about', component:About

path:'/home, component:Home
}
})
//暴露router
export default router

---

最后也是有惊无险，通过了这次的考核，希望能继续加油，突破一个个技术难点。

---

最近在为下一次考核做准备，我打算把axios系统性完整的看一遍，里面涉及到响应拦截的内容。继续加油吧