vue ui组件muse-ui的使用

安装

npm install muse-ui typeface-roboto  material-design-icons vuex axios --save

• Muse UI 是一套 Material Design 风格开源组件库，旨在快速搭建页面。它基于 Vue 2.0 开发，并提供了自定义主题，充分满足可定制化的需求。
• material-design-icons 是谷歌定义的一套icon
• typeface 是谷歌定义的一套字体

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import MuseUI from 'muse-ui';
import 'muse-ui/dist/muse-ui.css'
import 'typeface-roboto'
import 'material-design-icons/iconfont/material-icons.css'
Vue.config.productionTip = false
Vue.use(MuseUI)
Vue.use(Vuex)
// // axios 设置
import axiosAPI from '@/api/axios.js'
Vue.use(axiosAPI);
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

App.vue

<template>

    <router-view class="myapp"/>

</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
.myapp{
  /*top: 0px;*/
  /*bottom: 0px;*/
  height: 100%;
}

</style>

mu-bar.vue

<template>
  <mu-appbar style="width: 100%;padding-left: 30px" color="primary">
    <mu-button icon slot="left">
      <mu-icon value="airplanemode_active" size="45"></mu-icon>
    </mu-button>
    724网址导航
    <mu-button  style="padding-right: 30px" flat slot="right">管理</mu-button>
  </mu-appbar>

</template>
<style scoped>

</style>

<script>
  export default {
    name: 'hao123',
    data() {
      return {}
    },
    components: {}
  }
</script>

icons.vue

<template>
  <div>
      <button v-for="item in classname" style="margin: 10px">

      <mu-icon  :value="item" size="50" ></mu-icon>
        <a>{{item}}</a>
      </button>
  </div>
</template>

