The opening

The west wind blows the old dongting wave, xiang jun white hair more overnight. Drunk after I do not know the day in the water, full boat clear dream pressure star river.

preface

As a developer, I don’t have my own bag yet, so I always feel like I’m missing something. My girlfriend and bag account for at least the same. It is just as unpleasant as a soldier who goes to war without a gun or eating without chopsticks. At the same time, interviewers often ask a tough question: Do you have an open source project? Have you written your own UI components? As lightning strikes, always feel shorter than others, so today tohekr-uiFor example, how to create your own UI library

The document address
Program source code

The selection

Our goal is to build a UE based UI framework based on Element-UI

The document is chosenVuepressBuild, simple and convenient
Package selectiongitlab CIThis article totravisAs an example
Initialization takesVue cli - 3.0,pugandsassDependencies and plug-ins (explore on your own)

purpose

Quick builds are ❤️’s ownnpmlibrary
Familiar with the package 📦 command and its syntax
Good command of automated 👷 builds
Contribute your footprint to the community 👣

Basically,

Start a project

1. Initialize a project

The Vue CLI is recommended for quick builds

vue create hekr-ui
Copy the code

Let’s just go with the default configuration

2. Associate code with your library

Git does a great job of managing code versions

When you initialize the library

echo "# hekr-ui" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/xkloveme/hekr-ui.git
git push -u origin master
Copy the code

When associating a local library

git remote add origin https://github.com/xkloveme/hekr-ui.git
git push -u origin master
Copy the code

Of course we choose the second option. Remember to ignore node_modules

Configure your project

1. Add dependencies

This article focuses on YARN, of course NPM is also 👌OK

We document primarily with VuePress, which is optional, but if you just want to ship a package, you can skip this step and the necessary demos and tests will come in handy

Install VuePress as a local dependency
yarn add -D vuepress NPM install -d vuepress

Create a new docs folder
mkdir docs

Create a new markDown file
echo '# Hello VuePress! ' > docs/README.md

# Start writing
npx vuepress dev docs
Copy the code

Next, add some scripts to package.json:

{
  "scripts": {
    "docs:dev": "vuepress dev docs"."docs:build": "vuepress build docs"}}Copy the code

Then you can start writing:

yarn docs:dev NPM run docs:dev
Copy the code

To generate a static HTML file, run:

yarn docs:build NPM run docs:build
Copy the code

Add other dependencies, common syntax

// Install the specified package yarn add *** // install all packages, note the difference with NPM YARNCopy the code

Notice the difference between ⚠️ dependencies and devDependencies

--saveAdd the dependency’s name, version requirements todependencies
--save-devAdd the dependency’s name, version requirements todevDependencies

2. Some conventional directory structures

In the use ofvuepressDuring development, some directory structures are agreed upon

. ├ ─ ─ docs │ ├ ─ ─ the vuepress (optional) │ │ ├ ─ ─ components (optional) │ │ ├ ─ ─ the theme (optional) │ │ │ └ ─ ─ Layout. The vue │ │ ├ ─ ─ public (optional) │ │ ├ ─ ─ styles (optional) │ │ │ ├ ─ ─ but styl │ │ │ └ ─ ─ the palette. Styl │ │ ├ ─ ─ templates (optional, Careful configuration) │ │ │ ├ ─ ─ dev. HTML │ │ │ └ ─ ─ SSR. HTML │ │ ├ ─ ─ the config, js (optional) │ │ └ ─ ─ enhanceApp. Js (optional) │ │ │ ├ ─ ─ the README. │ md ├ ─ ─ guide │ │ └ ─ ─ the README. Md │ └ ─ ─ config. The md │ └ ─ ─ package. The jsonCopy the code

The directory structure in this project is

