需求：将组件封装成类似于 element-ui 或者vant等组件库类型，发布到npm上，通过npm i 使用
步骤：
1、创建项目
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"
}
}
name 就是发布到npm上的包名，也就是安装时输入的名字， npm i name ，包名应该是英文单词全小写，或者是中划线分割（bei-fang）
version 是语义化的，major.minor.patch,如果major变动，通常意味着不兼容的修改，如果是minor，意味着添加向后兼容的新功能，如果是patch，意味着bug的修复，
description 是对包的描述，在npmjs.com上搜索时会显示，有助于用户在搜索时进行筛选
keywords 同样也是帮助用户查找你的包
4、封装组件
4.1：插件目录如下
4.2：fyChatToast.vue代码如下
<template>
<transition name="alert-fade">
<div id="toast"
v-show="visible"
class="dialog-tips dialog-center">
{{message}}
</div>
</transition>
</template>
<script>
export default {
data () {
return {
visible: false,
message: ''
}
}
}
</script>
<style lang="scss" scoped>
.alert-fade-enter-active,
.alert-fade-leave-active {
transition: opacity 0.3s;
}
.alert-fade-enter,
.alert-fade-leave-to {
opacity: 0;
}
.dialog-tips {
position: fixed;
z-index: 100;
min-width: 100px;
padding: 15px;
border-radius: 15px;
white-space: nowrap;
background-color: rgba(0,0,0,1);
box-shadow: 0px 8px 30px 0 rgba(0, 0, 0, 0.363);
text-align: center;
color: #fff;
font-size: 15px
}
.dialog-center {
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
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中引入
4.5:使用
5:、在examples 引入测试
在main.js中导入packages中的toast组件
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 即可使用
