技术栈

本我的项目采纳Vue + ElementUI + Axios + Vue-Router + Vuex

ElementUI篇

1. 为什么抉择elementui

  1. 有大厂背书 : 尽管外围开发只有两三个人，但至多不必放心哪天就不保护，带着小姨子跑路了
  2. 2016 年 3 月 13 日 Element 悄悄诞生，经验了 4 年的风雨洗礼，咱们从一个饿了么外部业务组件库成长为 Vue 生态里最风行的 UI 组件库之一。
  3. 继续迭代 : Element 已取得 48200 Github Star， NPM 下载量 95 万次/每月的可喜成绩。超过 530 名社区贡献者的参加保护，一起实现了 4400 次 commit 的更新迭代。
  4. 生态圈优异，社区沉闷 ：其 contributors曾经有250多人，社区里也有很多基于element-ui 的拓展组件，也有很多相干的 qq 探讨群或者 gitter。
  5. 社区的认可:目前Element曾经是vue相干最多star的开源我的项目了，体现出了社区对其的认可

2. 装置npm

npm i element-ui -D

3. 引入 Element

  1. 残缺引入
import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue';Vue.use(ElementUI);new Vue({  el: '#app',  render: h => h(App)});
  1. 按需引入，即只引入须要的组件（举荐）
import {  // element组件  Message,  Form,  FormItem} from 'element-ui'let elemtuiArray = [  Message,  Form,  FormItem]elemtuiArray.forEach(item => {  Vue.use(item)})

Axios篇

1. 为什么抉择Axios

Axios 是一个基于 promise 的 HTTP 库，能够用在浏览器和 node.js 中

具备一下个性：

  1. 从浏览器中创立 XMLHttpRequests
  2. 从 node.js 创立 http 申请
  3. 反对 Promise API
  4. 拦挡申请和响应
  5. 转换申请数据和响应数据
  6. 勾销申请
  7. 主动转换 JSON 数据
  8. 客户端反对进攻 XSRF

2. Ajax的毛病

  1. 自身是针对MVC编程，不合乎前端MVVM的浪潮
  2. 基于原生XHR开发，XHR自身的架构不清晰，曾经有了fetch的代替计划，jquery整个我的项目太大，单纯应用ajax却要引入整个jquery十分不合理（采取个性化打包计划又不能享受cdn服务）
  3. ajax不反对浏览器的back按钮
  4. 平安问题ajax裸露了与服务器交互的细节
  5. 对搜索引擎的反对比拟弱
  6. 毁坏程序的异样机制
  7. 不容易调试

3. Fetch的的毛病

  1. Fetch合乎关注拆散，没有将输出、输入和用事件来跟踪的状态混淆在一个对象里
  2. fetchtch只对网络申请报错，对400，500都当做胜利的申请，须要封装去解决
  3. fetch默认不会带cookie，须要增加配置项
  4. fetch不反对abort，不反对超时管制，应用setTimeout及Promise.reject的实现的超时管制并不能阻止申请过程持续在后盾运行，造成了量的节约
  5. fetch没有方法原生监测申请的进度，而XHR能够。

装置插件

npm i axios --save-dev

新增request拦截器

  1. 新增文件utils/request.js
import axios from 'axios'import { Message } from 'element-ui'import store from '@/store'import { getToken } from '@/utils/auth'// create an axios instanceconst service = axios.create({  baseURL: '/api', // url = base url + request url  // withCredentials: true, // send cookies when cross-domain requests  timeout: 5000 // request timeout})// request interceptorservice.interceptors.request.use(  config => {    // do something before request is sent    if (store.getters.token) {      // let each request carry token      // ['X-Token'] is a custom headers key      // please modify it according to the actual situation      config.headers['X-Token'] = getToken()    }    return config  },  error => {    // do something with request error    console.log('request error' + error) // for debug    return Promise.reject(error)  })// response interceptorservice.interceptors.response.use(  /**   * If you want to get http information such as headers or status   * Please return  response => response  */  /**   * Determine the request status by custom code   * Here is just an example   * You can also judge the status by HTTP Status Code   */  response => {    // 此处依据需要解决异样    return response  },  error => {    console.log('error====' + error.message) // for debug    Message({      message: error.message,      type: 'error',      duration: 5 * 1000    })    return Promise.reject(error)  })export default service

新增api/api.js

export default {  // 验证管理员信息接口  validateAdminUsers: '/login/validateAdminUsers'}

新增api/index.js

import api from './api'import request from '@/utils/request'let inter = {  // 管理员信息申请接口  validateAdminUsers: data => {    return request.post(api.validateAdminUsers, data)  }}export default inter

配置跨域需要config/index.js

// 配置跨域申请proxyTable: {   '/api': {    target: 申请的url地址,    changeOrigin: true,    pathRewrite: {        '^/api': ''    }  }},

Vue-Router篇

Vue Router 是 Vue.js 官网的路由管理器。它和 Vue.js 的外围深度集成，让构建单页面利用变得大海捞针。

对于路由治理的配置，小编会在独自的一篇博客中进行更新，敬请期待。

Vuex篇

Vuex 是一个专为 Vue.js 利用程序开发的状态管理模式。它采纳集中式存储管理利用的所有组件的状态，并以相应的规定保障状态以一种可预测的形式发生变化。

对于Vuex的配置阐明，小编会在独自的一篇博客中进行更新，敬请期待。

参考资料

  1. github: element
  2. element官网文档
  3. vue-router
  4. vuex