创建UI组件库后上传NPM

这篇具有很好参考价值的文章主要介绍了创建UI组件库后上传NPM。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

上篇已经讲了如何创建自己的组件库,这篇讲怎么上传npm后,可以下载使用

1.首先看下组件的文件结构创建UI组件库后上传NPM,ui,npm,前端

 在index.js中要写上每个组件可以按需引用的条件

import Button from "./src/button";

Button.install = function(Vue) {
  Vue.component(Button.name, Button);
};

export default Button;

2.然后这些组件要有个总的入口index.js

import Row from "./row/index.js";
import Col from "./col/index.js";
import Button from "./button/index.js";

const components = [
  Row,
  Col,
  Button
];

const install = Vue => {
  // 判断是否安装
  if (install.installed) return
  components.forEach(component => {
    Vue.component(component.name, component);
  });
};

// 判断是否是直接引入文件,如果是,就不用调用Vue.use()
if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue);
}

export default {
  version: require('../package.json').version,
  install,
  Row,
  Col,
  Button
};

3.在设置下vue.config.js

const { defineConfig } = require("@vue/cli-service");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
module.exports = defineConfig({
  transpileDependencies: true,
  //解决build打包的时候 dist文件里面css、js、img路径错误错误的问题
  publicPath: "./",
  outputDir: "dist",
  assetsDir: "public",
  pages: {
    index: {
      entry: "examples/main.js",
      template: "public/index.html",
      filename: "index.html",
    },
  },
  // 扩展 webpack 配置, 使 packages 加入编译
  chainWebpack: (config) => {
    // 配置js和babel-loader
    config.module
      .rule("js")
      .include.add(path.resolve(__dirname, "packages"))
      .end()
      .use("label")
      .loader("babel-loader")
      .tap((options) => {
        // 修改它的选项
        return options;
      });
    // 配置自定义md-loader
    config.module
      .rule("md-loader")
      .test(/\.md$/)
      .use("vue-loader")
      .loader("vue-loader")
      .end()
      .use("md-loader")
      .loader(path.join(__dirname, "./md-loader/index.js"))
      .end();
  },
  // css: {
  //   extract: {
  //     // filename: "theme-chalk.css",
  //     // chunkFilename: "theme-chalk.[id].[contenthash].css",
  //   },
  //   // extract: true,
  // },
  configureWebpack: {
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "examples"),
      },
    },
    output: {
      libraryExport: "default",
    },
    plugins: [
      new MiniCssExtractPlugin(
        {
        filename: "theme-chalk.css",
        }
      ),
    ],
  },
});

3.之后要设置下package.json

{
  "name": "", //这里是项目名称,要上传npm的话,不能和npm上已有的项目同名
  "version": "0.1.2", // 版本号,每次上传npm,版本号不能一样
  "private": false, // 是否私有,上传npm要开发为false
  "main": "", // lib打包后的路径
  "files": [
    "dist" // 发布时,包含的文件
  ],
  "author": {
    "name": "" // 作者
  },
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "build:theme": "vue-cli-service build --target lib --name theme-chalk --entry packages/theme-chalk theme-chalk/index.scss",
    "lib": "vue-cli-service build --target lib packages/index.js" // lib打包只需要打包组件部分的代码,packages/index.js为组件部分的总入口
  },
......
......
}

4.npm run lib打包后,生成dist包

5.创建npm账户:访问 https://www.npmjs.com/signup 注册一个npm账户。

6.登录npm账户:在你的项目的命令行或终端中运行  npm login  命令 ,然后输入你的用户名、密码和电子邮件地址。

7.发布项目:在你的命令行或终端中,确保你处于项目的根目录,然后运行 npm publish 命令,将你的项目发布到npm仓库。

8.等待发布完成:如果一切顺利,你的项目将被上传到npm仓库,你应该能在你的npm账户的“已发布的包”部分看到它。

注意:在发布之前,请确保你的代码已经经过充分的测试,并遵循了发布开源软件的最佳实践。发布后,你可以使用npm version命令更新你的项目版本,并使用npm publish命令发布新版本。

查看npm包总下载量

使用npm-stat.com网站:

打开浏览器,访问 https://npm-stat.com/在页面上输入你想查询下载量的npm包名指定日期范围,可以查看该报告的下载数。

使用命令行工具npm包:npm-download-counts

  1. 首先确保你已经安装了Node.js和npm
  2. 打开终端或命令提示符,运行以下命令安装全局工具:

    npm install -g npm-download-counts

  3. 输入以下命令以查看特定npm包的总下载量(替换your-package-name为您要查询的包名):

    npm-download-counts -p your-package-name --total

  4. 等待结果显示在控制台中。

请注意,在使用这些方法查询下载量时,下载量可能略有不同,但总体上应该比较接近。总之,这就是如何查询npm包的总下载量。

上一篇:教你制作自己vue的组件库(仿ElementUI)文章来源地址https://www.toymoban.com/news/detail-524489.html

到了这里,关于创建UI组件库后上传NPM的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包