一、初始化项目:vue init webpack-simple "项目名"
删除src中除了main.js和app.vue外的文件,清空app.vue中无用内容-----在src文件夹下新建一个lib文件夹(包含插件名.vue和index.js)
1 .vue文件中写入插件内容逻辑

二、更改配置文件—index.js
import centriole from ‘./centriole.vue’
import panel from ‘./panel.vue’
import vie from ‘./vie.vue’

const Centriole = {
  install(Vue, options) {
    Vue.component(centriole.name, centriole)
		Vue.component(panel.name, panel)
		Vue.component(vie.name, vie)
  }
}
if (typeof window !== 'undefined' && window.Vue) {
  window.Centriole = Centriole
  Vue.use(Centriole)
}
export default Centriole

详解:
在这里插入图片描述

三.修改webpack.config.js部分配置
在这里插入图片描述
打包后的地址要和index.html中引入地址名称保持一致
在这里插入图片描述
四、修改package.json
在这里插入图片描述
填写你自己的github托管地址:
在这里插入图片描述
五、修改.gitignore去掉忽略dist(不然导入后会找不到发布的插件模块)
六、打包项目:npm run build
七、发布npm(首先需要在https://www.npmjs.com上注册一个用户,然后在本地添加用户,注册后进行邮箱验证)

相关命令:
npm adduser :添加用户
username:用户名
password:密码
email:邮箱
npm whoami :查看用户
npm login :登录账号
npm publish 发布

八、在所需插件项目中
引入:npm install ‘插件名’ --save
main.js中全局引入
在这里插入图片描述
具体页面中使用:标签名是根据插件vue.name而来
在这里插入图片描述
在这里插入图片描述

九、启动项目:npm run dev

注:修改 .gitignore 去掉忽略dist 这里注意 每次上到npm上需要更改版本号,不然也会错误
README.md文件:插件使用说明

Logo

前往低代码交流专区

更多推荐