ゼロから、elementui横穴vue-テクノロジーで選択

テクノロジースタック
本プロジェクトは、Vue+ElementUI+Axios+Vue-Router+Vuex
ElementUI編
1.なぜelementuiを選んだのか

は大きな工場の裏書があります:核心開発は2、3人しかいませんが、少なくともいつメンテナンスしない心配はありません.おばさんを連れて

を走りました.

2016年3月13日にElementがひっそりと誕生し、4年間の風雨洗礼を経て、私たちはお腹が空いた内部業務コンポーネントライブラリからVue生態の中で最も流行しているUIコンポーネントライブラリの一つに成長しました.

反復:Elementは48200 Githubスター、NPMダウンロード数95万回/毎月の喜ばしい成績を獲得した.530人以上のコミュニティ貢献者の参加メンテナンスは、4400回のcommitの更新反復を同時に完了した.

生態圏は優れており、コミュニティは活発である:そのcontributorsはすでに250人以上あり、コミュニティにもelement-uiに基づく拡張コンポーネントが多く、関連するqq討論群やgitterも多い.

コミュニティの認可:現在Elementはすでにvue関連の最も多いstarのオープンソースプロジェクトであり、コミュニティの認可

を体現している.
2.npmを取り付ける

npm i element-ui -D

3.Elementの導入

完全導入

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)
});

は必要に応じて導入する、すなわち必要なコンポーネント(推奨)

のみを導入する.

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中
次の機能があります.

ブラウザからXMLHttpRequests

を作成

node.js httpリクエスト作成

Promise API

をサポート

ブロック要求および応答

変換要求データと応答データ

キャンセル要求

自動変換JSONデータ

クライアントは防御XSRF

をサポートする.
2.Ajaxのデメリット

自体はMVCプログラミングに対して、フロントエンドMVVMに合わないInspur

オリジナルXHR開発に基づいて、XHR自体のアーキテクチャが不明確で、すでにfetchの代替案があり、jquery全体のプロジェクトが大きすぎて、ajaxを単純に使用してjquery全体を導入するのは非常に不合理である(個性的なパッケージ案を採用してもcdnサービスを享受できない)

ajaxはブラウザのbackボタン

をサポートしていません.

セキュリティの問題ajaxは、サーバとのインタラクションの詳細

を暴露した.

検索エンジンへのサポートは比較的弱い

プログラムを破壊する異常機構

容易なデバッグ

3.Fetchの欠点

Fetchは注目分離に合致し、入力、出力、およびイベントで追跡する状態を1つのオブジェクトに混在させない

.

fetchtchはネットワークリクエストに対してのみエラーを報告し、400500に対しても成功したリクエストとして、

をカプセル化する必要がある.

fetchのデフォルトにはクッキーはありません.構成項目

を追加する必要があります.

fetchはabortをサポートせず、タイムアウト制御をサポートせず、settimeoutおよびPromiseを使用する.rejectの実装のタイムアウト制御は、リクエストプロセスがバックグラウンドで実行されることを阻止することができず、無駄な量の

をもたらす.

fetchは、XHRが可能であるにもかかわらず、要求された進捗を原生的に監視することはできない.

プラグインのインストール
npm i axios --save-dev
requestブロッキングの追加

新規ファイル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の配置説明については、編集者が個別のブログで更新するので、お楽しみに.
参考資料

github: element

Element公式ドキュメント

vue-router

vuex