发布组件到npm

1.环境准备,需要装好node,注册号npm账号,这里不做详解

2.创建编写组件和方法的文件夹package

3.在文件夹中创建需要定义的组件,并且加上name属性

javascript 复制代码
//组件
<template>
    <div>
        <button>按钮组件</button>
    </div>
</template>
<script>
export default {
    name: 'ComButton'
}
</script>
//====================================分割线============================================
//方法utils
const  func1=()=>{
   return 'test1';
}
const func2=()=>{
    return 'test2';
}
export default{
    func1,func2
}

4.然后在package文件中新建index.js引入写好的组件和方法

javascript 复制代码
//提一下批量引入的方法,如果是vuecli则使用require.context(),vite使用import mate golb()
import ComBotton from './com-button/index'
import publicFunc from './public-func/index'
 const coms=[ComBotton]

 const install = function (Vue) {
    coms.forEach((com) => {
      Vue.component(com.name, com);
    });
  };
  
  export default { install, publicFunc }

5.引入完成之后一定要先本地测试一下是否可用,如果可用再进行上传

javascript 复制代码
//在main.js中引入
import com from './package/index'
Vue.prototype.$public=com.publicFunc
Vue.use(com)

//在vue模块使用
<template>
  <div id="app">
    <ComButton></ComButton>
  </div>
</template>
<script>
export default {
  mounted() {
    console.log(this.$public.func1());
  }
}
</script>

6.验证可用之后,开始配置package.json进行自动化打包

javascript 复制代码
//如果是vuecli2
"package": "vue-cli-service build --target lib ./src/package/index.js --name zqcom --dest zqcom"
//如果采用vuecli3 提供了新方法
"lib": "vue-cli-service build --target lib --name tag-textarea --dest lib packages/index.js" 

7.执行npm run package进行打包

8.打包完成之后会生成一个zqcom文件,这就是需要上传的npm包了,然后在"包的文件里执行npm init -y"进行包配置,这里主要配置包名称,和版本号

9.下面就是进行发包了,因为本地可能安装了淘宝镜像,所以先把镜像切换回来

javascript 复制代码
npm config set registry=https://registry.npmjs.org

10.登陆npm账号

javascript 复制代码
npm adduser
//后面按步骤操作即可
登陆成功之后
npm publish //推送包到npm成功之后登陆npm搜索查看如下图,这一步出问题看下面的补充说明

11.下面就可以在项目中正常使用了

javascript 复制代码
//在main.js中引入组件和方法
import  zqcom  from 'zqcom'
Vue.prototype.$Public=zqcom.publicFunc
Vue.use(zqcom)
//正常使用
<template>
  <div id="app">
    <ComButton></ComButton>
  </div>
</template>
<script>
export default {
  mounted() {
    console.log(this.$Public.func1());
  }
}
</script>

12.补充说明

javascript 复制代码
如果出现报错情况
 Remove the 'private' field from the package.json to publish it.
 查看打包之前的文件的package.json中的private是否设置成了false,一般是这里为true造成的,可以改成false或删除属性

点关注不迷路,感谢支持!

相关推荐
Yaml42 分钟前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事3 分钟前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶4 分钟前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo5 分钟前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v8 分钟前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫8 分钟前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.14 分钟前
Chrome调试工具(查看CSS属性)
前端·chrome
栈老师不回家1 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙1 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠1 小时前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript