How to configure the environment of Vue3 component library

Because we are using Vite Ts to develop the Vue3 component library, we need to install typescript and vue3. At the same time, the project will use Less to manage the component library style

pnpm add vue@next typescript less -D -w

Use pnpm if you want to install it at the project root directory, you need to add-w

Initialize ts

Executenpx tsc --initin the root directory, and then ts will be automatically generated The configuration filetsconfig.json, and then we will make a replacement

{ "compilerOptions": { "baseUrl": ".", "jsx": "preserve", "strict": true, "target": "ES2015", "module": "ESNext", "skipLibCheck": true, "esModuleInterop": true, "moduleResolution": "Node", "lib": ["esnext", "dom"] } }

tsconfig.jsonWe will make such a configuration for the time being, and there may be certain adjustments in the future.

Build a vue3 project based on vite

Because what we want to develop is a Vue3 component library, we definitely need a Vue3 project to test our component library, so here we will build a vue3 project based on Vite Vue3 project to debug components. Therefore, we create a new folder called play in the root directory and initializepnpm init. Subsequent component debugging will be carried out under this project. Next we will start building a Vue3 Vite project

Installing plug-ins

We need to installviteandvitejs/plugin-vueplug-ins,@vitejs/plugin-vueThe plug-in is for parsing files with the suffix.vue. Execute

pnpm add vite @vitejs/plugin-vue -D

Configuration vite.config.ts

Newvite.config.tsConfiguration file

import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; export default defineConfig({ plugins: [vue()], });

New entry html file# in the play directory

##@vitejs/plugin-vuewill load the index.html under play by default

scripttag Need to addtype="module"

app.vuefile

main.ts

import { createApp } from "vue"; import App from "./app.vue"; const app = createApp(App); app.mount("#app");

package.jsonConfigurationscriptsScript

{ "name": "play", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "vite" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@vitejs/plugin-vue": "^4.0.0", "vite": "^4.1.1" } }

pnpm-workspace.yamlfile

packages: - "packages/**" - "play"

pnpm run dev, we can start our play project

##But there is a problem that ts cannot recognize the

file, so the compiler will report red

At this time we need to create a new declaration file

to let ts know the file*.vue

declare module '*.vue' { import type { DefineComponent } from "vue"; const component: DefineComponent<{}, {}, any> }