组件库发布到npm

1. 创建package.json

• lib/package.json

注意

1. 每次更行注意版本号.只能大不能小
2. name 里面必须是小写 不能大写

{
    "name":"yj-elementplus-componentall",
    "version":"1.0.1",
    "main":"index.umd.js",
    "module":"index.mjs",
    "types":"index.d.ts",
    "author":{
      "name":"yj"
    },
    "keywords":[
      "element-plus",
      "ts",
      "封装组件",
      "二次封装",
      "element-plus二次封装",
      "yj"
    ]
  }

声明

告诉使用当前组件库的项目这个组件库是一个vue插件

注意

这里面每个组件下面都要有index.d.ts文件,里面内容一样

• lib/index.d.ts

import { App } from "vue";
declare const _default: {
  install(app: App): void;
};
export default _default;

改名

注意

1. 你打包以后的名称不叫index.js 或者index.umd.js,而是叫你的组件名称.比如chooseArea.js之类的

2. 在这里lib下面都改成index.js, index.umd.js, index.d.ts, index.css

架构

├── public
│   ├── favicon.ico
│   └── index.html
├── lib
│   ├── chooseArea
│   │   ├── index.d.ts
│   │   ├── index.mjs
│   │   ├── index.umd.js
│   │   ├── package.json
│   │   ├── index.css (可有可无)
│   ├── chooseCity
│   │   ├── index.d.ts
│   │   ├── index.mjs
│   │   ├── index.umd.js
│   │   ├── package.json
│   │   ├── index.css (可有可无)
│   ├── package.json
│   ├── index.cjs
│   ├── index.d.ts
│   ├── index.css
│   ├── index.mjs

发布

• 先登陆

npm login

• 登陆成功后发布

npm publish ./lib

更新

• 如果要是更新的话,先删除原来的,然后重新打包

• 接着把package.json里面的版本号新的版本号 必须比原先的大

• 然后重新发布

使用

• 安装

npm install 你的包名

• main.ts里面使用

import "你的css路径";
import xxx from "你的包名";
app.use(xxx);