m2-vue
M2基于Vue框架封装的应用框架库。
用法
- 安装
npm install m2-vueAPIs
- 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
})