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.vue

mu-bar.vue

icons.vue

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

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/"'
}

转载于:https://www.cnblogs.com/randomlee/p/10782710.html