Template ├ ─ docs │ └ ─. # vuepress configuration, presentation components, static resource │ │ ├ ─ compnents # demonstrate component │ │ | └ ─ demo # demo component │ │ ├ ─ public # static resource │ │ | └ ─ images # image file │ │ | └ ─ SCSS # style file │ │ ├ ─ config. Js # config file │ │ └ ─ enhanceApp # introduction file | ├ ─ compnent # component md file | └ ─ ├─ ├─ public ├─ download.json # ├─ public ├─ download.txt # ├─ public ├─ download.txtCopy the code

3. Modify yours`package.json`file

This document is the soul of the project 👻 and is one of the most important. For details, see Packagejson

Modifying the main entrancemain

The main field specifies the entry file to load, which requires (‘moduleName’) will load. The default value for this field is index.js under the module root.

"main": "dist/hekr-ui.umd.min.js"
Copy the code

You can build a single entry into a library by using the following command

vue-cli-service build --target lib --name myLib [entry]
Copy the code

The running results are as follows:

File Size Gzipped dist/hk-ui.umd.min.js 13.64kib 5.31 KiB dist/hk-ui.umd.js 43.87 KiB 11.37 KiB dist/hk-ui.mon.js Dist/HK-UI. CSS 0.54KIb 0.29kibCopy the code

addlibThe command

    "lib": "vue-cli-service build --target lib --name hk-ui --dest dist ./src/packages/index.js"
Copy the code

This entry can be a.js or a.vue file. If no entry is specified, SRC/app.vue is used.

Building a library outputs:

Dist/mylib.common.js: a CommonJS package for packers (unfortunately, Webpack doesn’t currently support ES Modules output)
Dist/mylib.umd. js: a UMD package for use directly by browsers or AMD loaders
Dist/mylib.umd.min.js: compressed UMD build
Dist/mylib.css: Extracted CSS file (you can force inlining by setting CSS: {extract: false} in vue.config.js)

4. Document configuration

After the project starts, we need to configure our Vuepress

/* * @describe: configuration file config. Js * @author: superDragon * @date: 2019-10-09 23:25:49 * @lasteditors: superDragon * @LastEditTime: 2019-10-10 18:49:25 */
let component = [
  'hk-button'.'hk-card'
]
module.exports = {
  base: '/hekr-ui/'.title: 'hekr-ui'.description: 'hekr-ui'.themeConfig: {
    nav: [{text: 'home'.link: '/' },
      {
        text: 'components'.link: '/component/hk-button'}].sidebar: {
      '/component/': component
    },
    lastUpdated: 'Last Update'.repo: ' '.repoLabel: 'GitLab'
  },
  plugins: [].serviceWorker: true
}
Copy the code

When we can successfully run the following

    "docs:dev": "vuepress dev docs"."docs:build": "vuepress build docs".Copy the code

Run locally

Or: NPM run docs:dev
packaging

Yarn docs:build # or NPM run docs:build

5. Continuous integration

Take GitHub Pages and Travis CI for example

Pack and place in the projectdocsIn the directorydistIn, pay attention to ⚠️ distinction;
The default build output location is used;
VuePress is installed in your project as a local dependency with NPM scripts configured as follows:

{
  "scripts": {
    "docs:build": "vuepress build docs"}}Copy the code

Set the correct base in docs/.vuepress/config.js here we set /hekr-ui/ 🌿.

If you want to post to https://

.github. IO /, you can skip this step, because base is “/” by default.

If you plan to post to https://

.github. IO /

/ (that is, your repository is at https://github.com/

/

), set base to “/

/”.
In your project, create the following.travis. Yml file 📃:

language: node_js
node_js:
  - '8'

install:
  - npm install

script:
  - npm run build

after_success:
  - cd ./docs/.vuepress/dist
  - git init
  - git config --global user.name "${U_NAME}"
  - git config --global user.email "${U_EMAIL}"
  - git add .
  - git commit -m "👷‍Automatically Update from Travis -ci 👷‍"
  - git push --quiet --force  "https://${GH_TOKEN}@${GH_REF}" master:${P_BRANCH}

