Create a Vue3.0 project

We use vue-CLI to create a new Vue project and name it like-UI.

npm install -g @vue/cli
vue create like-ui
Copy the code

The basic configuration options for the project are as follows: Babel, CSS preprocessor, ESLint. Vue version 3.0

When choosing the CSS preprocessor version, I chose SCSS (Dart-Sass) because Node-Sass is surprisingly hard to install, as anyone who has experienced it knows.

Finally, this is all of my selected configurations.

Write a component

You can see that the project already has a HelloWorld component under the SRC/Components folder. Let’s change the directory structure. Move the HelloWorld component into the newly created Li-Hello-world folder and rename it index.vue.

Then write another component, create a new folder li-button, create index.vue, and simply write a button component.

<template>
  <div>
    <slot/>
  </div>
</template>

<style scoped>
  div {
    width: 150px;
    height: 40px;
    line-height: 40px;
    border: 2px solid # 999;
    text-align: center;
    color: #fff;
    font-weight: bold;
    background: blue;
  }
</style>
Copy the code

At this point, we have two components.

Note: To remove the name attribute from the HelloWorld component, we will use the li-xxx folder name for the component. Use the component name instead of the folder name when importing components.

Component installation entry file

Create the index.js file under SRC/Components

import liButton from './li-button/index.vue';
import liHelloWorld from './li-hello-world/index.vue';

const components = {
  liButton,
  liHelloWorld,
};

function install(Vue) {
  const keys = Object.keys(components);
  keys.forEach((name) = > {
    const component = components[name];
    Vue.component(component.name || name, component);
  });
}

export default{ install, ... components, };Copy the code

All subsequent additions will be imported into index.js

The test component

Next, test our two components to see if they work

Import components in SRC /main.js

import { createApp } from 'vue';
import App from './App.vue';

import likeUI from './components/index';

createApp(App).use(likeUI).mount('#app');
Copy the code

After introduction, use it in app. vue

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <liHelloWorld msg="Hello, Oufuchus." />
  <li-button>Click on me. - Ofuchus</li-button>
</template>
Copy the code

Then, run the project

npm run serve
Copy the code

The page is displayed and the component is displayed normally

Packaging releases

Packaged component library

Next, package your written components and publish them to NPM for others to use

Add build:like-ui to package.json file script to package our component library

{
  "name": "like-ui"."version": "0.1.0 from"."private": false."main": "lib/like-ui.umd.min.js"."scripts": {
    "serve": "vue-cli-service serve"."build": "vue-cli-service build"."lint": "vue-cli-service lint"."build:like-ui": "vue-cli-service build --target lib --dest lib src/components/index.js"},... }Copy the code
  • Set private to false, otherwise you cannot publish to NPM
  • Change name to the name of our component library
  • Version indicates the version of the component library, which must be updated each time the package is released
  • To increase the main forlib/like-ui.umd.min.js, our component library packaged entry file.
  • Build: like – UI in the command
    • — Target allows any component in a project to be built as a library or Web component.
    • –dest Packaged output folder
    • Finally, the entry file for our component librarysrc/components/index.js

After the configuration is complete, pack the package

npm run build:like-ui
Copy the code

Once packed successfully

Published to the NPM

Log in to NPM and enter your account password

npm login
Copy the code

release

npm publish
Copy the code

You can check it out at www.npmjs.com/

Use it in real projects

Installing component libraries

npm install like-ui
Copy the code

Introduce the use of main.js

import { createApp } from 'vue'
import App from './App.vue'

import likeUI from 'like-ui'
import 'like-ui/lib/like-ui.css'

createApp(App).use(likeUI).mount('#app')
Copy the code

App.vue

<template>
  <li-button>like UI</li-button>
  <li-hello-world msg="hello like UI"></li-hello-world>
</template>
Copy the code

The last

Fellow students, give a like, comment, follow.

Get source code: click me click me, reply like- UI