关于vue.js:从零开始用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