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

rvc-ht-zbzd

v1.0.13

Published

A vue admin template with Element UI & axios & iconfont & permission control & lint

Downloads

3

Readme

vue-admin-template-with-hel

基于 vue-admin-template 改造为远程模块,详细改造说明见 HEL_DESC.md

改造说明(from HEL_DESC)

提供方改造

安装相关包

npm i hel-lib-proxy hel-dev-utils [email protected] rollup@2 rollup-plugin-typescript rollup-plugin-terser shx

下沉入口文件

将原来的 src/main.js 内容复制到 src/loadApp.js

新增模块暴露目录

新增 src/entrance 目录作为统一暴露模块的出口目录

新增模块名描述文件

新增 src/configs/subApp.js 文件描述模块名

改造 main.js

引入 hel-lib-proxy 包,做分流控制

构建层引入模块描述文件

根目录引入 subApp.js 文件,对接 hel-dev-utils,供构建工具的vue.config.js文件使用,主要改动有

  • vue.config.js里修改 publicPath、distDir、output.jsonpFunction、externals
  • public/index.html 引入cdn vue
  • package.json 启动命令里声明 PORT,对齐 publicPath 里的端口号
  • 复制 https://github.com/hel-eco/hel-tpl-remote-vue-comp/tree/master/scripts 三个文件到 scripts 目录下
  • package.json 新增命令 build用于构建hel包,可参考 https://github.com/hel-eco/hel-tpl-remote-vue-comp/blob/master/package.json 直接复制
  • package.json 新增 files 表示npm发布要提交的文件范围

发布

npm run build npm publish

使用方使用

入口文件先绑定vue运行时

import { bindVueRuntime } from 'hel-micro';
import Vue from 'vue';
bindVueRuntime({Vue});

懒加载

export default {
  components: {
    Hamburger: defineAsyncComponent(async () => {
      const comps = await preFetchLib("rvc-ht-zbzd");
      return comps.Hamburger;
    }),
  },
};

预加载

原入口文件下沉,然后加载远程模块,参考 https://github.com/hel-eco/hel-demo-use-remote-vue3-comp/blob/main/src/main.ts

await preFetchLib('rvc-ht-zbzd')

然后安装rvc-ht-zbzd, 其他地方可import 静态导入模块

import { Hamburger } from 'rvc-ht-zbzd';