<script>
  export default {
    name: 'icons',
    data() {
      return {
        classname:["3d_rotation",
        "ac_unit",
        "access_alarm",
        "access_alarms",
        "access_time",
        "accessibility",
        "accessible",
        "account_balance",
        "account_balance_wallet",
        "account_box",
        "account_circle",
        "adb",
        "add",
        "add_a_photo",
        "add_alarm",
        "add_alert",
        "add_box",
        "add_circle",
        "add_circle_outline",
        "add_location",
        "add_shopping_cart",
        "add_to_photos",
        "add_to_queue",
        "adjust",
        "airline_seat_flat",
        "airline_seat_flat_angled",
        "airline_seat_individual_suite",
        "airline_seat_legroom_extra",
        "airline_seat_legroom_normal",
        "airline_seat_legroom_reduced",
        "airline_seat_recline_extra",
        "airline_seat_recline_normal",
        "airplanemode_active",
        "airplanemode_inactive",
        "airplay",
        "airport_shuttle",
        "alarm",
        "alarm_add",
        "alarm_off",
        "alarm_on",
        "album",
        "all_inclusive",
        "all_out",
        "android",
        "announcement",
        "apps",
        "archive",
        "arrow_back",
        "arrow_downward",
        "arrow_drop_down",
        "arrow_drop_down_circle",
        "arrow_drop_up",
        "arrow_forward",
        "arrow_upward",
        "art_track",
        "aspect_ratio",
        "assessment",
        "assignment",
        "assignment_ind",
        "assignment_late",
        "assignment_return",
        "assignment_returned",
        "assignment_turned_in",
        "assistant",
        "assistant_photo",
        "attach_file",
        "attach_money",
        "attachment",
        "audiotrack",
        "autorenew",
        "av_timer",
        "backspace",
        "backup",
        "battery_alert",
        "battery_charging_full",
        "battery_full",
        "battery_std",
        "battery_unknown",
        "beach_access",
        "beenhere",
        "block",
        "bluetooth",
        "bluetooth_audio",
        "bluetooth_connected",
        "bluetooth_disabled",
        "bluetooth_searching",
        "blur_circular",
        "blur_linear",
        "blur_off",
        "blur_on",
        "book",
        "bookmark",
        "bookmark_border",
        "border_all",
        "border_bottom",
        "border_clear",
        "border_color",
        "border_horizontal",
        "border_inner",
        "border_left",
        "border_outer",
        "border_right",
        "border_style",
        "border_top",
        "border_vertical",
        "branding_watermark",
        "brightness_1",
        "brightness_2",
        "brightness_3",
        "brightness_4",
        "brightness_5",
        "brightness_6",
        "brightness_7",
        "brightness_auto",
        "brightness_high",
        "brightness_low",
        "brightness_medium",
        "broken_image",
        "brush",
        "bubble_chart",
        "bug_report",
        "build",
        "burst_mode",
        "business",
        "business_center",
        "cached",
        "cake",
        "call",
        "call_end",
        "call_made",
        "call_merge",
        "call_missed",
        "call_missed_outgoing",
        "call_received",
        "call_split",
        "call_to_action",
        "camera",
        "camera_alt",
        "camera_enhance",
        "camera_front",
        "camera_rear",
        "camera_roll",
        "cancel",
        "card_giftcard",
        "card_membership",
        "card_travel",
        "casino",
        "cast",
        "cast_connected",
        "center_focus_strong",
        "center_focus_weak",
        "change_history",
        "chat",
        "chat_bubble",
        "chat_bubble_outline",
        "check",
        "check_box",
        "check_box_outline_blank",
        "check_circle",
        "chevron_left",
        "chevron_right",
        "child_care",
        "child_friendly",
        "chrome_reader_mode",
        "class",
        "clear",
        "clear_all",
        "close",
        "closed_caption",
        "cloud",
        "cloud_circle",
        "cloud_done",
        "cloud_download",
        "cloud_off",
        "cloud_queue",
        "cloud_upload",
        "code",
        "collections",
        "collections_bookmark",
        "color_lens",
        "colorize",
        "comment",
        "compare",
        "compare_arrows",
        "computer",
        "confirmation_number",
        "contact_mail",
        "contact_phone",
        "contacts",
        "content_copy",
        "content_cut",
        "content_paste",
        "control_point",
        "control_point_duplicate",
        "copyright",
        "create",
        "create_new_folder",
        "credit_card",
        "crop",
        "crop_16_9",
        "crop_3_2",
        "crop_5_4",
        "crop_7_5",
        "crop_din",
        "crop_free",
        "crop_landscape",
        "crop_original",
        "crop_portrait",
        "crop_rotate",
        "crop_square",
        "dashboard",
        "data_usage",
        "date_range",
        "dehaze",
        "delete",
        "delete_forever",
        "delete_sweep",
        "description",
        "desktop_mac",
        "desktop_windows",
        "details",
        "developer_board",
        "developer_mode",
        "device_hub",
        "devices",
        "devices_other",
        "dialer_sip",
        "dialpad",
        "directions",
        "directions_bike",
        "directions_boat",
        "directions_bus",
        "directions_car",
        "directions_railway",
        "directions_run",
        "directions_subway",
        "directions_transit",
        "directions_walk",
        "disc_full",
        "dns",
        "do_not_disturb",
        "do_not_disturb_alt",
        "do_not_disturb_off",
        "do_not_disturb_on",
        "dock",
        "domain",
        "done",
        "done_all",
        "donut_large",
        "donut_small",
        "drafts",
        "drag_handle",
        "drive_eta",
        "dvr",
        "edit",
        "edit_location",
        "eject",
        "email",
        "enhanced_encryption",
        "equalizer",
        "error",
        "error_outline",
        "euro_symbol",
        "ev_station",
        "event",
        "event_available",
        "event_busy",
        "event_note",
        "event_seat",
        "exit_to_app",
        "expand_less",
        "expand_more",
        "explicit",
        "explore",
        "exposure",
        "exposure_neg_1",
        "exposure_neg_2",
        "exposure_plus_1",
        "exposure_plus_2",
        "exposure_zero",
        "extension",
        "face",
        "fast_forward",
        "fast_rewind",
        "favorite",
        "favorite_border",
        "featured_play_list",
        "featured_video",
        "feedback",
        "fiber_dvr",
        "fiber_manual_record",
        "fiber_new",
        "fiber_pin",
        "fiber_smart_record",
        "file_download",
        "file_upload",
        "filter",
        "filter_1",
        "filter_2",
        "filter_3",
        "filter_4",
        "filter_5",
        "filter_6",
        "filter_7",
        "filter_8",
        "filter_9",
        "filter_9_plus",
        "filter_b_and_w",
        "filter_center_focus",
        "filter_drama",
        "filter_frames",
        "filter_hdr",
        "filter_list",
        "filter_none",
        "filter_tilt_shift",
        "filter_vintage",
        "find_in_page",
        "find_replace",
        "fingerprint",
        "first_page",
        "fitness_center",
        "flag",
        "flare",
        "flash_auto",
        "flash_off",
        "flash_on",
        "flight",
        "flight_land",
        "flight_takeoff",
        "flip",
        "flip_to_back",
        "flip_to_front",
        "folder",
        "folder_open",
        "folder_shared",
        "folder_special",
        "font_download",
        "format_align_center",
        "format_align_justify",
        "format_align_left",
        "format_align_right",
        "format_bold",
        "format_clear",
        "format_color_fill",
        "format_color_reset",
        "format_color_text",
        "format_indent_decrease",
        "format_indent_increase",
        "format_italic",
        "format_line_spacing",
        "format_list_bulleted",
        "format_list_numbered",
        "format_paint",
        "format_quote",
        "format_shapes",
        "format_size",
        "format_strikethrough",
        "format_textdirection_l_to_r",
        "format_textdirection_r_to_l",
        "format_underlined",
        "forum",
        "forward",
        "forward_10",
        "forward_30",
        "forward_5",
        "free_breakfast",
        "fullscreen",
        "fullscreen_exit",
        "functions",
        "g_translate",
        "gamepad",
        "games",
        "gavel",
        "gesture",
        "get_app",
        "gif",
        "golf_course",
        "gps_fixed",
        "gps_not_fixed",
        "gps_off",
        "grade",
        "gradient",
        "grain",
        "graphic_eq",
        "grid_off",
        "grid_on",
        "group",
        "group_add",
        "group_work",
        "hd",
        "hdr_off",
        "hdr_on",
        "hdr_strong",
        "hdr_weak",
        "headset",
        "headset_mic",
        "healing",
        "hearing",
        "help",
        "help_outline",
        "high_quality",
        "highlight",
        "highlight_off",
        "history",
        "home",
        "hot_tub",
        "hotel",
        "hourglass_empty",
        "hourglass_full",
        "http",
        "https",
        "image",
        "image_aspect_ratio",
        "import_contacts",
        "import_export",
        "important_devices",
        "inbox",
        "indeterminate_check_box",
        "info",
        "info_outline",
        "input",
        "insert_chart",
        "insert_comment",
        "insert_drive_file",
        "insert_emoticon",
        "insert_invitation",
        "insert_link",
        "insert_photo",
        "invert_colors",
        "invert_colors_off",
        "iso",
        "keyboard",
        "keyboard_arrow_down",
        "keyboard_arrow_left",
        "keyboard_arrow_right",
        "keyboard_arrow_up",
        "keyboard_backspace",
        "keyboard_capslock",
        "keyboard_hide",
        "keyboard_return",
        "keyboard_tab",
        "keyboard_voice",
        "kitchen",
        "label",
        "label_outline",
        "landscape",
        "language",
        "laptop",
        "laptop_chromebook",
        "laptop_mac",
        "laptop_windows",
        "last_page",
        "launch",
        "layers",
        "layers_clear",
        "leak_add",
        "leak_remove",
        "lens",
        "library_add",
        "library_books",
        "library_music",
        "lightbulb_outline",
        "line_style",
        "line_weight",
        "linear_scale",
        "link",
        "linked_camera",
        "list",
        "live_help",
        "live_tv",
        "local_activity",
        "local_airport",
        "local_atm",
        "local_bar",
        "local_cafe",
        "local_car_wash",
        "local_convenience_store",
        "local_dining",
        "local_drink",
        "local_florist",
        "local_gas_station",
        "local_grocery_store",
        "local_hospital",
        "local_hotel",
        "local_laundry_service",
        "local_library",
        "local_mall",
        "local_movies",
        "local_offer",
        "local_parking",
        "local_pharmacy",
        "local_phone",
        "local_pizza",
        "local_play",
        "local_post_office",
        "local_printshop",
        "local_see",
        "local_shipping",
        "local_taxi",
        "location_city",
        "location_disabled",
        "location_off",
        "location_on",
        "location_searching",
        "lock",
        "lock_open",
        "lock_outline",
        "looks",
        "looks_3",
        "looks_4",
        "looks_5",
        "looks_6",
        "looks_one",
        "looks_two",
        "loop",
        "loupe",
        "low_priority",
        "loyalty",
        "mail",
        "mail_outline",
        "map",
        "markunread",
        "markunread_mailbox",
        "memory",
        "menu",
        "merge_type",
        "message",
        "mic",
        "mic_none",
        "mic_off",
        "mms",
        "mode_comment",
        "mode_edit",
        "monetization_on",
        "money_off",
        "monochrome_photos",
        "mood",
        "mood_bad",
        "more",
        "more_horiz",
        "more_vert",
        "motorcycle",
        "mouse",
        "move_to_inbox",
        "movie",
        "movie_creation",
        "movie_filter",
        "multiline_chart",
        "music_note",
        "music_video",
        "my_location",
        "nature",
        "nature_people",
        "navigate_before",
        "navigate_next",
        "navigation",
        "near_me",
        "network_cell",
        "network_check",
        "network_locked",
        "network_wifi",
        "new_releases",
        "next_week",
        "nfc",
        "no_encryption",
        "no_sim",
        "not_interested",
        "note",
        "note_add",
        "notifications",
        "notifications_active",
        "notifications_none",
        "notifications_off",
        "notifications_paused",
        "offline_pin",
        "ondemand_video",
        "opacity",
        "open_in_browser",
        "open_in_new",
        "open_with",
        "pages",
        "pageview",
        "palette",
        "pan_tool",
        "panorama",
        "panorama_fish_eye",
        "panorama_horizontal",
        "panorama_vertical",
        "panorama_wide_angle",
        "party_mode",
        "pause",
        "pause_circle_filled",
        "pause_circle_outline",
        "payment",
        "people",
        "people_outline",
        "perm_camera_mic",
        "perm_contact_calendar",
        "perm_data_setting",
        "perm_device_information",
        "perm_identity",
        "perm_media",
        "perm_phone_msg",
        "perm_scan_wifi",
        "person",
        "person_add",
        "person_outline",
        "person_pin",
        "person_pin_circle",
        "personal_video",
        "pets",
        "phone",
        "phone_android",
        "phone_bluetooth_speaker",
        "phone_forwarded",
        "phone_in_talk",
        "phone_iphone",
        "phone_locked",
        "phone_missed",
        "phone_paused",
        "phonelink",
        "phonelink_erase",
        "phonelink_lock",
        "phonelink_off",
        "phonelink_ring",
        "phonelink_setup",
        "photo",
        "photo_album",
        "photo_camera",
        "photo_filter",
        "photo_library",
        "photo_size_select_actual",
        "photo_size_select_large",
        "photo_size_select_small",
        "picture_as_pdf",
        "picture_in_picture",
        "picture_in_picture_alt",
        "pie_chart",
        "pie_chart_outlined",
        "pin_drop",
        "place",
        "play_arrow",
        "play_circle_filled",
        "play_circle_outline",
        "play_for_work",
        "playlist_add",
        "playlist_add_check",
        "playlist_play",
        "plus_one",
        "poll",
        "polymer",
        "pool",
        "portable_wifi_off",
        "portrait",
        "power",
        "power_input",
        "power_settings_new",
        "pregnant_woman",
        "present_to_all",
        "print",
        "priority_high",
        "public",
        "publish",
        "query_builder",
        "question_answer",
        "queue",
        "queue_music",
        "queue_play_next",
        "radio",
        "radio_button_checked",
        "radio_button_unchecked",
        "rate_review",
        "receipt",
        "recent_actors",
        "record_voice_over",
        "redeem",
        "redo",
        "refresh",
        "remove",
        "remove_circle",
        "remove_circle_outline",
        "remove_from_queue",
        "remove_red_eye",
        "remove_shopping_cart",
        "reorder",
        "repeat",
        "repeat_one",
        "replay",
        "replay_10",
        "replay_30",
        "replay_5",
        "reply",
        "reply_all",
        "report",
        "report_problem",
        "restaurant",
        "restaurant_menu",
        "restore",
        "restore_page",
        "ring_volume",
        "room",
        "room_service",
        "rotate_90_degrees_ccw",
        "rotate_left",
        "rotate_right",
        "rounded_corner",
        "router",
        "rowing",
        "rss_feed",
        "rv_hookup",
        "satellite",
        "save",
        "scanner",
        "schedule",
        "school",
        "screen_lock_landscape",
        "screen_lock_portrait",
        "screen_lock_rotation",
        "screen_rotation",
        "screen_share",
        "sd_card",
        "sd_storage",
        "search",
        "security",
        "select_all",
        "send",
        "sentiment_dissatisfied",
        "sentiment_neutral",
        "sentiment_satisfied",
        "sentiment_very_dissatisfied",
        "sentiment_very_satisfied",
        "settings",
        "settings_applications",
        "settings_backup_restore",
        "settings_bluetooth",
        "settings_brightness",
        "settings_cell",
        "settings_ethernet",
        "settings_input_antenna",
        "settings_input_component",
        "settings_input_composite",
        "settings_input_hdmi",
        "settings_input_svideo",
        "settings_overscan",
        "settings_phone",
        "settings_power",
        "settings_remote",
        "settings_system_daydream",
        "settings_voice",
        "share",
        "shop",
        "shop_two",
        "shopping_basket",
        "shopping_cart",
        "short_text",
        "show_chart",
        "shuffle",
        "signal_cellular_4_bar",
        "signal_cellular_connected_no_internet_4_bar",
        "signal_cellular_no_sim",
        "signal_cellular_null",
        "signal_cellular_off",
        "signal_wifi_4_bar",
        "signal_wifi_4_bar_lock",
        "signal_wifi_off",
        "sim_card",
        "sim_card_alert",
        "skip_next",
        "skip_previous",
        "slideshow",
        "slow_motion_video",
        "smartphone",
        "smoke_free",
        "smoking_rooms",
        "sms",
        "sms_failed",
        "snooze",
        "sort",
        "sort_by_alpha",
        "spa",
        "space_bar",
        "speaker",
        "speaker_group",
        "speaker_notes",
        "speaker_notes_off",
        "speaker_phone",
        "spellcheck",
        "star",
        "star_border",
        "star_half",
        "stars",
        "stay_current_landscape",
        "stay_current_portrait",
        "stay_primary_landscape",
        "stay_primary_portrait",
        "stop",
        "stop_screen_share",
        "storage",
        "store",
        "store_mall_directory",
        "straighten",
        "streetview",
        "strikethrough_s",
        "style",
        "subdirectory_arrow_left",
        "subdirectory_arrow_right",
        "subject",
        "subscriptions",
        "subtitles",
        "subway",
        "supervisor_account",
        "surround_sound",
        "swap_calls",
        "swap_horiz",
        "swap_vert",
        "swap_vertical_circle",
        "switch_camera",
        "switch_video",
        "sync",
        "sync_disabled",
        "sync_problem",
        "system_update",
        "system_update_alt",
        "tab",
        "tab_unselected",
        "tablet",
        "tablet_android",
        "tablet_mac",
        "tag_faces",
        "tap_and_play",
        "terrain",
        "text_fields",
        "text_format",
        "textsms",
        "texture",
        "theaters",
        "thumb_down",
        "thumb_up",
        "thumbs_up_down",
        "time_to_leave",
        "timelapse",
        "timeline",
        "timer",
        "timer_10",
        "timer_3",
        "timer_off",
        "title",
        "toc",
        "today",
        "toll",
        "tonality",
        "touch_app",
        "toys",
        "track_changes",
        "traffic",
        "train",
        "tram",
        "transfer_within_a_station",
        "transform",
        "translate",
        "trending_down",
        "trending_flat",
        "trending_up",
        "tune",
        "turned_in",
        "turned_in_not",
        "tv",
        "unarchive",
        "undo",
        "unfold_less",
        "unfold_more",
        "update",
        "usb",
        "verified_user",
        "vertical_align_bottom",
        "vertical_align_center",
        "vertical_align_top",
        "vibration",
        "video_call",
        "video_label",
        "video_library",
        "videocam",
        "videocam_off",
        "videogame_asset",
        "view_agenda",
        "view_array",
        "view_carousel",
        "view_column",
        "view_comfy",
        "view_compact",
        "view_day",
        "view_headline",
        "view_list",
        "view_module",
        "view_quilt",
        "view_stream",
        "view_week",
        "vignette",
        "visibility",
        "visibility_off",
        "voice_chat",
        "voicemail",
        "volume_down",
        "volume_mute",
        "volume_off",
        "volume_up",
        "vpn_key",
        "vpn_lock",
        "wallpaper",
        "warning",
        "watch",
        "watch_later",
        "wb_auto",
        "wb_cloudy",
        "wb_incandescent",
        "wb_iridescent",
        "wb_sunny",
        "wc",
        "web",
        "web_asset",
        "weekend",
        "whatshot",
        "widgets",
        "wifi",
        "wifi_lock",
        "wifi_tethering",
        "work",
        "wrap_text",
        "youtube_searched_for",
        "zoom_in",
        "zoom_out",
        "zoom_out_map",
    ]

    }
    },
    components: {}
  }
