background

Recently, I developed a VUe3 UI library with my friends, hoping to use Vite TSX VUe3 and other technologies to develop, and we can view the latest components through vuepress documents while developing. The following is some summary of environment construction

The use of the technical

  • vuepress-vite
  • vite
  • vue3
  • TSX – To be updated
  • Esbuild – To be updated
  • Shelljs – To be updated

Environment set up

1. Build a module for browsing documents

We all know that the official documents of Vue are presented using Vuepress. The presentation style of Vuepress is very familiar from frequent viewing of Vue documents, so WE choose Vuepress. However, since vue3 has been used to develop components, Is it possible to build vuepress projects using Vite? Yes, the official Version 2.0 of Vuepress also provides this method.

First create the my-UI folder and enter

# my-ui root directory

Initialize the environment
yarn init
Install vuepress, vuepress-vite
yarn add -D vuepress@next vuepress-vite@next
Copy the code

Vuepress generates cache directory. Cache and temporary directory. Temp at runtime. These files do not need to be uploaded remotely, so they have to be added to the.gitignore file created

node_modules
docs/.vuepress/.cache
docs/.vuepress/.temp
Copy the code

Create the docs directory, create the. Vuepress directory and readmd. md file in docs, and create the vuepress initialization file config.ts in. Vuepress

|-- my-ui
    |-- docs
    |   |-- .vuepress
    |       |-- config.ts
    |   |-- README.md
Copy the code

Use the docs directory as your sourceDir, for example if you are running the vuepress docs:dev command. At this point, the routing path for your Markdown file is:

Relative paths Routing path
/README.md /
/guide/README.MD /guide/
/guide/page.md /guide/page.html

So we wrote in the docs/ readme.md file, which was the first page of the theory project launch

If vuepress wants to use Vite package, it needs to modify the configuration file as follows

// docs/.vuepress/config.ts
import { defineUserConfig } from 'vuepress-vite'
import type { DefaultThemeOptions, ViteBundlerOptions } from 'vuepress-vite'

export default defineUserConfig<DefaultThemeOptions, ViteBundlerOptions>({
  // Use vite mode to package
  bundler: '@vuepress/vite'.bundlerConfig: {
    // Vite package tool options}})Copy the code

Added the vuepress script command in package.json

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}
Copy the code

Now that the document browsing module is initialized, run Yarn docs:dev to see what happens

2. Build vuE3 using Vite

Some people may wonder how vue3 and vuepress coexist. Should VUe3 be written in vuepress or vuepress? The answer is coexistence. For example, in a project, there are react and Vue frameworks. The two frameworks are independent of each other and do not affect each other, but one project can directly access the content of the other project through packaging

Vite provides vuE-TS template installation in the way of demo for project folder name

# my-ui root directory
yarn create @vitejs/app demo --template vue-ts
Copy the code

UI libraries are generally composed of document presentation module Docs, component presentation module Example, and component package module. Processes are developed in Packages, viewed in Example, and displayed in Docs. So we need to modify the Vite project structure that we just created

|-- my-ui                                                                    |-- my-ui
|-- package.json |-- package.json |-- yarn.lock |-- yarn.lock |-- docs |-- docs | |-- README.md | |-- README.md | |-- .vuepress | |-- .vuepress | |-- config.ts | |-- config.ts |-- demo |-- example |-- .gitignore |-- assets |-- index.html |-- components |-- package.json |-- App.vue |-- README.md => |-- main.ts |-- tsconfig.json |-- shims-vue.d.ts |-- vite.config.ts |-- vite-env.d.ts |-- public |-- favicon.ico | |-- favicon.ico |-- index.html |-- src |-- tsconfig.json |-- App.vue |-- vite.config.ts |-- main.ts |-- .gitignore |-- shims-vue.d.ts |-- README.md |-- vite-env.d.ts |-- assets |-- components
Copy the code

Move favicon.icon to the root directory, delete public, move SRC to the root directory, rename it example, Modify the reference paths to main.ts and favicon.icon in index.html, and finally delete the demo directory

Notice how to change the reference path after moving the project and integrate the common files such as package.json. gitignore for Vite and package.json. gitignore for vuepress

The modified package.json looks like this

{
  "name": "my-ui"."version": "1.0.0"."main": "index.js"."license": "MIT"."scripts": {
    "vite:vue": "vite"."vite:build": "vue-tsc --noEmit && vite build"."vite:serve": "vite preview"."docs:dev": "vuepress dev docs"."docs:build": "vuepress build docs"
  },
  "dependencies": {
    "vue": "^ 3.0.5"
  },
  "devDependencies": {
    "vuepress": "^ 2.0.0 - beta. 21"."vuepress-vite": "^ 2.0.0 - beta. 21"."@vitejs/plugin-vue": "^ 1"."@vue/compiler-sfc": "^ 3.0.5"."typescript": "^ 4.3.2." "."vite": "^ 2.4.0." "."vue-tsc": "^ 0.0.24"}}Copy the code

Yarn vite: Vue: yarn Vite :vue