@doxlab/atomleaf

AtomLeaf 管理后台原子组件

@doxlab/atomleaf

豆壳框架的管理后台基础组件库。包含支持JWT的Axios库，CURD逻辑库，基本的界面组件，基本业务功能组件。开箱即用，提升开发效率。

主要组件：

• 封装支持JWT的Http请求
• 常用的函数库
• CURD逻辑库
• CURD界面组件: CURD表格，CURD列表，CURD树状列表等等
• 其他常用组件
• 角色用户功能：用户管理、角色管理、组织架构管理
• 基础业务功能：代码表、链接、分类

使用

引入atomleaf包：

npm install @doxlab/atomleaf

在应用的入口文件main.js中设置http的baseUrl:

import http from "@doxlab/atomleaf/lib/http"

const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
http.setBaseUrl(baseUrl)

在store中注册模块:

import App from "@doxlab/atomleaf/module/app"
import User from "@doxlab/atomleaf/module/user"
import Role from "@doxlab/atomleaf/module/role"
import Org from "@doxlab/atomleaf/module/org"
import Code from "@doxlab/atomleaf/module/code"
import Link from "@doxlab/atomleaf/module/link"


const store = new Vuex.Store({
  state: {
    //
  },
  mutations: {
    //
  },
  actions: {
    //
  },
  modules: {
    //......
    App,
    User,
    Role,
    Link,
    Code,
    Org,
  // ......
  },
  plugins: [
    createVuexAlong({
      name: config.name,
      local: {
        list: ["App", "User", "Role"],
        isFilter: false,
      },
    }),
  ],
});

路由中注册业务功能界面：

      {
        path: "user",
        name: "SystemUser",
        component: () => import("@doxlab/atomleaf/view/user/list.vue"),
      },

      {
        path: "role",
        name: "SystemRole",
        component: () => import("@doxlab/atomleaf/view/role/list.vue"),
      },
      {
        path: "link",
        name: "SystemLink",
        component: () => import("@doxlab/atomleaf/view/link/list.vue"),
      },
      {
        path: "org",
        name: "SystemOrg",
        component: () => import("@doxlab/atomleaf/view/org/list.vue"),
      },
      {
        path: "code",
        name: "SystemCode",
        component: () => import("@doxlab/atomleaf/view/code/list.vue"),
      },

测试开发时引入atomleaf包

从Gitee仓库克隆下gitee.com/doxlab/atomleaf项目。

进入atomleaf项目目录后：

npm link

然后在需要引入atomleaf的项目中执行命令:

npm link @doxlab/atomleaf