目录
- 使用vue cli创建一个项目
- 编写插件
- 使用vue cli打包
- 发布准备
* 编写package.json
* 登录npm账户
* 作用域发布公有包- 注意事项
- 参考资源
使用vue cli创建一个项目
在安装了vue cli的前提下，通过如下命令初始化一个项目
vue create hello-world
编写插件
编写vue插件，按照vue文档要求的规范，入口文件应该暴露一个包含install方法的对象
import preview from '../src/components/preview'
let pdfPreview = {}
pdfPreview.install = function(Vue){
Vue.component(preview.name, preview)
}
export default pdfPreview
使用vue cli打包
使用下面命令进行打包
vue-cli-service build --target lib --name myLib [entry]
发布准备
编写package.json
下面是一个例子
{
"name": "@lichunshan/pdf-preview",
"version": "1.0.4",
"private": false,
"description": "pdfjs-dist based mobile pdf preview component",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"build:lib": "vue-cli-service build --target lib --name pdf-preview lib/index.js"
},
"author": "lichunshan",
"main": "dist/pdf-preview.common.js",
"files": [
"dist/*",
"src/*",
"public/*",
"*.json",
"*.js"
],
"dependencies": {
"core-js": "^3.6.4",
"pdfjs-dist": "^2.2.228",
"vue": "^2.6.11"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.2.0",
"@vue/cli-plugin-eslint": "^4.2.0",
"@vue/cli-service": "^4.2.0",
"babel-eslint": "^10.0.3",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.1.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions"
],
"keywords": [
"vue",
"component",
"pdf",
"pdfjs-dist"
],
"license": "MIT",
"homepage": "https://github.com/lichunshan/pdf-preview"
}
登录npm账户
运行 npm login输入用户名和密码
作用域发布公有包
运行 npm publish --access=public，因为作用域包一般都是私有的发布都是需求收费的，但是我们可以选择公开的发布方式，将access参数指定为public
注意事项
- 每次构建都要修改package.json中的版本号，否则发布失败
- 构建要选择lib模式，不要选择wc，后者无法通过Vue.use的方式使用插件，而只能在保证全局Vue可用的条件下引入文件使用
最后，附上本项目地址移动端vue pdf预览组件