vite 创建Vue3自定义指令集合插件，并发布npm

1. 创建项目

   npm create create-vite@latest

2. 项目目录结构

   1. 将没必要的都删点，不删除也行；创建对应的目录结构 在src 下创建  packages 目录，再创建 directives 文件夹 用来存放对应的指令js代码，同级创建一个 index.js 文件。用来统一引入管理的需要注册的指令

   2. 

   3. index.js 代码是这样的

      import date from "./directives/date"; // 时间处理
      import move from "./directives/move"; // 移动处理
      import resize from "./directives/resize";
      
      const directiveList = [move, date, resize];
      
      const install = (App) => {
        // 批量注册自定义指令
        directiveList.forEach((item) => {
          item(App);
        });
      };
      export default { install };

   4. 然后 main.js 还得执行install 方法，然后就成功全局注册封装好的自定义指令了，接下来就是封装，打包，上传，下载验证

      import { createApp } from "vue";
      import App from "./App.vue";
      
      import install from "./packages/index";
      
      const app = createApp(App);
      
      install.install(app);
      
      app.mount("#app");

   5. vite.config.js 也需要改一下配置

      import { defineConfig } from "vite";
      import vue from "@vitejs/plugin-vue";
      import path from "path";
      
      export default ({ mode }) => {
        return defineConfig({
          plugins: [vue()],
          // 运行服务配置
          server: {
            host: "0.0.0.0",
            port: 8889,
            open: true,
          },
          //这里进行配置别名
          resolve: {
            alias: {
              "@": path.resolve("./src"), // @代替src
            },
          },
          // 打包配置
          build: {
            outDir: "dist",
            // 兼容
            target: "es2015",
            sourcemap: false,
            lib: {
              entry: path.resolve(__dirname, "src/packages/index.js"), // 打包入口
              name: "custom-directives", // 打包后的名称
              fileName: (format) => `custom-directives.${format}.js`,
            },
            rollupOptions: {
              // 确保外部化处理那些你不想打包进库的依赖
              external: ["vue"],
              output: {
                // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
                globals: {
                  vue: "Vue",
                },
              },
            },
          },
        });
      };

   6. 在修改 package.json 文件配置

      {
        "name": "custom-directives",
        "private": true,
        "version": "0.0.0",
        "type": "module",
        "scripts": {
          "dev": "vite",
          "build": "vite build",
          "preview": "vite preview"
        },
        "files": [
          "dist"
        ],
        "main": "./dist/custom-directives.umd.js",
        "module": "./dist/custom-directives.es.js",
        "exports": {
          ".": {
            "import": "./dist/custom-directives.es.js",
            "require": "./dist/custom-directives.umd.js"
          }
        },
        "dependencies": {
          "dayjs": "^1.11.13",
          "vue": "^3.4.37"
        },
        "devDependencies": {
          "@vitejs/plugin-vue": "^5.1.2",
          "vite": "^5.4.1"
        }
      }

   7. 基本可以了，然后就是打包，生成dist 文件夹，切换到 dist 文件目录下。执行 npm init -y,  生成 配置文件，我的是这样的

      {
        "name": "custom-directives-qingyun", // 你的插件名称
        "private": false,
        "version": "1.0.3",
        "main": "custom-directives.es.js",
        "scripts": {
          "test": "echo \"Error: no test specified\" && exit 1"
        },
        "keywords": [],
        "author": "",
        "license": "ISC",
        "description": ""
      }

   8. 然后还可以自己加  README.md 文件，我的是这样的

      

3. 注册npm  账号（有账号可以直接跳过）

   1. 切换镜像

      npm config set registry=https://registry.npmjs.org
      

   2. 注册

      npm adduser

      依次填入账号、密码、邮箱, 填写完成后邮箱会收到一个npm发的一次性密码(也就是验证码) 再次填入即可，如果还未填写就报错

   3. 提交代码，一定是在 dist 目录下提交的，别搞错了

      npm publish

   4. 成功了是这样的

      

   5. 然后去npm 自己的账号下看看 package ,估计也需要梯子才能访问正常

      

   6. 上传成功就是 下载了

      npm i custom-directives-qingyun

4. 如何使用

   1. 全局引入

   2. import { createApp } from "vue";
      import "./style.css";
      import App from "./App.vue";
      import index from "./plugins/index";
      import customDirectivesQingyun from "custom-directives-qingyun";
      
      const app = createApp(App);
      
      app.use(index);
      app.use(customDirectivesQingyun);
      app.mount("#app");

   3. 使用，搞个div 试试

          <div class="box" v-resize="'width'"></div>

      一切正常，

5. 看不懂或者有问题的地方可以多评论，我会及时回答