我将以一个vue2.0的组件为例，为大家详细的讲述下组件创建以及发布的过程
准备工作
- 安装nodejs
- 全局安装vue脚手架
npm install -g vue-cli
创建一个vue项目
vue create vue-loading-icon
按照脚手架提示进行安装
显示如下信息即为安装成功
修改项目目录
在项目根目录下创建packages文件夹
将src文件夹改名为examples
修改vue.config.js文件，若根目录下没有此文件，请手动添加
const { defineConfig } = require('@vue/cli-service');
const path = require('path');
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = defineConfig({
transpileDependencies: true,
pages: {
index: {
entry: 'examples/main.js',
template: 'public/index.html',
fileName: 'index.html'
}
},
chainWebpack: config => {
config.module
.rule('js')
.include.add(resolve('packages')).end()
.use('babel').loader('babel-loader').tap(options=>{return options});
},
// css: { extract: false }
})
开始开发vue组件
在packages文件夹下写你想要开发的组件源码
我的packages的目录结构是这样的
LoadingA/main.vue如下：
<style scoped lang="less">
.loader01 {
box-sizing: border-box;
width: 56px;
height: 56px;
border: 8px solid var(--color);
border-right-color: transparent;
border-radius: 50%;
animation: loader-rotate 1s linear infinite;
}
.loader01::after {
content: "";
width: 8px;
height: 8px;
background: var(--color);
border-radius: 50%;
position: absolute;
top: -1px;
left: 33px;
}
@keyframes loader-rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
</style>
<template>
<div class="loader01" :style="pStyle"></div>
</template>
<script>
export default {
props: {
color: String,
speed: Number,
},
data() {
return {
pStyle: {
'--color': '#2595f1',
},
};
},
mounted() {
this.setStyle();
},
methods: {
setStyle() {
if (this.color) this.$set(this.pStyle, "--color", this.color);
},
},
};
</script>
LoadingA/index.js如下：将您的组件注册
import LoadingA from './src/main.vue';
DsTree.install = function(Vue) {
Vue.component(LoadingA.name,LoadingA);
}
export default LoadingA;
批量导出组件
packages/index.js如下：
import LoadingA from './LoadingA/index.js';
import LoadingB from './LoadingB/index.js';
let components = [
LoadingA,
LoadingB
]
const install = function (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,
LoadingA,
LoadingB
}
本地测试组件
接下来，就可以在本地进行组件的测试了，您可以在您的examples文件夹下，创建一个vue文件，然后引用此组件，进行组件的测试，我是在App.vue中引用了组件
App.vue内容如下：
<template>
<div id="app">
<div class="load-list">
<div class="load-box load01">
<div class="name">loading-A</div>
<div class="demo">
<loading-a/>
</div>
</div>
</div>
</div>
</template>
<script>
import LoadingA from '../packages/src/LoadingA.vue'
export default {
name: 'App',
components: {
LoadingA
}
}
</script>
<style>
*{
margin: 0;
padding: 0;
box-sizing: content-box;
}
.load-box{
width: 200px;
height: 132px;
border: solid 1px #cdcdcd;
}
.load-box .name{
width: 100%;
text-align: center;
border-bottom: solid 1px #cdcdcd;
height: 32px;
line-height: 32px;
flex-shrink: 0;
flex-flow: 0;
}
.load-box .demo{
height: 100px;
display: flex;
justify-content: space-around;
align-items: center;
}
</style>
打包编译
本地测试完成后，就可以进行打包编译了，请您在package.json文件中的script中增加一行代码
"build-lib": "vue-cli-service build --target lib --name load --dest lib packages/index.js"
执行编译命令
接下来，我们执行下编译命令
npm run build-lib
等待命令执行完成后，项目根目录下会生成一个lib的文件夹，生成文件结构如下：
如果您想生成内联样式，则需要在vue.config.js中增加
css: { extract: false }
还要在package.json中设置入口文件
"main": "lib/index.umd.min.js"
发布前的准备工作
首先，你需要确定你要发布的npm源
这块可以简单了解下nrm
什么事nrm呢，其实nrm 是一个 npm 源管理器，允许你快速地在 npm源间切换。
nrm安装
npm install -g nrm
查看源
nrm ls
使用源
nrm use XXX
之后你需要在项目根目录下创建一个.npmignore的文件
文件中写明你要忽略的文件，一般保留只需要保留README.md,lib和package.json即可，我的文件是这样写的
examples/
packages/
public/
node_nodules/
preview/
vue.config.js
postcss.config.js
babel.config.js
.gitignore
jsconfig.json
package-lock.json
*.map
另外，你需要将你项目的package.json文件中的 private设置为false
private:false
编写README.md文件，这里边的内容是其他人引用你的包的使用说明哦
登录到私服
npm login
根据命令提示，输入用户名，密码，以及绑定的邮箱
发布到私服
npm publish
稍等几秒钟后，您就可以到npm官网上搜索下您发布的包啦。
到这里，整个发布流程就差不多了，但是您还是需要在做下引用测试哦
引用测试
在项目中按照使用说明进行操作，安装依赖包,使用组件测试是否正常发布，并可用即可
本地调试npm包
在你的npm源码项目中，也就是vue-loading-icon这个项目根目录下执行
npm link
创建一个软链，相当于全局安装了一个 vue-loading-icon依赖
在测试项目根目录下，也就是 vue-comp-demo中执行
npm link vue-loading
执行上述操作后，在npm包中修改了内容，重新编译后，即可实时的反应到引用的项目下，无需发布到npm中，待调试完成后，就可以发不到npm上了
