Preface:

With the continuous expansion of front-end business, some wheels or business-oriented secondary encapsulation codes are also used in various projects. In order to improve team development efficiency, stabilize development quality and expand front-end engineering, a business component library serving the business is essential ~

Business component libraries are positioned differently from third-party component libraries such as Ant-Design.

Business Component library prototype:

Link to display the component library: http://8.210.196.94:8082 ps: The server is slightly damaged. Please wait patiently

This article builds the component library packaging framework, the next article is about how to write a high quality component manual teach you to write large screen adaptive container components

1. Technical selection

technology	The paper
Vue3	~
Typescript	~
Rollup	Vue and React source code is packaged with this lightweight and simple package tool
Tailwindscss	An atomic CSS framework, simple, strong customization, fast style development https://tailwindcss.com/docs

2. Environment construction

Create a folder and NPM init (2). Write to pageck.json

{
 "name": "test-bricks-teach"."version": "1.0.0"."description": ""."author": "peiyahui"."types": "dist/index.d.ts"."license": "ISC"."main": "dist/test-bricks-teach.umd.js"."module": "dist/test-bricks-teach.esm.js"."scripts": {
   "build": "npm run clean && npm run build:esm && npm run build:umd"."dev": "npm run clean && npm run dev:umd"."build:esm": "rollup --config build/rollup.esm.config.js"."build:umd": "rollup --config build/rollup.umd.config.js"."clean": "rimraf ./dist"
 },
 "devDependencies": {
   "rollup": "^ 2.38.5"."rollup-plugin-vue": "6.0.0 - beta. 6"."rollup-plugin-typescript2": "^ 0.29.0"."@rollup/plugin-node-resolve": "^ 11.1.1." "."@types/lodash-es": "^ 4.17.4"."@vue/compiler-sfc": "^ 3.0.0"."postcss-import": "^ 14.0.0"."rimraf": "^ 3.0.2." "
 },
 "dependencies": {
   "rollup-plugin-postcss": "^ 4.0.0"."rollup-plugin-commonjs": "^ 10.1.0"."tailwindcss": "^ 1.9.0"."postcss": "^ 8.2.8"."lodash-es": "^ 4.17.20"."typescript": "~ 3.9.3." "."vue": "^ 3.0.0"}}Copy the code

Package. json configuration is familiar to you (it is recommended to copy directly). The two fields of package.json are output files after packaging, write the version field first, do not leave the version field

3. Write the Rollup configuration file

Create a build folder horizontally with package.json and create three files 1. Document 1: rollup. Config. Js

import vue from 'rollup-plugin-vue'

import typescript from 'rollup-plugin-typescript2'
import {nodeResolve} from '@rollup/plugin-node-resolve'
import postcss from 'rollup-plugin-postcss'
import {name} from '.. /package.json'
import commonjs from 'rollup-plugin-commonjs';
import postcssImport from 'postcss-import';
// Handle apply and built-in mixins
import tailwindcss from 'tailwindcss'

const file = type= > `dist/${name}.${type}.js`

const overrides = {
    compilerOptions: {declaration: true},
    exclude: ["tests/**/*.ts"."tests/**/*.tsx"]}export {name, file}
export default {
    input: 'src/index.ts'.output: {
        name,
        file: file('esm'),
        format: 'es'
    },
    plugins: [
        nodeResolve(),

        typescript({tsconfigOverride: overrides}),
        vue(),
        postcss({
            extensions: [".css"].extract: true.plugins: [postcssImport(), tailwindcss()]
        }),
        commonjs({
            include: [
                "node_modules/**"."node_modules/**/*"]})],external: ['vue'.'echarts'.'lodash-es']}Copy the code

2. The file 2: rollup. Ems. Config. Js

import basicConfig, { name, file } from './rollup.config'
export default {
  ...basicConfig,
  output: {
    name,
    file: file('esm'),
    format: 'es'}}Copy the code

3. The file 3: rollup. Umd. Config. Js

import basicConfig, { name, file } from './rollup.config'
export default {
  ...basicConfig,
  output: {
    name: 'well-bricks'.file: file('umd'),
    format: 'umd'.globals: {
      'vue': 'Vue',},exports: 'named'}}Copy the code

At this point we have the Rollup package configuration done file 1: introducing plug-ins, setting input and input file name and location File 2 and file 3 just reuse file 1 configuration fields and overwrite the output format

4. Create a component

(1). Create/SRC/components/testBricks folders, and under the testBricks folder to create index. The ts and index. The vue (2). Create/SRC /index.ts (3). Create/SRC /main.css your directory structure should look like this:

5. Global and local registration components

Excellent component libraries such as Ant-Design and elementUI provide both global import and local import: / SRC /index.ts: / SRC /index.ts: / SRC /index.ts: / SRC /index.ts: / SRC /index.ts:

/* eslint-disable */
import {App} from 'vue'

import './main.css'   // Introduce styles
import TestBricks from './components/testBricks'

const components = [
    TestBricks
]

// Global registration
const install = (app: App) = > {
    components.forEach(component= > {
        app.component(component.name, component)
    })
}

// Local registration
export {
    TestBricks,
    install
}
export default {
    install
}


Copy the code

Ps: Now that you have a component library framework, let’s develop the specific components

6. Add components to tailwindcss

Tailwind CSS is already configured in the rollup configuration, so we can add the tailwind style (1). Introduce tailwindCSS built-in styles in/SRC /main. CSS

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

Copy the code

Ps: There is actually a [black magic]

You can even write the tailwinds style in the component library (for example, the [.btn] property below) and use it directly in your project after packaging it

// main.css

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

.btn {
    @apply bg-blue-500 text-white;
}
Copy the code

Use: \ in the example item

<button class="btn"></button>
Copy the code

(2). In the/SRC/components/testBricks/index. The vue

<template>
 <section class="text-gray-600 body-font">
   <div class="container px-5 py-24 mx-auto">
     <div class="flex items-center lg:w-3/5 mx-auto border-b pb-10 mb-10 border-gray-200 sm:flex-row flex-col">
       <div class="flex-grow sm:text-left text-center mt-6 sm:mt-0">
         <h2 class="text-gray-900 text-lg title-font font-medium mb-2">123</h2>
         <p class="leading-relaxed text-base">333</p>
       </div>
     </div>
   </div>
 </section>
</template>
<script lang="ts">
import {defineComponent} from 'vue'

// array that contains style props
export default defineComponent({
 name: 'testBricks'.props: {},})</script>

<style scoped>

</style>

Copy the code

Ps: Here is the style of tailwindscSS written without any logic

(3). / SRC/components/testBricks/index. The ts writes

import { App } from 'vue'
import IndexFeature from './index.vue'
IndexFeature.install = (app: App) = > {
  app.component(IndexFeature.name, IndexFeature)
}

export default IndexFeature


Copy the code

Ps: Now our component library is ready to be packaged and released

7. About packing

npm run build

Ps: generates a dist file

8. About component library publishing to NPM

Blog.csdn.net/taoerchun/a… Ps: Please follow this and remember to change the version number of package.json with each release

** If you just want to import component libraries directly and don’t want to publish to NPM, you can try NPM link **

About NPM link you can see this article: www.jianshu.com/p/aaa7db89a… Ps: NPM link introduces component libraries in a way that can cause conflicts with ESLint. It is recommended to disable ESLint checking for packaged JS files

9. Several ways to introduce component library into the project

Once released, we can introduce our component library into the vuE3 project code

Introduced the global

(1). Import main.js in the project file

import legoBricks from "test-bricks-teach"
import 'well-bricks/dist/well-bricks.umd.css'

const app = createApp(App)
app.use(legoBricks)
 
app.mount('#app')

Copy the code

(2). Use the component directly from template in.vue

    <test-bricks></test-bricks>
Copy the code

Local introduction

(1). Import main.js in the project file

import 'well-bricks/dist/well-bricks.umd.css'
Copy the code

(2). Import components in the. Vue file, register components, and use

import { TestBricks } from "test-bricks-teach"

/ / register
components: {TestBricks}

// used in template
 <test-bricks></test-bricks>

Copy the code

About Compatible JS

Sometimes js+vue3 compatible wheels need to add the index.d.ts declaration file to the component

declare  const List:any
declare  const name:any
Copy the code

Ps: Use any whenever you need to use any

Talk about the advantages and disadvantages

Advantages: 1. Improve team development efficiency, plug and pull introduction, no additional configuration 2. 3. Some third-party libraries can be directly integrated into the component library, such as Echarts, to write an automatically adapted Echarts container component

Disadvantages: 1. After introducing tailwindCSS, tailwindCSS has a default initialized CSS, similar to reset.css. Introducing component libraries overwrites the project’s initial style (there is no elegant solution to this, I usually use reset.css again).

The last

You can download the source code directly and write your own component library components

git clone [email protected]:pyh996/vue3-rollup-tailwindcss.git
Copy the code

Github address: github.com/pyh996/vue3-rollup-tailwindcss

2. Introduce a tailwindcss component style library, very good-looking, can be directly packaged, super easy to use ~

tailblocks.cc

The next article is an introduction to how to write a high quality component hand by hand teach you to write large screen adaptive container components

If this article has helped you, please follow, like and comment