关于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