前言
最近封装一个vue组件,手把手从0开始,最后发布到npm中。 插件如下 : npm地址链接
功能效果如下:(左右联动菜单)
- 你可以选择直接修改我的代码进行打包发布。git地址
1. 安装vue脚手架
- 选择最基础的即可
vue create lm-menu-scroll
2. 整理文件代码
- 删除src文件, 新增packages文件,同时建议把eslint关闭(vue.config.js中增加 lintOnSave: false,
) - 完整结构如下
├── packages
│ ├── index.js # 入口文件
│ ├── components # 组件
│ │ ├── index.vue # 本文需要封装的组件
├── README.md
├── package-lock.json
├── package.json
└──vue.config.js # webpack配置
2.1 入口文件
// pageges/index.js
import lmMenuScroll from './components/index.vue'
lmMenuScroll.install = Vue => Vue.component(lmMenuScroll.name, lmMenuScroll)
export default lmMenuScroll;
2.2 package.json
{
"name": "lm-menu-scroll",
"version": "1.0.0",
"description": "基于 Vue 的左右菜单联动组件",
"main": "dist/lm-menu-scroll.umd.min.js",
"keyword": "vue menu-scroll",
"private": false,
"files": [
"dist"
],
"license": "MIT",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"lib": "vue-cli-service build --target lib --name lm-menu-scroll --dest dist packages/index.js"
},
"dependencies": {
"core-js": "^3.6.5",
"lodash": "^4.17.21",
"vue": "^2.6.11"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^6.2.2",
"less": "^3.0.4",
"less-loader": "^5.0.0",
"lodash": "^4.17.21",
"vue-template-compiler": "^2.6.11"
}
}
注意以下内容的修改
- name - 包名(包名应该是kebab-case, 即英文单词全小写或者中划线分割)
- version - 包的版本号(第一版建议1.0.0,具体命名规则看这里)
- description - 包的描述。在npmjs.com上搜索时会显示,有助于用户在搜索时进行筛选)
- main - 该字段指定了程序的主入口文件(最好写dist文件夹内已经压缩后的文件)
- keywords - 关键字(在npm网站上搜索你这个npm包的关键词)
- author - 包的作者。格式一般是name <你的邮箱>,一般来说,用vue/react脚手架创建项目的时候会默认这个格式写法, 当然也可以是一个github地址,也可以自定义,但就不那么标准了
- license - 版权许可证,MIT还是ISC,或者其他都可以,只是我看很多包都是MIT
- files - 默认打包地方
加上打包命令
// package.json
加上打包指令:在script中加入这一行
"lib": "vue-cli-service build --target lib --name lm-menu-scroll --dest dist packages/index.js"
下面介绍下命令中的几个部分。
–target lib:target有好几个选项。这里是打包成一个库(lib),发布插件的话,一般就是lib。
–name lm-menu-scroll: 打包生成的文件名。
–dest dist :打包生成的目录名称。这里是lib,默认为dist
packages/index.js:打包的入口文件。
vue.config.js 中需要特别安装的依赖
module.exports = {
lintOnSave: false,
configureWebpack:{
externals: {
vue: 'Vue',
}
}
}
打包
npm run lib
npm pack // 本地生成一个tgz包,用于本地测试。 直接npm i 包即可。 测试成功后方可上传npm,否则会出现安装包错误问题。
上线npm
1. npm先注册一下
2. npm login // 登陆npm
// 然后输入你的账号、密码、邮箱(邮箱需要验证)
// 当你在控制台看到 Logged in as <Username> on https://registry.npmjs.org 说明登陆成功
// 如果你保证是最新版本且已经打包过,则跳过npm run lib 这一步
3. npm run lib
4. npm publish // 发布你的包(邮箱提示发布成功 ,那就发布成功了)
版本更新
- 修改package.json中的版本号。
- 重新上线操作