Build a Vue3 component library for TypeScript/JSX using Vite

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Recently, IN a live broadcast with the village head teacher, WE share the construction of vue Devui open source component library. The first three phases are based on tree component 🌰, introducing how to design and develop vue component:

Vue DevUI Open Source Guide 01: Submit my first PR
Vue DevUI Open Source Guide 02: Implement a Tree component that can render multiple nodes
Vue DevUI Open Source Guide 03: How to add expansion/collapse to tree components

This time, I will share with you the content related to component library engineering.

Subsequent live broadcasts will also split into two lines:

One is the design and implementation of components
Another is the engineering of component libraries

Welcome to continue to pay attention to ~

Last live review

First, we stopped and added unit tests to the tree component (rendering nested layers of nodes) from last time
Then complete the tree component to expand/collapse the function
The combined API of VUe3 is used to reconstruct this function and implement useToggle method to remove this function from setup

The final result:

1. Create basic projects

yarn create vite vite-demo --template vue-ts

# or
# npm init vite@latest vite-demo -- --template vue-ts
Copy the code

$yarn Create vite vite-demo --template vue-ts yarn create v1.22.10 [1/4] 🔍 Resolving packages... (2/4) 🚚 Fetching packages... [three] 🔗 Linking dependencies... [4/4] 🔨 Building fresh packages... Success Installed "[email protected]" with binaries: - create-viet-cVA Scaffolding project in /kagol/ viet-demo... Done. Now run: CD vite-demo yarn dev ✨ Done in 5.46s.Copy the code

A very friendly reminder of what to do next

  cd vite-demo
  yarn
  yarn dev
Copy the code

Install dependencies

$yarn yarn install v1.22.10 warning package.json: No license field info No lockfile found. Warning [email protected]: No license Field [1/4] 🔍 Resolving Packages... (2/4) 🚚 Fetching packages... [three] 🔗 Linking dependencies... [4/4] 🔨 Building fresh packages... Success Saved lockfile. ✨ Done in 7.33s.Copy the code

Local boot

"dev": "vite",
Copy the code

$yarn dev yarn Run v1.22.10 Warning package.json: No license field $vite pre-bundling dependencies: Vue (this will be run only when your dependencies or config have changed) vite v2.6.5 dev server running at: > Local: http://localhost:3000/ > Network: use `--host` to expose ready in 402ms.Copy the code

Browser view

Enter the following link in the browser address bar to see the effect:

http://localhost:3000/

Build a production package

"build": "vue-tsc --noEmit && vite build",
Copy the code

Production build scripts, vuE-ts templates differ from vue templates in that vue-ts templates add type checking commands:

vue-tsc --noEmit
Copy the code

During the build process, it checks for type errors and indicates them.

$yarn Build yarn Run v1.22.10 Warning package.json: No license field $VUE-tsc --noEmit && Vite build vite v2.6.5 building for production... ✓ 14 modules transformed. Dist/assets/logo. 03 d6d6da. 6.69 PNG KiB dist/index. The HTML 0.48 KiB dist/assets/index. 31 b3d229. Js KiB/gzip 1.95:1.03 KiB dist/assets/index 459 f8680. CSS 0.34 KiB/gzip: 0.24 KiB dist/assets/vendor. 2 acfe60d. Js KiB/gzip 49.61:19.93 KiB ✨ Done in 11.09 s.Copy the code

2 Some key documents

Use the tree command to view the directory structure

Tree - l $3 / kagol/vite - demo ├ ─ ─ the README. Md ├ ─ ─ index. The HTML ├ ─ ─ package. The json ├ ─ ─ public | └ ─ ─ the favicon. Ico ├ ─ ─ the SRC | ├ ─ ─ App. Vue | ├ ─ ─ assets | | └ ─ ─ logo. The PNG | ├ ─ ─ components | | └ ─ ─ the HelloWorld. Vue | ├ ─ ─ env. The template which s / / vue - ts | └ ─ ─ the main, ts ├ ─ ─ tsconfig. Json / / vue - ts template └ ─ ─ vite. Config. Ts directory: 4 file: 11Copy the code

package.json

{" name ":" vite - demo ", "version" : "0.0.0", "scripts" : {" dev ":" vite, / / local boot "build" : "Vue-tsc --noEmit && Vite build", // build production package, added vue-tsc type check vue template for Vite build" serve": "Vite preview" : {"vue": "^3.2.16"} "devDependencies": {"@vitejs/plugin ": "^" 1.9.3, / / provide Vue 3 single file components support "typescript" : "^" 4.4.3, / / the Vue - ts template "vite" : "^" 2.6.4 ", "Vue - TSC" : "^0.3.0" // Vue3 ts type checking tool (optional) VUE-TS template}}Copy the code

There are five dependencies

Running state dependence: VUE

Development state dependence:

vite
@vitejs/plugin- Vue Provides vite plug-ins supported by vue 3 single file components
typescript
Vue-tsc VuE3 type check tool. This tool is optional

vite.config.ts

vite.config.ts/vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})
Copy the code

