一,创建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提交,成功会收到邮件的
可以建立项目下载插 件测试了