一、vue
1、初始化项目
vue create my-app
2、运行项目
npm run dev
3、在src目录下新增加components文件夹，存放需要发布的组件。
4、封装一个自动轮播滚动的ListScroll示例组件
<template> <div class="listScroll" ref="scrollWrapper"> <slot></slot> <slot></slot> </div></template><script>export default { name: "ListScroll", created() { }, props: { speed: { default: 1, type: Number }, isNextPage: { default: true, type: Boolean }, data: { default: () => [], type: Array } }, data() { return { height: 0, isScroll: true } }, watch: { // 监听数据变化后重新滚动 data: { immediate: true, deep: true, handler() { this.height = 0 } } }, mounted() { // 盒子高度小于可是高度时候滚动 if (this.boxHeight < this.ele0.clientHeight) { this.start(this.height) this.setEvent() } else { this.isScroll = false } }, computed: { // 第一个slot ele0() { return this.$refs.scrollWrapper.children[0] }, // 第二个slot ele1() { return this.$refs.scrollWrapper.children[1] }, // 容器高度 boxHeight() { return this.$refs.scrollWrapper.clientHeight } }, methods: { setEvent() { this.$refs.scrollWrapper.onmouseenter = () => { this.isScroll = false } this.$refs.scrollWrapper.onmouseleave = () => { this.isScroll = true this.$nextTick(() => { this.start(this.height) }) } }, //滚动方法 start(height) { this.ele0.style = `transform:translateY(-${height}px)` this.ele1.style = `height:${this.boxHeight}px;transform:translateY(-${height}px);overflow:hidden` if (height >= this.ele0.clientHeight) { this.height = 0 } else { this.height += this.speed } if (!this.isScroll) return window.requestAnimationFrame(() => { this.start(this.height) }) } },}</script><style>.listScroll { overflow: hidden}.hover { overflow-y: auto;}.hide { display: none;}</style>
5、在该组件下新建一个index.js文件
// ListScroll 是对应组件的名字，要记得在 moor-switch.vue 文件中还是 name 属性哦import ListScroll from './index.vue';ListScroll.install = Vue => Vue.component(ListScroll.name, ListScroll);export default ListScroll;
6、在components 目录下新建一个index.js文件，便于将所有的组件集中管理
import ListScroll from "./ListScroll/index.js";// ...如果还有的话继续添加const components = [ ListScroll, // ...如果还有的话继续添加];// 批量组件注册const install = function (Vue, opts = {}) { components.map((component) => { Vue.component(component.name, component); });};/* 支持使用标签的方式引入 */if (typeof window !== "undefined" && window.Vue) { install(window.Vue);}export default { install, ListScroll, // ...如果还有的话继续添加};
7、组件打包
到这里为止，我们的组件封建基本就完成了，当然组件封装成什么样得看自己得业务需求了，接下来我们就需要将组件进行打包了。
7.1、修改我们项目得package.json文件，配置打包命令：
"package": "vue-cli-service build --target lib ./src/components/index.js --name first-ui --dest first-ui"
命令解释：
- target lib 关键字，指定打包的目录
- name 打包后的文件名
- dest 打包后的文件夹名称
7.2、执行打包命令
npm run package
7.3、打包完成后悔出现一个first-ui文件夹，在该文件下，需要初始化一个package.json文件。执行命令
npm init -y
发布公共包的话需要在package.json文件添加
"publishConfig": { "access": "public", "registry": "https://registry.npmjs.org/" },
8、发布到npm仓库
8.1、注册账号
8.2、设置npm源
npm config set registry=https://registry.npmjs.org
8.3、在first-ui文件夹下执行命令
npm adduser
然后输入账号、密码、邮箱等
8.4、执行发布命令
npm publish
8.5、如果要发布私有包的话。需要登录到我们的私有仓库，发布包
切换npm源到我们私有的仓库地址
你可能会好奇，我切换了源之后，要装其他包怎么办，私有仓库又没有这些包！其实不是这样的，前面的verdaccio配置文件里有一个配置项，可以配置一个或多个其他的源。当我们私有仓库里找不到包时，会自动去配置的其他源里面找。推荐安装nrm，管理npm registry，
npm install -g nrm
// 添加自定义的源 源就是启动verdaccio时打印出来的地址
nrm add os-ui http://xxxx:8080/
// 查看所有可用的源
nrm ls
// 切换源到我们的私有仓库
nrm use os-ui
9、安装使用
