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

aviana-plugin-vue

v2.1.4

Published

Aviana前端微应用插件

Downloads

150

Readme

Aviana 前端微应用插件(Vue 版本)

** 插件说明 **

  1. 插件使用:
import { install, buildRoutes, start } from "aviana-plugin-vue";
install({
  ...config,
  createRouter: (root) => {
    return new Router({
      routes: buildRoutes(routes, root),
    });
  },
  createInstance: (router) => {
    return new Vue({
      router: router,
      store: store,
      render: (h) => h(App),
    });
  },
});

export { bootstrap, mount, unmount } from "aviana-plugin-vue";
start();
  1. 插件提供:
1. 封装微应用的注册逻辑
2. 全局的 $http 对象,通过config中的httpConfig, mock注册接口及mock数据
    提供设置独立运行时Token及网络状态获取方法 { setToken, getHttpInfo, getIsolatedInfo }
    提供网络调用方法 { get, getBy, post, update, remove, removeBy }
3. 全局的 $iac 对象,提供发布消息,监听消息,获取全局数据等方法
    提供应用间通信方法 { name, obtainApp, open, set, get, getOwn, emit, on, once, release, call, callOwn }
4. 全局混入响应式的 userInfo, companyInfo, token
5. 可在 mock 中配置 userInfo, companyInfo, 用于单应用开发调试
6. 全局的 log 方法,可在 template 中直接打印变量值进行调试

** 发布 NPM 包到 Github Packages **

  1. 在 Github 申请一个 TOKEN, 用来发布和获取 npm 包
  2. 在本项目的根目录添加 .npmrc 文件,并添加如下配置 registry=https://npm.pkg.github.com //npm.pkg.github.com/:_authToken=TOKEN
  3. 在 package.json 中更新版本号, npm run build:lib 打包库文件
  4. npm publish 发布包到 Github

** 其他工程获取 NPM 包 **

  1. 在 package.json 添加依赖 "@ucloudcastle/aviana-plugin-vue": "^x.x.x"
  2. 拷贝本项目下的 .npmrc 文件
  3. npm install

** 发布 NPM 包到 npmjs **

  1. 到 https://www.npmjs.com/ 注册账户并申请 Token, 用来发布和获取 npm 包
  2. 在本项目的根目录添加 .npmrc 文件,并添加如下配置 registry=http://registry.npmjs.org //registry.npmjs.org/:_authToken=TOKEN
  3. 在 package.json 中更新版本号, npm run build:lib 打包库文件
  4. npm publish 发布包到 npmjs

** 其他工程获取 NPM 包 **

  1. 在 package.json 添加依赖 "aviana-plugin-vue": "^x.x.x"
  2. npm install

** 代码打包说明 ** npm run build builds the library to dist, generating three files:

  • dist/aviana-plugin-vue.cjs.js A CommonJS bundle, suitable for use in Node.js, that requires the external dependency. This corresponds to the "main" field in package.json
  • dist/dist/aviana-plugin-vue.esm.js an ES module bundle, suitable for use in other people's libraries and applications, that imports the external dependency. This corresponds to the "module" field in package.json
  • dist/dist/aviana-plugin-vue.umd.js a UMD build, suitable for use in any environment (including the browser, as a <script> tag), that includes the external dependency. This corresponds to the "browser" field in package.json

npm run dev builds the library, then keeps rebuilding it whenever the source files change using rollup-watch.

npm test builds the library, then tests it.