将组件发布到npm上

需求：将组件封装成类似于 element-ui 或者vant等组件库类型，发布到npm上，通过npm i 使用
步骤：
1、创建项目

image.png

2、整理项目目录
1：将src项目改成examples，(这样会导致项目跑不起来,原因是因为vue-cli3内置配置了自动回去找src文件夹)
解决办法：
在vue.config.js配置文件中，添加一下代码
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
// 修改 src 为 examples
pages: {
index: {
entry: "examples/main.js",
template: "public/index.html",
filename: "index.html"
}
},
// 组件样式内联
css: {
extract: false
},
// 扩展 webpack 配置，使 packages 加入编译
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('examples'))
.set('~', resolve('packages'))
config.module
.rule('eslint')
.exclude.add(path.resolve('lib'))
.end()
.exclude.add(path.resolve('examples/docs'))
.end()

config.module
  .rule('js')
  .include
  .add('/packages/')
  .end()
  .include.add(/examples/)
  .end()
  .use('babel')
  .loader('babel-loader')
  .tap(options => {
    // 修改它的选项...
    return options
  })

}
}
2：新建一个packages文件夹
如图所示：
3、配置package.json
主要是配置包导出入口main，还有打包到lib
代码如下：
{
"name": "@kenhaha/ktest",
"version": "0.1.4",
"main": "packages/index.js",
"scripts": {
"lib": "vue-cli-service build --target lib --name kui --dest lib packages/index.js",
"serve": "vue-cli-service serve --hot",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.3.2",
"vue": "^2.6.10",
"vue-router": "^3.1.3",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.0.0",
"@vue/cli-plugin-eslint": "^4.0.0",
"@vue/cli-plugin-router": "^4.0.0",
"@vue/cli-plugin-vuex": "^4.0.0",
"@vue/cli-service": "^4.0.0",
"babel-eslint": "^10.0.3",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"node-sass": "^4.12.0",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.10"
}
}

image.png

name 就是发布到npm上的包名，也就是安装时输入的名字， npm i name ，包名应该是英文单词全小写，或者是中划线分割（bei-fang）
version 是语义化的，major.minor.patch,如果major变动，通常意味着不兼容的修改，如果是minor，意味着添加向后兼容的新功能，如果是patch，意味着bug的修复，
description 是对包的描述，在npmjs.com上搜索时会显示，有助于用户在搜索时进行筛选
keywords 同样也是帮助用户查找你的包
4、封装组件
4.1：插件目录如下

image.png

4.2：fyChatToast.vue代码如下

4.3： index.js 代码如下
import fyChatToast from './src/fyChatToast.vue'
const toast = {}
toast.install = Vue => {
// 扩展 vue 插件
const ToastCon = Vue.extend(fyChatToast)
const ins = new ToastCon()
// 挂载 dom
ins.el)
// 给 vue 原型添加 toast 方法
Vue.prototype.$toast = (msg, duration = 3000) => {
// 我们调用的时候 赋值 message
// 将 visible 设置为 true
// 默认 3s 之后 设置 为 false 关闭 toast
ins.message = msg
ins.visible = true
setTimeout(() => {
ins.visible = false
}, duration)
}
}
export default toast

4.4：在main.js中引入

image.png

4.5:使用

image.png

5:、在examples 引入测试
在main.js中导入packages中的toast组件

image.png

6、注册npm账号（如果已经有了，可以跳过）
6.1： npm adduser
依次输入Username、Password、Email完成注册
输入password时，密码会隐藏，光标也不会随着输入改变位置，输入完成后直接回车即可、
6.2：npm login (登录)
提示：如果npm镜像是淘宝镜像或者其他的镜像，需要切换回npm

7、npm发布组件库
npm publish
项目中如果package.json配置了private：true会冲突，如果冲入了，删掉即可

8：在项目中使用 npm i name 即可使用