</script>

<style scoped>

</style>

router->index.js

import Vue from 'vue'
import Router from 'vue-router'
import mubar from '@/components/mu-bar'
import icons from '@/components/icons'
import tabs from '@/views/tabs'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'mubar',
      component: mubar
    }, {
      path: '/icons',
      name: 'icons',
      component: icons
    }, {
      path: '/tabs',
      name: 'tabs',
      component: tabs
    }
  ]
})

tabs.vue

<template>
  <div>
  <mubar />
  <mu-container style="padding-top: 20px" class="mycontainer">
    <mu-tabs  :value.sync="active3" center  inverse color="secondary" text-color="rgba(0, 0, 0, .54)" indicator-color="blue500" full-width="true">
      <mu-tab>
        <mu-icon value="phone"></mu-icon>
        RECENTS
      </mu-tab>
      <mu-tab>
        <mu-icon value="favorite"></mu-icon>
        FAVORITES
      </mu-tab>
      <mu-tab>
        <mu-icon value="person_pin"></mu-icon>
        NEARBY
      </mu-tab>
    </mu-tabs>
    <div class="demo-text" v-if="active3 === 0">
      <p>“……是的，我承认从很早以前我都害怕死亡，在医院里被人研究的时候，以前做出布局的时候，其实我很怕死的，因为除了死以外，我没有值得珍惜的东西，很奇怪是吧？恰好是这样我真的很怕死，因为我想要有值得珍惜的东西之后，死亡之后才会不寂寞，我才能够安然的面对死亡……”</p>
    </div>
    <div class="demo-text" v-if="active3 === 1">
      <p>“我的心从来没有这么坚定过，所以我会为了补偿而死，也可以为了补偿而死……一辈子，急辈子都无所谓，我绝不后退！”</p>
      <p>“如果我后退呢？如果我想要死呢？我不想你再次背对着我逃跑了……”</p>
      <p>“那么就去地狱找到你，我绝对不逃！”</p>
      <p>“白痴，你也哭了？因为那些软弱拖累你的脚步？”</p>
    </div>
    <div class="demo-text" v-if="active3 === 2">
      <p>“不，这泪水……是因为勇气，因为力量，因为信任，……你不会懂的！”</p>
      <p>“我不会帮你，想要什么样的未来……自己去追寻吧！”</p>
      <p>“我不需要你的帮忙！未来我会一手开启，什么样的敌人我也不会惧怕……还有，其实我们可以成为朋友的……”</p>
      <p>“也许吧，未来……给你了。”</p>
    </div>
  </mu-container>
  </div>
