从零开始，用elementui躺坑vue - 技术选型

技术栈

本项目采用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 instance
const service = axios.create({
  baseURL: '/api', // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

// request interceptor
service.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 interceptor
service.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