目錄
- 使用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預覽組件