</template>

<script>
  import  mubar from '@/components/mu-bar'
  export default {
    name: 'tabs',
    data() {
      return {
        active3: 0
      };
    },
    mounted(){
      this.get_categroies()
    },
    methods:{
      get_items(){
        this.get_items()
      }
    },
    components: {
      mubar
    }
  }
</script>

<style >
  .mycontainer{
    top: 0px;
    bottom: 0px;
  }
</style>

api->axios.js

'use strict'
import axios from 'axios'
import qs from 'qs'

axios.defaults.timeout=30000;
// 请求超时时间30s
axios.defaults.baseURL=process.env.API_ROOT;
// 通过项目config文件中的env文件中定义的API_ROOT来确定
axios.defaults.withCredentials=true;
//设置默认全局携带浏览器cookie
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
// post请求头

// 添加请求拦截器，在发送请求之前做些什么(**具体查看axios文档**)--------------------------------------------
axios.interceptors.request.use(function (config) {
  // 显示loading
  return config
}, function (error) {
  // 请求错误时弹框提示，或做些其他事
  return Promise.reject(error)
})

// 添加响应拦截器(**具体查看axios文档**)----------------------------------------------------------------
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么，允许在数据返回客户端前，修改响应的数据
  // 如果只需要返回体中数据，则如下，如果需要全部，则 return response 即可
  return response.data
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error)
})

