primevue pro-基于 vue admin template 的后台管理模板

# primevue-pro #### 简介 primevue-pro是一个基于primevue的前端UI模板，参照了vue-element-admin实现的vue admin tempalte, 是一个后台前端解决方案，它基于 vue 和 primevue 实现。它使用了最新的前端技术栈，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型 - 预览地址：http://pro.primevue.top - 使用文档：http://www.primevue.top <h1 align="center">primevue pro</h1> <div align="center"> [primevue Pro](http://pro.primevue.top) 开箱即用的中后台前端/设计解决方案  </div> <h2 align="center">多种主题模式可选</h2> <div align="center">       </div> ## 使用 ### 下载 ```bash $ git clone https://gitee.com/primevue/primevue-pro.git ``` ### 安装依赖运行 #### yarn ```bash $ yarn install $ yarn serve ``` #### 或者 npm ``` $ npm install $ npm run serve ``` ### 结构 primevue pro包含2个主要部分；应用程序布局和资源。src文件夹中的App.vue是包含基本布局模板的主要组件，而所需的资源（如布局的SASS结构）则位于public/assets/layout文件夹中。 ### 模板 主要布局是App.vue的模板，它分为几个子组件，例如顶部栏，内容，菜单和页脚。这是App.vue组件的模板，该模板 实现了诸如菜单状态，布局模式和其他可配置选项之类的逻辑。 ```html <div :class="containerClass" @click="onDocumentClick"> <div> <AppTopBar :topbarMenuActive="topbarMenuActive" :profileMode="profileMode" :horizontal="layoutMode === 'horizontal'" :activeTopbarItem="activeTopbarItem" @menubutton-click="onMenuButtonClick" @topbar-menubutton-click="onTopbarMenuButtonClick" @topbar-item-click="onTopbarItemClick"></AppTopBar> <transition name="layout-menu-container"> <div :class="menuClass" @click="onMenuClick" v-show="isMenuVisible()"> <div class="menu-scroll-content"> <AppInlineProfile v-if="profileMode === 'inline' && layoutMode !== 'horizontal'" @profile-click="onProfileClick" :expanded="profileExpanded"></AppInlineProfile> <AppMenu :model="menu" :layoutMode="layoutMode" :active="menuActive" @menuitem-click="onMenuItemClick" @root-menuitem-click="onRootMenuItemClick"></AppMenu> </div> </div> </transition> <div class="layout-main"> <router-view /> </div> <AppConfig :layoutMode="layoutMode" @layout-change="onLayoutChange" :darkMenu="darkMenu" @menu-color-change="onMenuColorChange" :profileMode="profileMode" @profile-mode-change="onProfileModeChange" :layout="layout" :layouts="layoutColors" :layoutSpecialColors="layoutSpecialColors" @layout-color-change="onLayoutColorChange" :theme="theme" :themes="themeColors" @theme-change="onThemeChange"></AppConfig> <div class="layout-mask"></div> <AppFooter /> </div> </div> ``` ### 菜单 Menu是基于PrimeNG MenuModel API在AppMenu.vue文件中定义的单独组件。为了定义菜单项，请导航至App.vue文件的数据部分，并使用menu属性将您自己的模型定义为嵌套结构。这是演示应用程序中的菜单组件。请注意，菜单对象已绑定到AppMenu组件的model属性，如下所示。 ```javascript data() { return { menu : [ {label: 'Dashboard', icon: 'pi pi-fw pi-home', to:'/'}, { label: 'UI Kit', icon: 'pi pi-fw pi-sitemap', items: [ {label: 'Form Layout', icon: 'pi pi-fw pi-id-card', to: '/formlayout'}, {label: 'Input', icon: 'pi pi-fw pi-check-square', to: '/input'}, {label: 'Button', icon: 'pi pi-fw pi-mobile', to: '/button'}, {label: 'Table', icon: 'pi pi-fw pi-table', to: '/table'}, {label: 'List', icon: 'pi pi-fw pi-list', to: '/list'}, {label: 'Tree', icon: 'pi pi-fw pi-share-alt', to: '/tree'}, {label: 'Panel', icon: 'pi pi-fw pi-tablet', to: '/panel'}, {label: 'Overlay', icon: 'pi pi-fw pi-clone', to: '/overlay'}, {label: 'Menu', icon: 'pi pi-fw pi-bars', to: '/menus'}, {label: 'Message', icon: 'pi pi-fw pi-comment', to: '/messages'}, {label: 'File', icon: 'pi pi-fw pi-file', to: '/file'}, {label: 'Chart', icon: 'pi pi-fw pi-chart-bar', to: '/chart'}, {label: 'Misc', icon: 'pi pi-fw pi-circle-off', to: '/misc'}, ] }, { label: "Utilities", icon:'pi pi-fw pi-globe', items: [ {label: 'Display', icon:'pi pi-fw pi-desktop', to:'/display'}, {label: 'Elevation', icon:'pi pi-fw pi-external-link', to:'/elevation'}, {label: 'Flexbox', icon:'pi pi-fw pi-directions', to:'/flexbox'}, {label: 'Icons', icon:'pi pi-fw pi-search', to:'/icons'}, {label: 'Widgets', icon:'pi pi-fw pi-star-o', to:'/widgets'}, {label: 'Grid System', icon:'pi pi-fw pi-th-large', to:'/grid'}, {label: 'Spacing', icon:'pi pi-fw pi-arrow-right', to:'/spacing'}, {label: 'Typography', icon:'pi pi-fw pi-align-center', to:'/typography'}, {label: 'Text', icon:'pi pi-fw pi-pencil', to:'/text'}, ] }, { label: 'Pages', icon: 'pi pi-fw pi-clone', items: [ {label: 'Crud', icon: 'pi pi-fw pi-pencil', to: '/crud'}, {label: 'Calendar', icon: 'pi pi-fw pi-calendar-plus', to: '/calendar'}, {label: 'Landing', icon: 'pi pi-fw pi-user-plus', url: 'assets/pages/landing.html', target: '_blank'}, {label: 'Login', icon: 'pi pi-fw pi-sign-in', to: '/login'}, {label: 'Invoice', icon: 'pi pi-fw pi-dollar', to: '/invoice'}, {label: 'Help', icon: 'pi pi-fw pi-question-circle', to: '/help'}, {label: 'Error', icon: 'pi pi-fw pi-times-circle', to: '/error'}, {label: 'Not Found', icon: 'pi pi-fw pi-exclamation-circle', to: '/notfound'}, {label: 'Access Denied', icon: 'pi pi-fw pi-lock', to: '/access'}, {label: 'Empty Page', icon: 'pi pi-fw pi-circle-off', to: '/empty'} ] }, { label: 'Menu Hierarchy', icon: 'pi pi-fw pi-sort-amount-down-alt', items: [ { label: 'Submenu 1', icon: 'pi pi-fw pi-circle-off', items: [ { label: 'Submenu 1.1', icon: 'pi pi-fw pi-circle-off', items: [ {label: 'Submenu 1.1.1', icon: 'pi pi-fw pi-circle-off'}, {label: 'Submenu 1.1.2', icon: 'pi pi-fw pi-circle-off'}, {label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-circle-off'}, ] }, { label: 'Submenu 1.2', icon: 'pi pi-fw pi-circle-off', items: [ {label: 'Submenu 1.2.1', icon: 'pi pi-fw pi-circle-off'}, {label: 'Submenu 1.2.2', icon: 'pi pi-fw pi-circle-off'} ] }, ] }, { label: 'Submenu 2', icon: 'pi pi-fw pi-circle-off', items: [ { label: 'Submenu 2.1', icon: 'pi pi-fw pi-circle-off', items: [ {label: 'Submenu 2.1.1', icon: 'pi pi-fw pi-circle-off'}, {label: 'Submenu 2.1.2', icon: 'pi pi-fw pi-circle-off'}, {label: 'Submenu 2.1.3', icon: 'pi pi-fw pi-circle-off'}, ] }, { label: 'Submenu 2.2', icon: 'pi pi-fw pi-circle-off', items: [ {label: 'Submenu 2.2.1', icon: 'pi pi-fw pi-circle-off'}, {label: 'Submenu 2.2.2', icon: 'pi pi-fw pi-circle-off'} ] }, ] } ] }, {label: 'Docs', icon: 'pi pi-fw pi-question', command: () => { window.location = "#/documentation"}}, {label: 'Buy Now', icon: 'pi pi-fw pi-money-bill', command: () => { window.location = "https://www.primefaces.org/store"}}, ], } } ``` 下面列出了Avalon的依赖项，需要将其添加到package.json中。Avalon没有直接依赖关系，即使PrimeVue组件也是可选的依