在npm上发布Vue组件库

---

前言

在日常些项目时用的都是别人写好的库，就没想过自己也发布一些实用的组件库吗

---

一、注册npm账号

二、创建开发环境

1、这里我用的时vue cli3

vue create mycomponent

2、项目生成后在根目录下创建package文件夹存放组件

目录结构如下图

3、添加配置文件vue.config.js

module.exports = {
    // 扩展 webpack 配置，使 packages 加入编译
    chainWebpack: config => {
        config.module
            .rule('js')
            .include
            .add('/packages')
            .end()
            .use('babel')
            .loader('babel-loader')
    }
}

4、编写组件

packages的出口文件

// 导入组件
import toTop from './toTop/index';

//需要在methods或者js中生成的dom元素
import Vue from 'vue'
import pop from './Popup/index';
Vue.prototype.$pop = pop;//挂载到全局Vue上，模仿el的this.$message


// 组件列表
const components = [
    toTop
]

// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，那么所有的组件都会被注册
const install =  (Vue) => {
    // 判断是否安装
    if (install.installed) return
    // 遍历注册全局组件
    components.map(component => Vue.component(component.name, component))
}

// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}

export default {
    // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
    install,
    // 以下是具体的组件列表
    toTop,
    pop
}

5、测试
在src下的main.js引入组件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import mycomponent from '../packages/index'
Vue.use(mycomponent)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

注意：在其他项目中以npm方式引入时，别忘了加上组件样式文件

import 'xxx/lib/lebao.css';//引入在node_modules/xxx/lib中的css文件
import mycomponent from 'xxx';
Vue.use(mycomponent)

6、测试成功配置package.json

  "name": "itcast21",//npm搜索是否重名
  "version": "0.0.5",//每次发布的时候记得更新版本
  "private": false,
  "main": "lib/lebao.umd.min.js",//打包后的入口文件
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name lebao --dest lib packages/index.js" //lib脚本说明：--target为编译文件输出目录；--name为文件名前缀；--dest lib为组件库代码入口文件；我们在命令行执行npm run lib编译脚本。
  },

7、添加.npmignore文件

.DS_Store
node_modules/
dist/
node_modules/.bin/
build/
config/
static/
.babelrc
.editorconfig
.gitignore
.npmignore
.postcssrc.js
index.html
package-lock.json
npm-debug.log*
yarn-debug.log*
yarn-error.log*

#Editordirectoriesandfiles
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
#忽略目录
src/
packages/
public/
#忽略指定文件
vue.config.js
babel.config.js
*.map

三、发布到npm

1、发布之前先在本地使用npm run lib 编译打包文件
2、登录npm login
3、发布npm publish