「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」。
前言
大家好，我是专注于解决问题提升自己的小凌。在之前的工作中我搭建了一个前端框架，封装的很好用的也很顺手。很快老大要求我参与另外一个项目的框架设计。为了节约开发时间，老大建议我使用原来框架去实现主要的功能。想着需要把原来的框架的组件拷贝一遍去新的框架，就是一件重复的事情便想着在这一块做抽离。
我们可以跟elementUI一样去抽离出组件到NPM平台上就行了么？就叫XX公司UI框架。
获取NPM账号
账号注册
如果你没有账号可以到官方注册地址进行注册。
填入你的基本信息就可以向你的邮箱发送一条验证码信息。
登录平台后我们就能进到我们的主页啦。
本地登录
我们通过 npm login 命令进行本地登录。
注：第一次登录也需要向你的邮箱发送验证码进行验证
UI组件库设计
创建项目
创建vue项目的流程就不必再赘述，按流程下来就行了
vue create sk-faxian-ui
cd sk-faxian-ui
npm install
npm run serve
复制代码将多余的内容删除，再将我们的组件创建，我们这次先创建一个测试组件名为SkInput
SkInput.vue
<!--input组件-->
<template>
<div class="sk-input">input组件</div>
</template>
<script>
export default {
name: "SkInput",
props: {
coursewareList: {},
label: {
// 展示
type: String,
default: null,
},
},
data() {
return {};
},
methods: {},
};
</script>
<style scoped>
.sk-input {
}
</style>
复制代码在App.vue中引入我们就能调试啦。
App.vue
<!--html-->
<div id="app">
<SkInput />
</div>
// script
import SkInput from "@/components/SkInput/SkInput.vue";
复制代码配置并上传NPM
接下来就是将我们的组件进行导出了。
设定主入口main为src下的index.js
package.json
{
"version": "1.0.6",
"private": false,
"main": "src/index.js",
}
复制代码index.js
// 状态组件
let SkInput = () => import("./components/SkInput/SkInput.vue");
const components = [SkInput];
// 使用组件
const install = function (Vue, opts = {}) {
components.forEach((component) => {
Vue.component(component.name, component);
});
};
/* istanbul ignore if */
if (typeof window !== "undefined" && window.Vue) {
install(window.Vue);
}
// 也可以按需引入
export default {
version: "1.0.6",
SkInput,
install,
};
复制代码项目根目录下执行 npm publish
npm publish
复制代码上传成功后我们就可以在仓库中看到我们的项目了
常见错误
执行命令npm publish报错：
403 Forbidden - PUT registry.npmjs.org/sk-faxian-u… - You cannot publish over the previously published versions: 1.0.0.
不能在以前发布的版本上发布:1.0.0，所以我们需要升版本，更改包的package.json文件的版本号，然后重新发布
提交时候发现仓库是私有的
更改package.json的配置就行啦
NPM包引用
我们可以在需要引用的项目中将npm包下下来。
npm i sk-faxian-ui --save
复制代码main.js
// main.js
import SkFaxianUi from 'sk-faxian-ui';
Vue.use(SkFaxianUi);
复制代码App.vue
<template>
<div id="course-list">
<!-- UI外部组件 -->
<sk-input></sk-input>
</div>
</template>
复制代码我们在主应用中就可以直接看到我们的组件了。
最后要说的
我们今天的分享也到了尾声。纸上得来终觉浅，相信大家在实际运用中一定会有更深刻的见解。在后续使用的发现也会在这篇文章进行更新，欢迎大家收藏和关注。
以下是项目地址：项目地址