一.创建组件并配置
1.通过vue脚手架的简易版vue init webpack-simple命令创建一个vue工程(前面的博客有)
2.写好自己的组件,并做好配置
项目结构如图:
1)说明:src下的index.js是项目的入口文件(改了配置文件);demo1文件夹表示一个组件的分类;demo1下的index.js是为了将index组件暴露出去;dist文件夹中的index.js是将要发布的js文件
2)配置:
*将webpack.config.js下module.export节点下的子节点替换为
entry: './src/index.js',//项目的入口
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',//路径
filename: 'index.js',//打包之后的名称
library: 'vue-week-date-picker', // 导入时的模块名
libraryTarget: 'umd', // 指定输出格式
umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
}
*src下的index.js编码为export {default} from './myPlugin/demo1/index.js';
*demo1下的index编码为export { default } from './index.vue'; //将组件暴露出去
*package.json下的对应内容替换为
"name": "vue-week-date-picker",
"description": "将默认时间的分钟设置为30分钟",
"version": "1.0.12",
"author": "Roriring",
"license": "MIT",
"private": false,
"main": "dist/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --hot --inline",
"build": "webpack --display-error-details --config webpack.config.js"
},
由于json中不能注释,下面单独说明:
name: 在npm中搜索的名称
version: npm当前发布的版本,每次发布都要改版本号
private: false将组件设置为共有才能发布
main: 项目的入口
3)将项目npm run build 编译生成dist目录
二.发布
1.进入npm官网https://www.npmjs.com/创建一个npm账号,一定要登录邮箱验证
2.cmd登录npm,由于我用的是idea,所以直接在在terminal下进行,如下图,如果当前登录的镜像是http://registry.cnpmjs.org(淘宝),将不能发布成功,请在cmd窗口npm config set registry=http://registry.npmjs.org
3.cmd命令进入当前项目所在目录,然后直接npm publish即可发布