Address of the project: https://husilang.github.io/zm-ui

Project reference: Build Vue component library VV-UI from scratch

The original intention of the project is to learn how to encapsulate a Vue based UI component library, and record each step by the way, as well as the difficulties and experiences encountered in the process.

Here is my personal project construction process, hoping to help you.

① Scaffolding initialization project

Use Vue cli version 3.0.0 and above to create the project by entering the following command in node or cmd

vue create project-name

Select Manually select features
Select Babel, Router, Vuex, CSS pre processors, Unit Testing
Select sass / SCSS (with node SASS)
Choose Mocha + Chai
Select In dedicated config files
Install above (select as needed)
Run the following command:

cd project-name
npm run serve

It depends on whether the project is started successfully. Congratulations on completing the first step~

② Directory structure modification

The src directory is modified to examples for component examples
In the examples directory, create a new docs folder to write documents for each component
Add packages folder under the project to store the encapsulated components

③ Add profile

Due to the modification of the directory structure, the relevant configuration needs to be modified. Please refer to the vue cli official website here.
In the root directory of the project, add the configuration file vue.config.js. The code is as follows:

const path = require("path");
module.exports = {
    pages: {
        index: {
            entry: "examples/main.js", // js entry file modification
            template: "public/index.html",
            filename: "index.html"
        }
    },
    chainWebpack: config => {
        // Reset directory alias
        config.resolve.alias
            .set("@", path.resolve("examples"))
            .set("~", path.resolve("packages"));
        // Add the js files under the examples and packages directory to the compilation
        config.module
            .rule("js")
            .include.add("/packages")
            .end()
            .include.add("/examples")
            .end()
            .use("babel")
            .loader("babel-loader");
    },
}

Run npm run serve to see if it can start successfully

④ Write the first component

Next, we need to encapsulate the first component. Since the focus of this document is not to explain how to encapsulate components, let's write a simple component to test.

Before writing components, I've learned about css naming conventions BEM.

After reading a few articles about BEM, it is still vague and practical. In the future component encapsulation, I will slowly use this specification.

Encapsulate a test component under packages

Create a new folder test under packages, index.js file and src/test.vue under test directory, as follows:
In packages/test/src/test.vue

<template>
    <div class="zm-test" :style="{backgroundColor: bgColor}"></div>
</template>

<script>
    export default {
        name: 'ZmTest',
        props: {
            bgColor: {
                type: String,
                default: "#ccc"
            }
        }
    }
</script>

<style lang="scss">
    .zm-test {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        animation: zm-opacity 2s infinite linear;
    }
    @keyframes zm-opacity{
        0% {opacity:1}
        10%,90%{opacity:.8}
        20%,80%{opacity:.7}
        30%,70%{opacity:.5}
        40%,60%{opacity:.3}
        50%{opacity:0}
        100%{opacity:.95}
    }
</style>

In packages/test/index.js

import ZmTest from './src/test.vue'

// Support on-demand reference
ZmTest.install = function (Vue) {
  Vue.component(ZmTest.name, ZmTest);
};

export default ZmTest;

Create index.js under packages

In packages/index.js

import ZmTest from './test/index'

const components = [
    ZmTest
];

const install = function (Vue) {
  if (install.installed) return;
  components.map(component => Vue.component(component.name, component));
};

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

export default {
    install,
    ZmTest
}

Reference examples under examples

In examples/main.js

// do something...

import ZmUI from '../packages/index'

Vue.use(ZmUI);

// do something...

Reference test component in examples/views/Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <zm-test bgColor="blue"></zm-test>
  </div>
</template>

<script>
// @ is an alias to /examples
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'home',
  components: {
    HelloWorld
  }
}
</script>

After starting the program, you can see that our encapsulated test component can work normally in "http://localhost:8080/#/home"~

⑤ Document the first component

Xiaobai doesn't know anything about the writing method of md... So first, I learned the common syntax of md files. Refer to the article: How to write md documents.
This process is divided into two steps. The first step is to make the. md file display normally, you can see the running results and code display. The second step encapsulates a code display component, so that it can be expanded, folded and highlighted.

Document

Create a new test.md file under examples/docs, and write something about it as follows:

#Test components

Test component is used to test whether md documents can display code running results in the project as vue files do

The operation results are as follows
<zm-test bgColor="red"></zm-test>

The code is as follows
`<zm-test bgColor="red"></zm-test>`

Installation tools

A compilation tool -- Vue markdown loader is needed for md files
Under this project, use the command line tool to run the following commands

npm run vue-markdown-loader -D

Modify profile

Modify vue.config.js so that the md file can be displayed in the project like the Vue file

// do something...

module.exports = {
    // do something...

    chainWebpack: config => {
        // do something...

        // Using Vue markdown loader
        config.module.rule("md")
            .test(/\.md/)
            .use("vue-loader")
            .loader("vue-loader")
            .end()
            .use("vue-markdown-loader")
            .loader("vue-markdown-loader/lib/markdown-compiler")
    },

    // do something...
}

Add route

Add the route of test document in router.js

// do something...

export default new Router({
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/about',
            name: 'about',
            component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
        },
        {
            path: '/test',
            name: 'test',
            component: () => import('../docs/test.md')
        }
    ]
})

View results

Restart the program (note that as long as the vue.config.js file is modified, the program needs to be restarted). Open "http://localhost:8080/#/test", you can see the text code display and a small red dot flashing, which represents the perfect end of the first step~

Package code display component

Start the second step.
Above, we have completed the normal display of md file, but we can do better in code display, encapsulate a component of code display, so that the sample code can be expanded and folded, and the code can be highlighted.
You can find out what you are interested in markdown-it.
I'm still in the process of understanding. I'll update it later.

⑥ Let the project show on github

Reference article: https://segmentfault.com/a/1190000017084155

The project is a little over half finished, and I can't wait to put it on github to record.
I can see my project results intuitively locally. Now I hope to have a demo address on github so that others can also see my project display intuitively. Through the search of github documents and related materials, I found the solution. As follows:

Installation tools

Install the GH pages tool under the project

npm install gh-pages -D

Add deployment command

Modify scripts command in package.json file

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
  },

Modify configuration

vue.config.js needs to modify the publicPath configuration

module.exports = {
    // do something...
    publicPath: process.env.NODE_ENV === 'production' ? '/project-name/' : '/', //Since my project is named ZM UI on github, my project name is ZM UI
    // do something...
}

Package deployment

Run the following command on node or cmd

npm run deploy

See "Published". Congratulations on your successful deployment. Next, you can go to github to see if your project has an extra branch GH pages

Modifying project settings on github

Under github your project, find "github pages" under "Settings", and select "GH pages branch" for "source" to save successfully, then you will have the demo address~~

Above, to be continued