鞍山信息港征婚_怎么申请自己公司的邮箱_酒店网络营销方式有哪些_东莞互联网推广

npm create create-vite@latest

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 文件，我的是这样的
   

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

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>
   

   一切正常，

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