preface

Building a Vue UI component library from scratch — Project initialization

Building a Vue UI component library from scratch (part 2) – Write the first component

Build a Vue UI component library from scratch (3) – Release the first NPM package

— — — — — — — — — — — — — — — — — — — — — — — to be continued, the next will release about below — — — — — — — — — — — — — — — — — — — — –

Build a Vue UI component library from scratch (4) — Eslint configuration

Building a Vue UI component library from scratch (5) — Component library internationalization

Building a Vue UI Component library from scratch (6) – Component library unit Tests

Building a Vue UI component library from scratch (7) – Component libraries are built automatically

The purpose of this series of articles is to document my own process of building a component library, and also to provide a tutorial for those who want to write their own component library. The component library has been written for a period of time, and the basic shelf is almost built, but the process of building my own is not perfect, so I came back to sort out my ideas, and let my technology have an output.

Ninecat -ui.github. IO

Component library source ninecat-UI (if you feel good, you can give a start oh)

Here are some of the todolsits I wrote for this UI component library

  • Customize the document directory structure
  • Demonstrate the component demo through MD
  • Integrated Travis CI
  • Integrated unit testing
  • Integrated codecov
  • Automatically build component documentation
  • Automatically publish NPMS according to tag
  • Integrated docsearch
  • Integrated codepen
  • Color theme custom
  • Internationalization multilingual
  • Hybrid development of JavaScript and typescript

Ok, let’s get started!

Find the right component library prototype

Before you start writing component libraries, you need to have a good prototype. Element UI and Ant Design, which are popular in China, have corresponding component libraries. If you want to practice, you can use them directly.

There are two links to download the corresponding UI component library resources.

Element. The eleme. Cn / 2.0 / # / useful – cn…

Ant. The design/docs/spec/d…

I use Rsuite UI component library and feel good conscience team.

Once you have a prototype, you’re ready to go!

NPM initializes the project

Since we are building a component library from scratch, we can’t use scaffolding to build it, so we just start the project with NPM init.

mkdir ninecat-ui
cd ninecat-ui
npm init
Copy the code

Now that the project has been successfully initialized, let’s install the necessary dependencies.

Install dependencies

Based on my experience installing dependencies, I’ve divided them into the following categories: core dependencies, build dependencies, and tool dependencies. Of course this is my according to the function to distinguish, please see zhuanlan.zhihu.com/p/29855253 more professional classification

Here we use YARN to install dependencies. The dependency type is yarn add, and the dependency type is yarn add. After the framework is set up, the dependency type is yarn add. Then reconstruct the package.json file. About the package. The json more detailed document can reference docs.npmjs.com/files/packa…

A basic VUE project probably needs these dependencies: Vue, webpack, webpack-cli, webpack-dev-server, @babel/core, babel-loader, CSS-loader, htMl-webpack-plugin, vue-loader , vue – the template – the compiler

Hello World

With the dependencies installed, let’s define the project HTML template, entry file and VUE home file, create index.html in the root directory, create SRC, create index.js and index.vue under SRC.

index.html

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial - scale = 1.0 "> < title > ninecat - UI < / title > < / head > < body > < div id =" app "> < / div > < / body > < / HTML >Copy the code

index.vue

<template>
  <div>Hello Ninecat-ui</div>
</template>

<script>
export default {
  name:'App'
}
</script>
Copy the code

index.js

import Vue from 'vue'
import App from './index.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')
Copy the code

That’s it, now it’s time to simply configure WebPack to get your project up and running.

Create a build directory and add the webpack configuration file webpack.config.base.js

'use strict' const HtmlWebpackPlugin = require('html-webpack-plugin'); const { VueLoaderPlugin } = require('vue-loader') const path = require('path') module.exports = { entry: path.resolve(__dirname, '.. /src/index.js'), output: { path: path.resolve(__dirname, '.. /dist'), filename: "index.js" }, module: { rules: [ { test: /\.js$/, loader: "babel-loader", exclude: /node_modules/ }, { test: /\.vue$/, loader: 'vue-loader' } ] }, plugins: [ new HtmlWebpackPlugin({ template: './index.html', filename: 'index.html', }), new VueLoaderPlugin(), ] }Copy the code

If you are not familiar with these basic configurations, you should check out the official webPack documentation, which is linked to www.webpackjs.com/

With the above configuration, a basic VUE project is set up, and then we need to configure the project startup script. In package.json, scripts are configured as follows:

"scripts": {
    "start": "webpack-dev-server --config build/webpack.config.base.js"
 },
Copy the code

Finally, take a look at our project directory structure:

Then run our project: YARN Start

OK, now that a basic VUE project is set up, we can start building components later.

The first section of the source code in Ninecat-UI

Next chapter: Building a Vue UI component library from scratch (part 2) — write the first component