VUE插件製作併發布到NPM

一，創建VUE項目（精簡版）

      vue init webpack-simple '插件名稱'

創建完畢後，創建插件，在SRC下建立lib 文件莢，在lib內建立index.js及index.vue,目錄結構如下圖

index.js源碼如下：

import aa from "./index.vue"
var o = {};
o.install = function(Vue,ops){
	Vue.component(aa.name,aa);
}
export default o 

index.vue源碼

<template>
	<div>
		this is plugin compontent name is aa
	</div>
</template>

<script>
	export default{
		name:"aa"
	}
</script>

<style>
</style>

二，更改webpack.config.js及package.json

webpack.config.js

 //entry: './src/main.js',更改入口爲插件的index.js,
 entry: './src/lib/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
//輸出文件的名稱，filename: 'glnewplugin.js'
    filename: 'glnewplugin.js'，
    library: 'glnewplugin',
	  libraryTarget: 'umd',
	  umdNamedDefine: true
  },

package.json

{
  "name": "glnewplugin",//項目名稱，不可與NPM其它包有重複，
  "description": "A Vue.js project",
  "version": "1.0.1",//版本號，每 次提交都要改變
  "author": "gaoliang19860117 <[email protected]>",
  "license": "MIT",
  "private": false,//此處改爲假，原來爲真，
	"main":"src/lib/index.js",//指向插件index.js
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.5.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

三：發送至NPM

npm login    登錄，如果沒能，需要註冊

npm publish提交，成功會收到郵件的

可以建立項目下載插 件測試了