npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

pk-vue

v2.0.0

Published

vue基础库

Downloads

3

Readme

pk-vue

vue基础层封装

1. 使用render函数创建vue实例:render.js

import { render } from "pk-vue"
import App from "./App.vue";
import router from "./router";
import store from "./store";

const options = {
  root: App, // 必须 当前应用的根组件 一般是app.vue
  router: router, // 必须  router实例
  store: store, // 必须  store实例
  options: { // options 实例化vue配置项 下为详细注解
    fastclick: false, // 默认false 是否启用移动端快速点击插件
    cookie: false, // 默认false 是否启用vue-cookie操作插件
    lazyOptions: {}, // 默认null 启用图片VueLazyLoad懒加载插件时的配置项, 不传表示不启用
    filters: [], // 默认[] 过滤器数组 格式为 {name:"", rule: ()=>{}} 内置有date,dateTime时间格式化过滤器
    directives: [], // 默认[] 指令数组 格式为 {name:"", rule: ()=>{}} 内置有v-auth鉴权指令
    plugins: [], // 默认[] 插件数组 [pkui, el-input] 可以直接Vue.use()的插件数组
    fncBeforeVue: ()=>{}, // 实例化vue前可执行的回调函数 fncBeforeVue(vue){... 你的逻辑}
    auth: true, // 默认true 是否需要鉴权系统,如果不需要,后续参数无需再传
  }, 
  routeOptions:{ // 路由守卫配置项 用于前端鉴权及异步路由 下为详细注解
    tokenKey: 'token', // 存储在local中的token的key
    dispatchSetToken: 'app/setToken', // store设置token的actions命名空间 默认'app/setToken'
    dispatchSetMenu: 'menu/setMenu', // store设置菜单的actions命名空间 默认'menu/setMenu'
    dispatchSetMenuList: 'menu/setMenuList', // store设置一维菜单的actions命名空间
    dispatchSetPermissions: 'menu/setPermissions', // store设置按钮权限码的actions命名空间 默认'menu/setPermissions'
    pathLogin: '/login', // 登录页的 router path 默认'/login'
    pathLogged: '/index', // 已登录后 再进登录页时自动重定向的 router path 默认'/index'
    apiFn: ()=>{}, // **必须** 获取菜单数据的api函数,返回值为一个promise
    vaJwtExpiredFn: ()=>{}, // 自定义校验jwt是否过期的函数 默认为比较jwt携带过期时间与当前时间比较,单位秒,传入表示自定义过期规则
  },
  menuOptions:{ // 菜单数据解析为路由数据配置项 下为详细注解
    url: 'url', // 前端地址栏路由 将映射真实文件路径 映射规则:import(`@/views${url}/index.vue`)
    name: 'routerName', // 命名路由 
    meta: 'meta', // 路由元数据
    children: 'children', // 子菜单字段
    permissions: 'permissions', // 按钮权限字段
    path404: 'error/404' // 404路径,
    mapPathFn: (item) => {} // 路由映射文件路径方法 必填
  },
  nextRoutes:[] // 需要登录后插入的、非后台返回的路由列表 默认[] 
}
const mount = "#app"; // 非必选 vue挂载dom 默认为#app

// 实例化vue
const vueRender = () => render(options, mount);

export default vueRender;

2. 在main.js内实例化vue

下面是 最少 & 必须 的配置项:

import { render } from "pk-vue"
import App from "./App.vue";
import store from "./store";
import router from "./router";
import nextRoutes from "./router/next-router"
import routeMap from "./router/map-router"
import { getMenuApi } from "./api/menu"

// 声明鉴权需要的参数
const routeOptions = {
  apiFn: getMenuApi
}

// 声明菜单解析为路由所需参数
const menuOptions = {
  mapPathFn: (item) => routeMap(item.url)
}

// 导出手动实例化vue函数
const vueRender = () => render({ root: App, router, store, routeOptions, nextRoutes, menuOptions });

export default vueRender;

3. 注意事项

  1. 注意:菜单数据映射为路由数据默认你有一个layout路由且默认重定向至/index如下, 其他菜单路由均挂载在layout的children内
  let userRouter = {
    path: "/layout",
    name: "layout",
    component: () => import('@/views/layout/index.vue'),
    redirect: '/index',
    children: []
  };
  1. 注意:路由的映射规则如下:
component: () => import(`@/views${url}/index.vue`)
  1. 注意:因为在封装里路由映射文件会找不到,因此需要在每个项目里传入一个映射方法 src/router/map-router.js
module.exports = path => () => import(`@/views${path}/index.vue`);
  1. 注意:路由守卫检查store中是否已经存在用户菜单指定为:
store.getters.menu

4. 其他方法

import { VaJwt } from "pk-vue"

// VaJwt是一个验证和解析未加密jwt的类,提供了许多静态方法
// console.log(VaJwt) 打印查看
// 静态方法无需实例化可直接使用,例:
const payload = VaJwt.payloadAtob(jwt);
// 解析jwt中有效载荷内的数据