tsconfig.json

{/ / compile options https://www.tslang.cn/docs/handbook/compiler-options.html "compilerOptions" : {" target ": "Esnext ", // target language version "useDefineForClassFields": true, // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#the-usedefineforclassfields-flag-and-the- Declare - Property-modifier "module": "esNext ", // Specify the module standard "moduleResolution": "node", // Decide how to handle the module" strict": True, / / to enable all the strict type checking option "JSX" : "preserve", in. / / TSX composite file support JSX https://www.tslang.cn/docs/handbook/jsx.html "sourceMap" : // Generate the target file sourceMap file "resolveJsonModule": true, // to import json files "esModuleInterop": True, / / in order to import CJS file convenient https://zhuanlan.zhihu.com/p/148081795 "lib" : ["esnext", "dom"] // List of library files that need to be imported during compilation}, // specify files or folders that the compiler needs to compile "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"] }Copy the code

index.html

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, Initial =1.0" /> <title>Vite App</title> </head> <body> <div id=" App "></div> <script type="module" src="/src/main.ts"></script> </body> </html>Copy the code

If type=”module” is not added, the browser console will return an error:

Uncaught SyntaxError: Cannot use import statement outside a module
Copy the code

main.ts

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
Copy the code

App.vue

<script setup lang="ts"> // This starter template is using Vue 3 <script setup> SFCs // Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup import HelloWorld from './components/HelloWorld.vue' </script> <template> <img alt="Vue logo" src="./assets/logo.png" /> <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />  </template> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>Copy the code

env.d.ts

Vue component type declaration, not adding this file will prompt

The module './ app.vue 'or its corresponding type declaration could not be found.Copy the code

3 Add JSX support

You want to be able to use jSX-written components in your projects.

HelloWorld.tsx

export const HelloWorld = () => <div>Hello World jsx</div>
Copy the code

App.vue

import { HelloWorld } from './components/HelloWorld'

<HelloWorld />
Copy the code

Uncaught ReferenceError: React is not defined

Uncaught ReferenceError: React is not defined
    at HelloWorld (HelloWorld.tsx:1)
Copy the code

Introduce vite plugin: @vitejs/plugin-vue-jsx

Installing a plug-in

yarn add -D @vitejs/plugin-vue-jsx
Copy the code

The introduction of the plugin

vite.config.ts

import vueJsx from '@vitejs/plugin-vue-jsx'
plugins: [vue(), vueJsx()]
Copy the code

Connect to the tree component for the first live broadcast

tree.tsx

import { defineComponent, ExtractPropTypes, PropType } from 'vue' interface TreeItem { label: string children? : TreeData } type TreeData = Array<TreeItem> const treeProps = { data: { type: Array as PropType<TreeData>, default: () => [], } } type TreeProps = ExtractPropTypes<typeof treeProps> export default defineComponent({ name: 'DTree', props: treeProps, setup(props: TreeProps) { console.log('props:', props, props.data) return () => { return <div class="devui-tree"> { props.data.map(item => <div>{ item.label }</div>) } </div> }}})Copy the code

App.vue

Import {ref} from 'vue' import DTree from './components/tree' const data = ref([{label: '1', children: [{label: 'secondary 1-1, children: [{label:' level 3 '1-1-1}]}},... ) <d-tree :data="data"></d-tree>Copy the code

Also welcome to our previous installments of Vue DevUI component library construction:

How to add expansion/collapse to the Tree component
Vue DevUI Open Source Guide 02: Implement a Tree component that can render multiple nodes
Vue DevUI Open Source Guide 01: Submit my first PR

Build a Vue3 component library for TypeScript/JSX using Vite

Last live review

1. Create basic projects

Install dependencies

Local boot

Browser view

Build a production package

2 Some key documents

package.json

vite.config.ts

tsconfig.json

index.html

main.ts

App.vue

env.d.ts

3 Add JSX support

Uncaught ReferenceError: React is not defined

Introduce vite plugin: @vitejs/plugin-vue-jsx

Connect to the tree component for the first live broadcast

Related Posts

VueRouter dynamically adds routes and the page is blank after refreshing

Optimization practice of Tao Flutter smoothness

(a == 1&&a == 2&&a ==3) can it be true?