将自定义的vue组件发布到npm

一.创建组件并配置

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即可发布