开发vue3 +vite +ts 插件包

1、创建一个Vue应用

用脚手架创建一个vue3项目：

npm / `yarn`

npm/yarn create vue@latest

2、开发组件

在src下新建组件目录：packages，这是最终需要打包发布到 npm 的目录

packages                               组件根目录
  ├─组件1                               组件1
    |   ├─index.ts                        组件1入口
    |   ├─index.less                    组件1样式  
  ├─组件2                              组件2
    |   ├─index.ts                          组件2入口
    |   ├─index.less                      组件2样式

3、打包配置

根目录的package.json新增以下配置

  "files": [
    "dist"
  ],
  "main": "./dist/vue3-xxx.umd.js",
  "module": "./dist/vue3-xxx.es.js",
  "exports": {
    ".": {
      "import": "./dist/vue3-xxx.es.js",
      "require": "./dist/vue3-xxx.umd.js"
    }
  },

配置好之后，开发调试无误、开始打包，执行：npm run build，此时打包生成的 dist 目录，就是我们要发布到 npm 的包。

4、配置

进入 dist 目录，生成并配置 package.json 文件，操作如下：

命令行执行： npm init --yes 生成 package.json 文件，修改里面的项目信息即可

同时，在 dist 目录新建 README.md 文件并编辑内容，到时发布后在npm的说明展示

5、发布

进入 dist 目录，命令行执行登录：

npm login，此时会提醒你打开浏览器进行登录，然后邮件收到验证码输入登录

登录成功，可以执行发布命令：npm publish