创建UI组件库后上传NPM _命令

上篇已经讲了如何创建自己的组件库，这篇讲怎么上传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..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.之后要设置下.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账户：访问注册一个npm账户。
6.登录npm账户：在你的项目的命令行或终端中运行 npm login 命令，然后输入你的用户名、密码和电子邮件地址。
7.发布项目：在你的命令行或终端中，确保你处于项目的根目录，然后运行 npm命令，将你的项目发布到npm仓库。
8.等待发布完成：如果一切顺利，你的项目将被上传到npm仓库，你应该能在你的npm账户的“已发布的包”部分看到它。
注意：在发布之前，请确保你的代码已经经过充分的测试，并遵循了发布开源软件的最佳实践。发布后，你可以使用npm 命令更新你的项目版本，并使用npm 命令发布新版本。