上篇已经讲了如何创建自己的组件库,这篇讲怎么上传npm后,可以下载使用
1.首先看下组件的文件结构
在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) returncomponents.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-loaderconfig.module.rule("js").include.add(path.resolve(__dirname, "packages")).end().use("label").loader("babel-loader").tap((options) => {// 修改它的选项return options;});// 配置自定义md-loaderconfig.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
- 首先确保你已经安装了Node.js和npm
- 打开终端或命令提示符,运行以下命令安装全局工具:
npm install -g npm-download-counts
- 输入以下命令以查看特定npm包的总下载量(替换
your-package-name
为您要查询的包名):npm-download-counts -p your-package-name --total
- 等待结果显示在控制台中。
请注意,在使用这些方法查询下载量时,下载量可能略有不同,但总体上应该比较接近。总之,这就是如何查询npm包的总下载量。
上一篇:教你制作自己vue的组件库(仿ElementUI)