Write a UI library referring to elment- UI

I wrote a VUE UI library in my work, so record the steps of writing UI library here

First, start development

1. Create a new folder (it’s already under development)
2. Open the editor and import the project (I used WebStorm)
3. The new package. The json
4. I’m going to create a.EditorConfig file, and I’m going to use the standard webStorm mode which is 4 Spaces for all files and so on
5. Create four folders:
   1. Packages are component directories
   2. SRC Directory of common code for some components
   3. Build is mainly used to write webPack configuration files
   4. Examples were used to test our components, and I also used the contents of this directory as documents when they were finally packaged in my work
6. Create a.gitignore file

Write a component

1. Create a button folder in Packages
2. Create the index.js file and SRC folder in “button” and create “button.vue” in “SRC”
3. Write a component in button.vue as shown in the following example:

<template>
    <button class="act-button" @click="handleClick($event)" :type="type">
        <slot></slot>
    </button>
</template>

<script>
export default {
    name: "act-button".props: {
        type: {
            type: String.default: 'primary',}},methods: {
        handleClick(evt) {
            this.$emit('click', evt); }}}</script>
Copy the code

4. Write the following in button/index.js:

import Button from './src/button';

Button.install = function (Vue){
    Vue.components(Button.name, Button);
}

export default Button;
Copy the code

5. Create a new theme-chalk folder in Packages and a new button.less and index.less file in theme-Chalk.
6. Style the button component in button.less (longer code, no examples) and introduce button.less in index.less

Package components

1. Create a components.json folder under the project root directory to configure the component name and component entry file as shown in the following example:

{
    "button": "./packages/button/index.js"
}
Copy the code

2. Install dependencies

"devDependencies": {
    "vue": "^ 2.6.14"."vue-loader": "^ 15.9.8"."vue-loader-plugin": "^ 1.3.0"."vue-template-compiler": "^ 2.6.14"."webpack": "^ 5.54.0"."webpack-cli": "^ 4.8.0"."webpack-merge": "^ 5.8.0"
}
Copy the code

3. Create a new one in the Build folderwebpack.common.jsFile and write the following

const VueLoaderPlugin = require('vue-loader-plugin');

module.exports = {
    resolve: {
        extensions: ['.vue'.'.js'.'.jsx'],},module: {
        rules: [{test: /.vue$/,
                exclude: /node_modules/,
                use: 'vue-loader'}, {test: /.less/,
                exclude: /node_modules/,
                use: [
                    'style-loader'.'css-loader'.'less-loader',]}]},plugins: [
        new VueLoaderPlugin(),
    ]
}
Copy the code

4. Create a new one in the Build folderwebpack.lib.jsFile and write the following

const {merge} = require('webpack-merge'); const common = require('./webpack.common'); const components = require('.. /components.json'); const path = require('path'); module.exports = merge(common, { mode: 'development', entry: components, output: { path: path.resolve('./lib'), filename: '[name].js', libraryTarget: 'commonjs2', clean: true, } })Copy the code

5. Configure the NPM script

"scripts": {
    "build:lib": "webpack --config build/webpack.lib.js"
},
Copy the code

Package style files

Gulp is used to package the style content separately

1. Install the following dependencies

"gulp": "^ 4.0.2." "."gulp-autoprefixer": "^ 8.0.0." "."gulp-cssmin": "^ 0.2.0." "."gulp-less": "^ 5.0.0".Copy the code

2. Create gulpfile.js in the project root directory and write the following

const {src, dest} = require('gulp');
const less = require('gulp-less');
const cssmin = require('gulp-cssmin');
const autoprefixer = require('gulp-autoprefixer');

function css() {
    return src('packages/theme-chalk/*.less')
        .pipe(less())
        .pipe(autoprefixer({
            cascade: false,
        }))
        .pipe(cssmin())
        .pipe(dest('lib/theme-chalk'))}exports.default = css;
Copy the code

3. Modify the NPM build directive build:lib

"build:lib": "webpack --config build/webpack.lib.js && gulp"
Copy the code

Debug component library

We developed the component, we also need to debug it in the browser to see how it works

1. Create the SRC /index.js file and write the following content

import Button from '.. /packages/button';

export default {
    install(Vue) {
        Vue.use(Button);
    },
    Button,
}
Copy the code

2. Create a Vue project in the examples folder and introduce SRC /index.js and packages/theme-chalk/index.less files, then develop as a normal Vue project