Ant Design Pro 使用心得

码农小豪
411 阅读3分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。 此次部署需要用的环境

官方网址

www.antdv.com/docs/vue/in… AntdVue 官网

pro.antdv.com/ Ant Design Pro 官网

一 路由模块

1.1动态路由参数介绍

{
    path: '/new-router',
    name: 'newRouter',
    redirect: '/new-router/ahaha',
    component: RouteView,
    meta: { title: '仪表盘', keepAlive: true, permission: [ 'dashboard' ] },
    children: [
    {
        path: '/new-router/ahaha',
        name: 'ahaha',
        component: () => import('@/views/dashboard/Analysis'),
        meta: { title: '分析页', keepAlive: false, permission: [ 'ahaha' ] }
    }
}

{ Route } 对象

参数说明类型默认值
hidden控制路由和子路由是否显示在 sidebarbooleanfalse
redirect重定向地址, 访问这个路由时,自定进行重定向string-
name路由名称, 必须设置,且不能重名string-
meta路由元信息（路由附带扩展信息）object{}
hideChildrenInMenu强制菜单显示为Item而不是SubItem(配合 meta.hidden)boolean-

{ Meta } 路由元信息对象

参数说明类型默认值
title路由标题, 用于显示面包屑, 页面标题 *推荐设置string-
icon路由在 menu 上显示的图标[string,svg]-
keepAlive缓存该路由 (开启 multi-tab 是默认值为 true)booleanfalse
hiddenHeaderContent*特殊 隐藏 PageHeader组件中的页面带的 面包屑和页面标题栏booleanfalse
permission与项目提供的权限拦截匹配的权限，如果不匹配，则会被禁止访问该路由页面array[]

1.2动态路由关联文件

router.config.js

注释掉AsyncRouterMap 里面的组件信息

generator-routers.js

// 注意这个变量 前端路由表 (基于动态) 需要先把页面组件注册到这个数组里面
constantRouterComponents Key为页面标识
/**
 * 动态生成菜单
 * @param token
 * @returns {Promise<Router>}
 */
export const generatorDynamicRouter = token => {
  return new Promise((resolve, reject) => {
    loginService
      .getCurrentUserNav(token)
      .then(res => {
        const { result } = res

        const menuNav = []
        const childrenNav = []
        //      后端数据, 根级树数组,  根级 PID
        listToTree(result
          , childrenNav, '0')
        rootRouter.redirectPath = childrenNav[0].path
        rootRouter.children = childrenNav

        menuNav.push(rootRouter)

        const routers = generator(menuNav)

        console.log(routers)
       // routers[0].children.push(DefultRouter)
        routers.push(notFoundRouter)

       // routers.push(DefultRouter);

        resolve(routers)
      })
      .catch(err => {
        reject(err)
      })
  })
}
export const getResgisterRouter = () => {
  return Array(constantRouterComponents)
}
/**
 * 格式化树形结构数据 生成 vue-router 层级路由表
 *
 * @param routerMap
 * @param parent
 * @returns {*}
 */
export const generator = (routerMap, parent) => {
  return routerMap.map(item => {
    const { title, isShow, hideChildren, hiddenHeaderContent, target, icon } = item || {}
    const currentRouter = {
      // 如果路由设置了 path，则作为默认 path，否则 路由地址 动态拼接生成如 /dashboard/workplace
      path: item.path || `${(parent && parent.path) || ''}/${item.key}`,
      // 路由名称，建议唯一
      name: item.name || item.key || '',
      // 该路由对应页面的 组件 :方案1
      // component: constantRouterComponents[item.component || item.key],
      // 该路由对应页面的 组件 :方案2 (动态加载)
      component: constantRouterComponents[item.component || item.key] || (() => import(`@/views/${item.component}`)),

      // meta: 页面标题, 菜单图标, 页面权限(供指令权限用，可去掉)
      meta: {
        title: title,
        icon: icon || undefined,
        hiddenHeaderContent: hiddenHeaderContent,
        target: target,
        permission: item.name
      }
    }
    // 是否设置了隐藏菜单
    if (isShow === false) {
      currentRouter.hidden = true
    }
    // 是否设置了隐藏子菜单
    if (hideChildren) {
      currentRouter.hideChildrenInMenu = true
    }
    // 为了防止出现后端返回结果不规范，处理有可能出现拼接出两个 反斜杠
    if (!currentRouter.path.startsWith('http')) {
      currentRouter.path = currentRouter.path.replace('//', '/')
    }
    // 重定向
    item.redirectPath && (currentRouter.redirect = item.redirectPath)
    // 是否有子菜单，并递归处理
    if (item.children && item.children.length > 0) {
      // Recursion
      currentRouter.children = generator(item.children, currentRouter)
    }
    return currentRouter
  })
}
// 根级菜单
const rootRouter = {
  key: 'index',
  name: 'index',
  path: '/',
  component: 'BasicLayout',
  redirectPath: '/dashboard',
  title: '首页',
  children: []
}
const notFoundRouter = {
  path: '*',
  redirect: '/error',
  hidden: true
}

二 国际化设置默认中文

2.1关闭国际化

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import storage from 'store'
import moment from 'moment'

// default lang 默认语言改为中文
import zhCN from './lang/zh-CN'

Vue.use(VueI18n)

// defaultLang 改为中文
export const defaultLang = 'zh-CN'

// 消息也改为中文
const messages = {
  'zh-CN': {
    ...zhCN
  }
}

const i18n = new VueI18n({
  silentTranslationWarn: true,
  locale: defaultLang,
  fallbackLocale: defaultLang,
  messages
})

const loadedLanguages = [defaultLang]

function setI18nLanguage (lang) {
  i18n.locale = lang
  // request.headers['Accept-Language'] = lang
  document.querySelector('html').setAttribute('lang', lang)
  return lang
}

export function loadLanguageAsync (lang = defaultLang) {
  return new Promise(resolve => {
    // 缓存语言设置
    storage.set('lang', lang)
    if (i18n.locale !== lang) {
      if (!loadedLanguages.includes(lang)) {
        return import(/* webpackChunkName: "lang-[request]" */ `./lang/${lang}`).then(msg => {
          const locale = msg.default
          i18n.setLocaleMessage(lang, locale)
          loadedLanguages.push(lang)
          moment.updateLocale(locale.momentName, locale.momentLocale)
          return setI18nLanguage(lang)
        })
      }
      return resolve(setI18nLanguage(lang))
    }
    return resolve(lang)
  })
}

export function i18nRender (key) {
  return i18n.t(`${key}`)
}

export default i18n

<template>
  <a-config-provider :locale="locale">
    <div id="app">
      <router-view />
    </div>
  </a-config-provider>
</template>

<script>
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import { domTitle, setDocumentTitle } from '@/utils/domUtil'
import { i18nRender } from '@/locales'
import { generatorDynamicRouter } from '@/router/generator-routers'
export default {
  data () {
    return {}
  },
  computed: {
    locale () {
      // 只是为了切换语言时，更新标题
    	// 这个可以解决时间组件是英文的问题 这是快捷方式
      // const { title } = this.$route.meta
      // title && (setDocumentTitle(`${i18nRender(title)} - ${domTitle}`))
      // return this.$i18n.getLocaleMessage(this.$store.getters.lang).antLocale

      return zhCN
    }
  }
}
</script>

三 注册组件引入组件

因为发现此脚手架是按需引入的方式 框架内除了他需要的 有的其他组件是需要我们自己进行按需引入的 那么久会存在一个 从哪里按需引入

/src/core/lazy_use.js

如果需要挂载一些东西也可以从这个js操作

import {组件名称} from 'ant-design-vue'
Vue.use(组件名称)

// 挂载原型对象
import moment from 'moment'
Vue.prototype.$moment = moment

四 打包发布

各种版本问题就不多言了 直接来说Npm 下载包的问题  
// 千言万语汇成一句命令 记住这个就好了
npm install --legacy-peer-deps

五 目录结构

  • Dashboard
    • 分析页
    • 监控页
    • 工作台
  • 表单页
    • 基础表单页
    • 分步表单页
    • 高级表单页
  • 列表页
    • 查询表格
    • 标准列表
    • 卡片列表
    • 搜索列表（项目/应用/文章）
  • 详情页
    • 基础详情页
    • 高级详情页
  • 结果
    • 成功页
    • 失败页
  • 异常
    • 403 无权限
    • 404 找不到
    • 500 服务器出错
  • 个人页
    • 个人中心
    • 个人设置
  • 帐户
    • 登录
    • 注册
    • 注册成功
avatar
文章
阅读
粉丝