vue封装自定义组件,打包发布到npm上使用
vue封装自定义组件,打包发布到npm上使用;1.在项目的src目录下新建一个目录(components)用来存放所有自定义组件源码2.组件封装好后在sr下新建一个index.js文件,为组件库的入口文件......7.发布npm...
·
1.在项目的src目录下新建一个目录(components)用来存放所有自定义组件源码
2.组件封装好后在sr下新建一个index.js文件,为组件库的入口文件
// 导入封装的组件
import xxBtn from './xx-btn.vue'
const components = {
// 通过install来安装组件
install(Vue) {
Vue.component(
'xxBtn', xxBtn
)
}
}
// 注意这里的判断,很重要
if(typeof windwo !== 'undefined' && window.Vue) {
window.Vue.use(comment)
}
// 导出组件库
export default components
3.修改package.json文件
{
"name": "xx", // 发布的模块名称,发布线上后,可以通过npm install xx来引用该模块,一般Vue组件以vue-开头
"description": "test npm", // 组件库描述
"version": "1.0.0", // 版本号
"author": "xxx", // 作者
"license": "MIT", // 代码授权许可
"private": false, // 公开项目,因为组件包是公用的,所以private要改为false
"scripts": { // 运行命令
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"main": "dist/xx-btn.min.js", // 打包后的入口文件,若不配置,则在其他项目中就无法使用import xx from '包名'来引入组件,只能以包名作为起点来指定相对路径
"keywords": [ // 关键词,可以通过npm搜索你填写的关键词找到你的模块
"xx-btn",
"components"
],
"files": [ // 指定打包后发布到npm的文件,没指定则不传,package.json是默认上传的
"dist",
"src/components"
],
"homepage": "https://xx.github.io/xx/xx-btn/dist/index.html", // 项目官网的url
"bugs": { // 填写一个bug提交地址或者一个邮箱,被你的模块坑到的人可以通过这里吐槽
"url": "https://github.com/xx/xx-btn/issues"
},
"repository": { // 指定代码所在的仓库地址
"type": "git",
"url": "https://github.com/xx/xx-btn.git"
},
...
}
4.编译打包,生成的文件在dist目录下
npm run build
5.测试插件
npm pack
npm pack 之后,会在当前目录下生成一个 xx-1.0.0.tgz 的文件。
打开一个vue项目,将压缩文件放到项目某个目录下,执行命令
npm install 路径\xx-1.0.0.tgz
路径是指压缩包所在的绝对路径,文件名必须是压缩包的全名
6.安装好插件后,在项目的入口文件main.js里引入使用
import xxBtn from 'xx-btn'
Vue.use(xxBtn)
之后就可以在项目的任意组件中引用就行了,如果引入成功,则说明打包成功,接下来就是发布到npm上了
7.发布npm
1、先到NPM官网注册账号,如果已有账号则跳过此步骤
2、在组件库项目的根目录下执行
npm login
登陆账号,输入你的账号和密码,并验证邮箱地址,登陆成功后则可以发布到NPM网站了
3、更新版本号
npm version patch
这是把版本迭代一级,每次更新时都需要输入这个命令,或者直接在package.json中修改版本号,只要与npm上的版本不同就行
4、发布到npm官网
npm publish --access public
出现如下,表是安装成功,去npm官网就能看的自己发布的相关信息
更多推荐
已为社区贡献1条内容
所有评论(0)