// 封装数据返回失败提示函数---------------------------------------------------------------------------
function errorState (response) {
  // 隐藏loading
  // 如果http状态码正常，则直接返回数据
  console.log(response)
}

// 封装数据返回成功提示函数---------------------------------------------------------------------------
function successState (res) {
  // 统一判断后端返回的错误码(错误码与后台协商而定)
 console.log(res)
  return res
}

// 封装axios--------------------------------------------------------------------------------------
function apiAxios (method, url, params) {
  let httpDefault = {
    method: method,
    // baseURL: baseURL,
    url: url,
    // `params` 是即将与请求一起发送的 URL 参数
    // `data` 是作为请求主体被发送的数据
    params: method === 'GET' || method === 'DELETE' ? params : null,
    data: method === 'POST' || method === 'PUT' ? qs.stringify(params) : null,
    // timeout: 10000
  }

  // 注意**Promise**使用(Promise首字母大写)
  return new Promise((resolve, reject) => {
    axios(httpDefault)
    // 此处的.then属于axios
      .then((res) => {
        successState(res)
        resolve(res)
      })
      .catch((response) => {
        errorState(response)
        reject(response)
      })
  })
}

// 输出函数getAxios、postAxios、putAxios、delectAxios，供其他文件调用-----------------------------
// Vue.js的插件应当有一个公开方法 install。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。
export default {
  install: function (Vue) {
    Vue.prototype.get_categroies = () => apiAxios('GET','/categroies' , null);
    Vue.prototype.get_items = (params) => apiAxios('POST','/items' ,params);

  }
}

config->dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT:'"http://724.sfair.com/helpdesk/"'
})

config->prod.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_ROOT:'"http://724.sfair.com/helpdesk/"'
}