vue插件:https://v3.cn.vuejs.org/guide/plugins.html

按照官网的指引

  1. 初始化一个包 npm init 按照顺序填写内容
  • 命名
  • 版本
  • 描述
  • 初始文件 (默认index.js,设置可以更改)
  • 测试,(这里没有直接enter跳过)
  • git 地址,(同样没有)
  • 关键词 (谁便写俩)
  • 作者 : 例如 lw
  • 开放协议,enter+yes,同意
    在这里插入图片描述
  1. 写初始文件 index.js
  • 创建components文件夹,包含两个vue组件:如lwButton.vue
    在这里插入图片描述
<template>
  <button>老王的按钮</button>
</template>

<script lang='ts'>
export default {
  name: "LwButton",
};
</script>
  • 把写的vue 文件引入暴露
import lwButton from "./components/lwButton.vue";
import lwSwiper from "./components/lwSwiper.vue";

// 放置到数组中
const components = [lwButton, lwSwiper];
export default {
  // 传入两个参数,app是实例,options是app.use(bao,options)的时候,传入的第二个值
  install: (app: any, options: any) => {
    components.forEach(item => {
      // 循环一个个导入组件
      app.component(item.name, item)
    });
  }
}

  1. 在官网https://www.npmjs.com/ 注册npm 账号 + 邮箱验证
  2. 解决git代理依赖
  3. 配置npm代理 npm config set proxy=http://127.0.0.1:8580
  4. npm login 进行登录
  • 登录的时候需要使用npm的本地镜像来登录 npm set registry https://registry.npmjs.org/
  • 使用nrm: nrm use npm
  1. npm publish 发布
  2. 更新发布,修改package.js 的 version 版本号,重新npm publish
  3. 从新复原npm config set proxy null
  4. npm config set https-proxy null,
  5. nrm use taobao

使用

  1. 像正常一样,npm i +包名
  2. 在main.ts 当中 .use();
  3. 在页面中可以使用组件了,
  • 名字就是export default {name: “LwButton”,}; 当中的name
  • 使用就是 或者
Logo

前往低代码交流专区

更多推荐