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