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

创建项目
```
npm create create-vite@latest
```

项目目录结构

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

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 };

然后 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");

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",
          },
        },
      },
    },
  });
};

在修改 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"
  }
}

基本可以了，然后就是打包，生成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": ""
}

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

注册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
```

如何使用

全局引入

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");

使用，搞个div 试试

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

一切正常，

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

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

网站公告

今日签到

热门文章

最新发布