1.vue init webpack-simple 项目名称
2.src 里面创建一个文件夹，命名为base
"base"下创建一个index.js文件作为入口文件
"base"下创建一个文件夹，放你写好的基础组件

image.png

3.index.js:

import checkinput from './checkinput/checkinput.vue'


const comment = {
    install: function(Vue) {
      Vue.component(checkinput.name, checkinput)
    }
  }
  // global 情况下 自动安装
  if (typeof window !== 'undefined' && window.Vue) {
      window.Vue.use(comment)
  }
  // 导出模块
  export default comment

4.webpack.config.js

entry: './src/base/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'checkinput.min.js', //你打包出来的名称，文件夹的名称
    library: 'checkinput',
    libraryTarget: 'umd'
  },

5. package.json

"private": false,
"main": "dist/checkinput.min.js", // 配置main结点，如果不配置，我们在其他项目中就不用import XX from '包名'来引用了，只能以包名作为起点来指定相对的路径

6.修改index.html

<script src="/dist/checkinput.min.js"></script>

7.上传到npm库之前，先本地测试一下能不能用
先打包 npm run build ,会生成一个dist的文件夹
npm pack 会生成.tgz文件

在一个vue项目中下载
终端上–npm install D:\Project\loading\loading-1.2.0.tgz(换成自己的路径)

然后在项目中引用，在main.js文件
跟Elementui一样
import 名称 from ‘组件库名’
如果有样式文件也是一样
import ‘组件库名/lib/css/…css’
Vue.use(名称)；

8. 因为要用dist文件夹，所以在.gitignore文件中把dist/去掉。
   9.npm publish
   ps:每次更新之前要更改package.json文件里的版本号，或者npm version patch 这是把版本迭代一级。如果改了组件的逻辑，要重新打包,npm run build，再上传

• 测试是否可用
  上传到npm库之后，登录到官网你看你上传得package
  可以自己在项目中测试能不能用：
  先下载 npm install ‘组件库名’
  下载成功后再main.js中引入
  跟Elementui一样
  import 名称 from ‘组件库名’
  如果有样式文件也是一样:
  import ‘组件库名/lib/css/…css’
  Vue.use(名称)；
  然后在任何组件都可以用了

上传npm库中可能会遇到的问题：

• 1.npm publish报错403：you must verify your email before publishing a new package:
  这是因为你注册账号的时候，没用邮箱激活，打开有点，点击链接激活就可以了。或者上官网，登录一些，会提示你没有进行邮箱激活，是否需要发送邮件激活的。
• 2.npm publish报错403：You do not have permission to publish “vue-drag-infinite”. Are you logged in as the correct user?
  这是因为你要发布的package的包名在npm库已经有人用过了，需要你换一个没有被注册过的名字。在package.json文件，把name属性的值换掉就行。