“This is the fifth day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

preface

Hello everyone, I am Xiao Ling who focuses on solving problems and improving himself. In my previous work, I built a front-end framework, which was easy to use and easy to package. Soon the boss asked me to participate in the framework design of another project. In order to save development time, the boss suggested that I use the original framework to implement the main features. I think I need to copy the components of the original frame to go to the new frame, which is a repetitive thing, and I want to pull it out in this area.

Can we pull components out of the NPM platform just like elementUI does? It is called XX company UI framework.

Obtain the NPM account

Account registration

If you don’t have an account, you can register at the official registration address.

Fill in your basic information to send a verification code message to your email address.

After logging in to the platform, we can go to our home page.

The local login

We login locally using the NPM login command.

Note: The first login also needs to send a verification code to your email for verification

UI component library design

Create a project

The process for creating a VUE project is unnecessary. Just follow the process

vue create sk-faxian-ui

cd sk-faxian-ui

npm install 

npm run serve
Copy the code

After removing the excess content, we will create our component. This time we will create a test component named SkInput

SkInput.vue

<! - input component - ><template>
  <div class="sk-input">Input component</div>
</template>
<script>
export default {
  name: "SkInput".props: {
    coursewareList: {},
    label: {
      / / display
      type: String.default: null,}},data() {
    return {};
  },
  methods: {}};</script>
<style scoped>
.sk-input {
}
</style>
Copy the code

We can debug it by introducing it in app.vue.

App.vue

<! --html-->
  <div id="app">
    <SkInput />
  </div>
  
// script
import SkInput from "@/components/SkInput/SkInput.vue";
Copy the code

Configure and upload NPM

The next step is to export our component.

Set the main entry to index.js under SRC

package.json

{
  "version": "1.0.6"."private": false."main": "src/index.js",}Copy the code

index.js

// State component
let SkInput = () = > import("./components/SkInput/SkInput.vue");
const components = [SkInput];
// Use the component
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);
}
// Can also be imported on demand
export default {
  version: "1.0.6",
  SkInput,
  install,
};
Copy the code

NPM publish at the project root

npm publish
Copy the code

After the upload is successful, we can see our project in the warehouse

Common mistakes

NPM publish error:

403 Forbidden – PUT registry.npmjs.org/sk-faxian-u… – You cannot publish over the previously published versions: 1.0.0.

Cannot be released over previous releases :1.0.0, so we need to upgrade, change the version number of the package.json file for the package, and then re-release

The repository was found to be private at commit time

Just change the configuration of package.json

NPM package reference

We can drop the NPM package in the project we need to reference.

npm i sk-faxian-ui --save
Copy the code

main.js

// main.js
import SkFaxianUi from 'sk-faxian-ui';
Vue.use(SkFaxianUi);
Copy the code

App.vue

<template>
  <div id="course-list">
     <! -- UI external components -->
     <sk-input></sk-input>
    </div>
</template>
Copy the code

We can see our components directly in the main application.

Last word

And that brings us to the end of today’s sharing. On paper come zhongjue shallow, I believe you will have more profound insights in practical use. In the future use of the findings will be updated in this article, welcome everyone to collect and pay attention to.

The following is the project address: Project address