vue 封装npm公用组件

1.首先创建简介版vue项目 

vue init webpack-simple vplugin-enum-select

2.将组件代码安排上 

  vue 封装npm公用组件_第1张图片

  3.index.js文件内容

import enumSelect from './enum-select';

enumSelect.install = Vue => Vue.component(enumSelect.name, enumSelect);//注册组件

export default enumSelect;

4.修改webpack.config.js文件

修改以下内容,其余配置不变 

entry: process.env.NODE_ENV == 'development' ? './src/main.js' : './src/plugin/index.js',
output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'enum-select.js',
    library: 'enum-select',
    libraryTarget: 'umd',
    umdNamedDefine: true
}

5.运行查看效果

npm run dev

  vue 封装npm公用组件_第2张图片vue 封装npm公用组件_第3张图片

6.发布到npm

npm login
npm publish

发布时要记得将dist文件一同发布到npm上

取消发布

npm unpublish vplugin-pagination --force

 

你可能感兴趣的:(vue,javascript)