上篇已经讲了如何创建自己的组件库，这篇讲怎么上传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) 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账户。这将允许你将你的项目上传到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）
