Card assembly packaging

Posted by Brakanjan on Fri, 04 Mar 2022 20:12:15 +0100

1. Implementation process of component library

1.1 component: Reusable Vue instances

1.2 Vue component library: a third-party UI Library Based on vue and independent of business, such as element and ant design

2. Implement your own component library

2.1 scaffold generation vue project
2.2 revised project catalogue

2.2.1 move the component directory under src directory to the root directory
2.2.2 move src to the root directory and rename it examples
2.2.3 configure the default entry file vue config. js

module.exports = { 
  pages: { 

2.3 create Card component
2.3.1 create css and lib directories in the components directory
2.3.2 configuring scss

1, npm i sass-loader@5 -S
2, npm i node-sass -D

2.3.3 create card in css directory SCSS file
2.3.4 create card folder under lib folder, src folder in card folder and main vue
2.3.5 create index in card folder JS (used to register directly as a global component when Vue.use(card))

lib => card => src => main.js


  <div class="Card" :style="width ? { width:width + 'px' } : {}">
    <!-- Picture if wiath If it exists, the original of the component will be overwritten width-->
      <div class="Card-img" :style="imgHeight ? { height: imgHeight + 'px' } : {}">
        <img :src="imgSrc" alt="img">
      <!-- summary If it does string Just show-->
      <div v-if="summary" class="Card-summary">
        {{ summary }}
      <!-- In another case, the user uses the slot -->
      <div v-else class="Card-summary">
      <!-- footer slot slot  -->
      <slot name="footer"></slot>

export default {
      /* Card width */
      /* Card picture address */
      /* Picture height */
      /* Picture overview */
      /* footer slot  */

card => index.js

import Card from './src/main.vue'

Card.install = function(Vue) {
    Vue.component(, Card)

export default Card

lib => index.js

import Demo from './demo'
import Card from './card'

const components = {

const install = function (Vue) {
    if(install.installed) return;
    Object.keys(components).forEach(key => {
        Vue.component(components[key].name, components[key]);

const API = {

export default API

css => card.scss

.Card {
    width: 270px;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 6px 10px 0 rgba(95, 101, 105, 0.15);
    &-img {
       height: 150px;
    &-summary {
        padding: 8px;
        font-size: 14;
    img {
        width: 100%;
        height: 100%;
    .level {
        font-size: 14px;
        color: #cdcdcd;
        margin-left: 10px;
    .price {
        color: red;

css => index.scss

@import './card.scss';

3. Using components


parameterexplaintypeIs it necessaryDefault value
widthCard widthNumberfalse-
imgSrcPicture resource addressStringtrue-
imgHeightPicture heightNumberfalse-
summaryCard summaryString/slotfalse-
footerBottom of cardSlotfalse-

4. webpack packaging configuration

Root directory = > webpack conponents. js

const {
} = require('vue-loader')
//Traversing a folder's Library
const glob = require('glob');
// Construct absolute path
const path = require('path');

const List = {};
/* Dynamic use of glob The sync method traverses the contents file directory */
async function makeList(dirPath, List) {
    const files = glob.sync(`${dirPath}/**/index.js`)
    for (let file of files) {
        const component = file.split(/[/.]/)[2];
        //Configure list object
        List[component] = `./${file}`;
makeList('components/lib', List)

module.exports = {
    entry: List,
    mode: 'development',
    output: {
        filename: '[name].umd.js', //card.umd.js
        path: path.resolve(__dirname, 'dist'),
        library: 'mui',
        libraryTarget: 'umd',
    //Configure Vue loader
    plugins: [
        new VueLoaderPlugin(),
    module: {
        rules: [{
            test: /\.vue$/,
            use: [{
                loader: 'vue-loader'

Run webpack components. js

node webpack.components.js

Install Vue loader to development dependency

npm i vue-loader -D

To add a run file target and run it, you need to install webpack CLI and select yes

"build:js": "webpack --config ./webpack.components.js",

5. gulp packaging scss file

const gulp = require('gulp');
//gulp no longer contains scss
const sass = require('gulp-sass') ( require ( 'sass' ));//scss -> css
const minifyCSS = require('gulp-minify-css');//compress

gulp.task('sass', async () => {
    return gulp.src('components/css/**/*.scss')
    .pipe(sass().on("error", sass.logError))

Install gulp gulp sass gulp minify CSS

npm i gulp gulp-sass gulp-minify-css -D

Add packaging instruction

"build:css": "npx gulp sass",

Component Publishing

1. Configure package json

"name": "2-1.ui",
"version": "0.1.0",
"description": "Card assembly",
"main": "dist/index.umd.js",
"keywords": [
"author": "wubo",
"files": [

2. Log in to npm

npm login

3. Upload components to npm

npm publish

Component documentation


1.1 VuePress consists of two parts: the first part is an open new window, which contains the theme system and plug-in API driven by Vue, and the other part is the default theme optimized for writing technical documents. Its original intention is to support the document requirements of Vue and its subprojects.

2. Building documentation web pages using Vuepress

npm install -D vuepress

To create a docs directory, you can use & & together with the third command, but an error will be reported for some reasons

mkdir docs

Create readme in the docs directory If MD is created automatically, there will be garbled code. You can create readme yourself MD file

echo '# Hello VuePress' > docs/

package.json add run command

"scripts": {
  "docs:dev": "vuepress dev docs",
  "docs:build": "vuepress build docs"


npm run docs:dev

Create directory

1,docs => .vuepress => components(card.vue,card.scss),public(img)
2,docs => componentDocs =>card. MD (used to display card usage examples and interface usage methods at last)
3,docs => README. MD (quick start page)

Add navigation bar, sidebar, title, base address

// .vuepress/config.js
module.exports = {
title: 'UI',//title
base: '/UI',//Static resource base address
themeConfig: {
  // navigation bar
  nav: [{
      text: 'Home',
      link: '/'
    }, {
      text: 'Github',
      link: ''
      text: 'Npm',
  sidebar: [

Change sidebar name configuration quick start

Create github site

1. New site name

2. Description

Find index MD is index MD, otherwise readme md

Configure the warehouse to wubo UI github. IO / below

1. Create a warehouse and push local code into github

//Initialize git
git init

//Bind local warehouse and remote warehouse
git remote add origin
//If an error is reported, use git remote rm origin to reset it

git add .

git commit -m "feat:save"

git push -u origin master

2. Configure deploy sh

git push -f master:gh-pages

2,package.json add to scripts command
 "deploy": "bash"

npm run deploy

3. Delete dist file for repeated submission

git add .

git commit -m "feat:save"

4. The component picture address is / UI / img jpg
5. After publishing, style and hyperlink problems can be viewed Config. Under vuepress JS (base: '/ UI')
6. Release

  npm run deploy

Topics: Javascript Front-end html