前端搭建自己的组件库并发布npm(完整流程)
上传第一步:用脚手架搭建一个新项目vue create 项目名称第二步:src同级目录下创建一个packages文件夹并在里面新建两个文件Button.vue<template><button class="MyButton">我是一个按钮组件</button></template><script>export default {name
·
上传
第一步:用脚手架搭建一个新项目
vue create 项目名称
第二步:src同级目录下创建一个packages文件夹并在里面新建两个文件
- Button.vue
<template>
<button class="MyButton">
我是一个按钮组件
</button>
</template>
<script>
export default {
name: 'MyButton',
data () {
return {}
},
methods: {},
filters: {},
created () {}
}
</script>
<style>
.MyButton {
color: red;
}
</style>
- index.js
import ZsButton from './Button.vue'
const components = [
ZsButton
]
// 定义 install 方法,接收 Vue 作为参数。如果使用 use 注册插件,则所有的组件都将被注册
const install = function (Vue) {
// 遍历注册全局组件
components.forEach(component => {
Vue.component(component.name, component)
})
// 判断是否是直接引入文件,如果是,就不用调用 Vue.use()
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
}
// 导出的对象必须具有 install,才能被 Vue.use() 方法安装
export default {
install
}
第三步:修改package.json
第四步:在src同级目录下创建.npmignore文件,类似git的.gitignore文件,用于忽略打包文件的
# 忽略目录
examples/
packages/
public/
# 忽略指定文件
vue.config.js
babel.config.js
*.map
第五步:项目下控制台敲命令 npm login 然后输入账号密码登录
第六步:在控制台执行 npm run lib 打包命令并生成dist文件
第八步:在控制台执行 npm publish 上传命令
注意::在执行这一步之前一定要要确保以下两点
- 保证你的npm仓库已经验证了邮箱,邮箱验证时注意只能在电脑上登录邮箱验证,无法在手机上验证。
- 你的包名,也就是package.json里的name属性,没有重复,可以用npm i …下载一下看能否下载成功,如果没有再用。
附完整目录
--------到此就上传成功
使用
第一步:npm或者yarn下载包并引入
import Vue from 'Vue'
import MyComponent from 'zhaishuai-ui'
Vue.use(MyComponent)
第二步:项目里里正常使用
<template>
<MyButton />
</template>
更多推荐
已为社区贡献3条内容
所有评论(0)