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或删除属性