Vue组件封装并使用NPM发布的教程

import UniSoftUI from 'unisoft-ui';
// 或者 const CustomUI = require('unisoft-ui');
// 或者 
Vue.use(UniSoftUI); 

// UniSwitch 是对应组件的名字，要记得在 moor-switch.vue 文件中还是 name 属性哦
import UniSwitch from './UniSwitch.vue';
UniSwitch.install = Vue => Vue.component(UniSwitch.name, UniSwitch);
export default UniSwitch;

import UniSwitch from './packages/switch/index';
import UniSlider from './packages/slider/index';
import UniNumberGrow from './packages/number-grow/index';
import './common/scss/reset.css'
// ...如果还有的话继续添加

const compOnents= [
 UniSwitch,
 UniSlider,
 UniNumberGrow
 // ...如果还有的话继续添加
]

const install = function (Vue, opts = {}) {
 components.map(compOnent=> {
 Vue.component(component.name, component);
 })
}

/* 支持使用标签的方式引入 */
if (typeof window !== 'undefined' && window.Vue) {
 install(window.Vue);
}

export default {
 install,
 UniSwitch,
 UniSlider,
 UniNumberGrow
 // ...如果还有的话继续添加
}

// ... 此处省略代码
const NODE_ENV = process.env.NODE_ENV
module.exports = {
 // 根据不同的执行环境配置不同的入口
 entry: NODE_ENV == 'development' &＃63; './src/main.js' : './src/index.js',
 output: {
 // 修改打包出口，在最外级目录打包出一个 index.js 文件，我们 import 默认会指向这个文件
 path: path.resolve(__dirname, './dist'),
 publicPath: '/dist/',
 filename: 'custom-ui.js',
 library: 'custom-ui', // 指定的就是你使用require时的模块名
 libraryTarget: 'umd', // libraryTarget会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的
 umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
 },
 // ... 此处省略代码
}

// 发布开源因此需要将这个字段改为 false
"private": false,
// 这个指 import custom-ui 的时候它会去检索的路径
"main": "dist/unisoft-ui.js",

import UniSoftUI from 'unisoft-ui'
Vue.use(UniSoftUI)