创建并使用npm发布一个vue组件

一、创建vue组件

1、使用webpack-simple构建一个简洁项目，项目名称以arc-tabs为例。

vue init webpack-simple arc-tabs

2、删掉不需要的代码，在src目录下，新建lib文件夹，在lib下新建一个vue文件，用于编写组件模板和逻辑。vue文件的name一定要设置你想要的组件的名字，方便用于后面的导出。

3、在src同级目录下新建一个index.js，用作入口文件。

import arcTabs from './lib/index';
arcTabs.install = Vue=>Vue.component(arcTabs.name,arcTabs);
export default arcTabs;

4、修改webpack.config.js文件

//...省略代码
module.exports = {
  entry: './src/index.js',    //修改入口文件
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'arc-tabs-min.js',    //build后生成的文件
    libraryTarget:'umd',
    umdNamedDefine:true
  }
  //...省略代码
}

5、修改package.json文件

//...省略代码
"private": false,
"main": "dist/arc-tabs-min.js",
//...省略代码

二、测试

1、打包，打包后在dist文件中会生成webpack.config.js中配置的文件arc-tabs-min.js。

npm run build

2、压缩包，执行命令后在webpack.config.js的同级目录会产生一个压缩包

npm pack

3、本地新建一测试项目，并添加自己打包后的组件为依赖

npm install 本地压缩包绝对路径/压缩包名称

4、测试项目中引入并使用组件，若可以正常使用，则打包成功。

import arcTab from "arc-tabs"
Vue.use(arcTab)

三、发布到npm

1、根目录添加.npmignore文件，可以添加无需发布的文件目录（可省略，以下目录仅供参考，可根据自己的需求添加）

src/
node_modules/
.babelrc
.editorconfig
index.html
webpack.config.js

2、登录npm账号，根据提示输入用户名密码

npm login

3、发布，发布成功后，可以登录官网查看。

npm publish