branches:
  only:
    - master

notifications:
  email:
    - [email protected]
  on_failure: always

# Note: you should set Environment Variables here or 'Settings' on travis-ci.org
env:
  global:
    # I added it to the Travis -ci environment variable
    - U_NAME: xkloveme
    - U_EMAIL: [email protected]
    - P_BRANCH: gh-pages
    - GH_REF: github.com/xkloveme/vue-v-xxx.git
Copy the code

registeredgithub,travisAnd the configurationtravisRelated, enable build, ownGoogleportal
For more configurations, see VuePress deployment

practice

Complete and package components

To prepare the HK-button component as an example, and export

Add components and export

<template lang="pug"> el-tooltip(effect="dark" v-if="tips" :content="tips" placement="top-start") el-button.hk-button(:size="size" :type="type" v-bind="$attrs" @click="handleClick") slot el-button.hk-button(:size="size" v-else :type="type" v-bind="$attrs" @click="handleClick") slot </template> <script> import { Debounce } from './.. /util/debounce' export default { name: 'hk-button', props: { type: { type: String, default: 'primary' }, size: { type: String, default: 'medium' }, tips: { type: String, default: null } }, methods: { handleClick: Debounce(function (e) { this.$emit('click', e) }, 200) } } </script> <style lang="scss"> .hk-button { i + span { padding-left: 10px; } } </style>Copy the code

Export components

import HkButton from './hk-button'

export default HkButton
Copy the code

Export toinstall

Install * @author: superDragon * @date: 2019-10-09 23:21:11 * @lasteditors: superDragon * @LastEditTime: 2019-10-10 19:09:57 */
import HkButton from './hk-button'
import HKcard from './hk-card'

const install = Vue= > {
  Vue.component(HkButton.name, HkButton)
  Vue.component(HKcard.name, HKcard)
}

if (typeof window! = ='undefined' && window.Vue) {
  install(window.Vue)
}

export {
  HkButton,
  HKcard
}

export default { install }

Copy the code

Upload your own`npm`

Sign up at ®️ and switch to official`npm`The source

The sign-in`npm`

Username: Username: // enter the Username you registered in the official website, press enter Password: Please make sure your password is correct, press Email:(this is Public) // enter the Email address bound to the official website registration, press enterCopy the code

upload

NPM publish // Here upload command, enterCopy the code

A Hekr-UI is released

undo

It’s easy to undo it within 24 hours.

npm unpublish --force 
Copy the code

You’re done

Let’s enjoy the taste of life, if we feel, the more we will live longer.

Give a star if you think it’s good

This article demonstrates the library address hekr-ui
The document address
Program source code

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Build and release vUe-based UI component libraries efficiently

The opening

preface

The selection

purpose

Basically,

Start a project

1. Initialize a project

2. Associate code with your library

Configure your project

1. Add dependencies

2. Some conventional directory structures

3. Modify yours`package.json`file

4. Document configuration

5. Continuous integration

practice

Complete and package components

Upload your own`npm`

Sign up at ®️ and switch to official`npm`The source

The sign-in`npm`

upload

undo

You’re done

Build and release vUe-based UI component libraries efficiently

The opening

preface

The selection

purpose

Basically,

Start a project

1. Initialize a project

2. Associate code with your library

Configure your project

1. Add dependencies

2. Some conventional directory structures

3. Modify yourspackage.jsonfile

4. Document configuration

5. Continuous integration

practice

Complete and package components

Upload your ownnpm

Sign up at ®️ and switch to officialnpmThe source

The sign-innpm

upload

undo

You’re done

Related Posts

Vue3.0 + Element Plus date selector to modify Chinese

CSS family – various layout implementations

Canvas

3. Modify yours`package.json`file

Upload your own`npm`

Sign up at ®️ and switch to official`npm`The source

The sign-in`npm`