金鹏信息后台管理组件

1. 简介

基于vue开发的金鹏信息后台管理公共组件, 项目中examples文件夹为测试文件夹, packages文件夹为组件存放文件夹。

1.1. 本项目现包括

  • 角色管理-AccessManagement
  • 用户管理-UsersManagement
  • 菜单管理-MenuManagement

2. 基础环境

(vue 2.6.0 +) (nodejs 6.0+)

3. 使用前准备(nrm for vue)

3.1. 简介

nrm 是一个 NPM 源管理器,允许你快速地在如下 NPM 源间切换.

3.2. 安装

    npm install -g nrm

3.3. 使用

3.3.1. 列出可选的NPM源

    ; nrm ls                                                                                                                                    
    * npm ---- https://registry.npmjs.org/
      cnpm --- http://r.cnpmjs.org/
      taobao - http://registry.npm.taobao.org/
      eu ----- http://registry.npmjs.eu/
      au ----- http://registry.npmjs.org.au/
      sl ----- http://npm.strongloop.com/
      nj ----- https://registry.nodejitsu.com/

3.3.2. 切换NPM源

    ; nrm use taobao                                                                                                                             
     Registry has been set to: http://registry.npm.taobao.org/

3.3.3. 增加源 (你可以增加定制的源,特别适用于添加企业内部的私有源)

nrm add jpxx http://xxx.xx.xx.xxx

3.3.4. 删除源

nrm del jpxx

4. 如何使用

4.1. 项目依赖

//npm install jpxx_admin_packages -S
//在main.js中
import jpxx_admin_packages from 'jpxx_admin_packages'
Vue.use(jpxx_admin_packages)

4.2. 添加样式

import ElementUI from "element-ui";
import 'element-ui/lib/theme-chalk/index.css';

4.3. 添加接口请求地址

4.3.1. 如果用的vue-cli2.x版本的脚手架

index.htmlwindow.api.domain='你请求的接口ip'

4.3.2. 如果用的vue-cli3.x版本的脚手架

在项目根目录生成config.js根据运行环境设置请求接口ip,

并挂载到window.api.domain

项目源码中有config.js文件示例

4.4. 储存token

开发调用登录接口后拿到服务端token,务必储存在localStorage下,组件才能正常使用

4.5. 页面中引用

因为组件已经在main.js中use过,所以直接在页面中使用<AccessManagement/> <UsersManagement/> <MenuManagement/>就可以,无需import。

5. 组件展示

5.1. 菜单管理

5.2. 角色管理

5.3. 用户管理

源码地址:http://sources.jpsycn.com/dev-plat/h5/com/menu-role.git

Copyright © jpsycn.com 2018 all right reserved,powered by Gitbook该文件修订时间: 2019-09-10 14:26:03

results matching ""

    No results matching ""