1、新创建一个空的项目,我创建了一个新的项目(common-package-ui)
2、在src下创建一个package文件夹用于存放自己的自定义组件,我创建了一个测试文件夹(test),下面创建了一个test.vue文件,文件内容如下:
注意: 自己封装的组件里面一定要有name属性,为后期install node包后 在页面使用的组件名
<template>
<div>
{{ test }}---{{ name }}
</div>
</template>
<script>
export default {
name: 'kun-kun-test',
data () {
return {
test: '123'
}
},
props: {
name: {
type: String,
default: ''
}
}
}
</script>
3、在package文件夹下创建一个index.js文件,内容如下:
// 引入封装好的组件
import testTemp from '../package/test/test.vue'
// 将来如果有其它组件,都可以写到这个数组里
const coms = [testTemp]
// 批量组件注册
const install = function (Vue) {
coms.forEach((com) => {
Vue.component(com.name, com)
})
}
// 这个方法以后再使用的时候可以被use调用
export default install
4、修改项目根目录下package.json,增加一句打包代码:
"package": "vue-cli-service build --target lib ./src/package/index.js --name kun-kun-test --dest kun-kun-test"
![](/i/l/?n=23&i=blog/827411/202212/827411-20221227170925131-111407355.png)
打包命令解释:
--target lib 关键字 指定打包的目录
--name 打包后的文件名字
--dest 打包后的文件夹的名称
然后执行打包命令:
npm run package
打包执行完成后我们项目目录下就会多出一个kun-kun-test文件夹,存放的是打包后的文件。
5、想要发布到npm仓库,我们还得在文件夹下初始化一个package.json文件。
在kun-kun-test目录下,执行命令:
npm init -y
会生成一个package.json的文件
注意: package.json文件中的name里面不能有大写!!!
6、发布到npm仓库
1)注册账号
想要发布到npm仓库,就必须要有一个账号,先去npm官网(https://www.npmjs.com/)注册一个账号,注意记住用户名、密码和邮箱,发布的时候会用到。
(2)设置npm源
有些小伙伴可能本地的npm镜像源采用的是淘宝镜像源或者其它的,如果想要发布npm包,我们得吧我们得npm源切换为官方得源,命令如下:
npm config set registry=https://registry.npmjs.org
(3)添加npm用户
进入thp-button-ui目录,添加npm用户,执行命令:
npm adduser
这里会让你填写用户名、密码、邮箱,然后会收到一封邮件,邮件里面有个类似于验证码的东西,如果之前设置过即可跳过此步。
(4)发布npm
在charttemp-ui目录下执行命令:
npm publish
如果发布失败可在百度搜索失败code码,一般都是名字重复或者名字不合格
7、使用
在另外一个项目中进行安装
npm install 插件名称(package.json中的名称)
然后在main.js引用注册,代码如下:
import kunTest from 'kun-kun-test'
Vue.use(kunTest)
新建一个空的vue文件使用此插件
<插件名称></插件名称>
测试成功,至此结束!
标签:npm,Vue,name,自定义,package,kun,组件,test From: https://www.cnblogs.com/niuniu0108/p/17008560.html