m2-vue

M2基于Vue框架封装的应用框架库。

用法

• 安装

npm install m2-vue

APIs

• render 渲染Vue应用的根组件。

| 参数 | 类型 | 描述 | 默认值 | 示例 | | ------------ | ------------ | ------------ | ------------ | ------------ | | rootApp | object | 当前应用的根组件(可能是对象或组件) | — | — | | options | object | 当前扩展配置 | — | {router,store,env,i18n,plugins,fastclick,cookie,lazy,init} |

import { render } from 'm2-vue'
// 全量加载
// import M2 from 'm2-ui'
// import Element from 'element-ui'
// 按需加载
import plugins from './plugins'
import App from './views/app'
import router from './router'
import store from './store'
import i18n from './locales/i18n'
import './plugins/svg'

export default render(App, {
  router,
  store,
  i18n,
  plugins,
  lazy: {
    preLoad: 1,
    loading: require('assets/img/common/loading.gif')
  },
  init: Vue => {
    // 启用全量加载（请在views/app.vue中引入样式：@import "~m2-ui/lib/theme-grace/index.css"）
    // Vue.use(M2)
    // Vue.use(Element)
    // 启用按需加载（需要重新运行npm run serve）
  }
})

• getI18nLocale 配置应用的多语言插件(集成element,m2,...)。

| 参数 | 类型 | 描述 | 默认值 | 示例 | | ------------ | ------------ | ------------ | ------------ | ------------ | | langs | object | 应用多语言配置 | — | { zh: {default:true,name:'姓名'}, en: {name:'Name'} } | locales | array | 其他框架(element,m2,...)多语言配置 | — | { elementLocale, m2Locale } |

• mergeLangs 合并其他框架的语言包与当前应用的语言包(element,m2,...)。

| 参数 | 类型 | 描述 | 默认值 | 示例 | | ------------ | ------------ | ------------ | ------------ | ------------ | | appLang | object | 当前应用语言包 | — | { name: '姓名' } | langs | array | 其他框架(element,m2,...)语言包 | — | { elementLocale, m2Locale } |

• configDefaultLang 配置默认的语言。

| 参数 | 类型 | 描述 | 默认值 | 示例 | | ------------ | ------------ | ------------ | ------------ | ------------ | | lang | string | 默认语言(未配置将自动读取浏览器或系统的默认配置) | — | 'zh' |

• changeLang 切换当前应用的语言。
• appKey 当前多语言配置来源于第三方配置时使用。

| 参数 | 类型 | 描述 | 默认值 | 示例 | | ------------ | ------------ | ------------ | ------------ | ------------ | | vm | object | 当前应用实例vm | — | — | | lang | string | 当前切换的语言 | — | 'en' | | appKey | string | 当前多语言配置的系统标识符 | — | — |

• getRouter 获取路由配置对象。

| 参数 | 类型 | 描述 | 默认值 | 示例 | | ------------ | ------------ | ------------ | ------------ | ------------ | | routerConfig | array | 路由配置对象 | — | — | | options | object | 配置选项 | — | { mode: 'hash', redirect: '/home', notmatch: '/404' } |

import { getRouter } from 'm2-vue'

const routes = [
  { path: '/home', component: () => import('views/home'), meta: { keepAlive: true, title: '首页' } },
  { path: '/category', component: () => import('views/category'), meta: { title: '分类' }  },
  { path: '/shopcart', component: () => import('views/shopcart'), meta: { title: '购物车', auth: true } },
  { path: '/profile', component: () => import('views/profile'), meta: { title: '我的', auth: true } }
]

export default getRouter(routes, { redirect: '/home', notmatch: '/404', guard: (to, from, next) => {} })
// export default getRouter(routes, { redirect: '/home', notmatch: '/404', guard: { auth: 'auth', login: 'login', before: (to, from, next) => {} }})

• mapRoute 将路由表中的路由配置组件名(字符串)映射为真实的组件。

| 参数 | 类型 | 描述 | 默认值 | 示例 | | ------------ | ------------ | ------------ | ------------ | ------------ | | route | object | 当前的路由对象 | — | { path: '/', name: 'Home', component: 'home', children: [] } | routeMap | object | 路由映射对象 | — | {'home': () => import('/views/home')}

• mapRouteConfig 映射路由表的路由配置项。

| 参数 | 类型 | 描述 | 默认值 | 示例 | | ------------ | ------------ | ------------ | ------------ | ------------ | | routes | Array | 当前的路由对象 | — | [{ path: '/', name: 'Home', component: 'home', children: [] }] | routeMap | Object | 路由映射对象 | — | {'home': () => import('/views/home')}

• getStore 获取Vuex的Store对象。

| 参数 | 类型 | 描述 | 默认值 | 示例 | | ------------ | ------------ | ------------ | ------------ | ------------ | | options | object | 配置选项 | { state,mutations,getters,actions,modules } | — |

 import { getStore } from 'm2-vue'
 import state from './state'
 import getters from './getters'
 import mutations from './mutations'
 import actions from './actions'

 export default getStore({
   state,
   getters,
   mutations,
   actions
 })